bootstrap Sass與Less知識點梳理

sass,less ==> css預處理器

sass官網:新增鏈結描述

vscode外掛程式：easy less

scss中

$變數名：變數值

作用域有順序，不會覆蓋

less中

@變數名：變數值

注意：.less檔案中

@key:margin

.box
: auto;
}

.box

不同：①：在less中 無屬性巢狀。

scss中有：如

&:hover

}

如 $num: 100px

height: $num + 20em;

③：sass中預設「/」不是除，是分割的操作

同：①sass,less中有：

round(3.4px)------四捨五入函式

percentage(0.2)--------百分數函式

不同：①sass中才有random()------取隨機數函式

less中沒有

②less中才有sqrt(25%)------開方函式

sass中沒有

③sass中可以自定義函式：

@function sum ($n, $m)

.box

.box

less中

①.less

.hide

.box

.hide

.box

.hide()

.box

.box

less中

.hide

(@color
).box

.box

①

@mixin show

.box

.box

②也可以傳引數

@mixin

hide
($color)
.box

.box

.show

#nm()
}.box

.box

.line

.box7
.box8

.inline,

.box7, .box8

.line

.box7
.box8

.inline, .box7, .box8

%line

.box7
.box8

.box7, .box8

①

$background:(

a:url(a.png),b:
url(b.png));
.box9

.box9

$transform:(

a:scale
(2),b:
rotate
(30deg));
.box9
;

transform

:scale
(2)retate
(30deg)
;

.box9

.box9

.box10

@media all and
(max-width
: 14440px)
}

.box10

@media all and
(min-width)
}

$count

: 3;
.box11
@else
($count < 4)
}

@count

: 5;
.get
(@cn
) when (
@cn > 4)
.box11

@for $i from 0 throungh 2

}

.box-2

.box-1
.box-0

@count2

:0;.get
(@cn
) when (
@cn<3)
;}

.box-2

.box-1
.box-0

@import

'./reset.scss'
;

@import

'./reset.scss'
;

@import

'./reset.scss'
;

@import

'./reset.scss'
;

Bootstrap sass 1 安裝與基本結構

最近專案都在用bootstrap布局，每次改動和檔案組織總感覺不是那麼清晰明了，所以藉著該專案，重新整理一下sass，在網上發現有bootstrap sass，已經整合好的乙個bootstrap的sass檔案，所以用這個框架對專案樣式部分又重新碼了一遍，感覺收穫還是蠻多的，就寫了一些總結，也算是對s...

L先生與階乘

沒錯，可憐的l先生又遇到了一道數學難題！n的階乘的末尾有多少個0？多測試例，處理到檔案結束。總測試例數量 15000 每行有乙個測試例，為乙個非負整數n 0 n 15000 每個測試例對應的輸出佔一行 1 230 00 思路 如果我們要判斷出0的個數，如果我們直接求n 那麼資料會很大，資料可能溢位，...

L0 L1 L2範數的聯絡與區別

這裡簡單地介紹以下幾種向量範數的定義和含義 與閔可夫斯基距離的定義一樣，l p範數不是乙個範數，而是一組範數，其定義如下 根據p 的變化，範數也有著不同的變化，乙個經典的有關p範數的變化圖如下 上圖表示了p從無窮到0變化時，三維空間中到原點的距離 範數 為1的點構成的圖形的變化情況。以常見的l 2範...