Less 日常用法

less 和 sass 是兩種 css 預編譯語言，其目的是為了更快、更結構的編寫css檔案，是一種強大的 css 編譯語言，能使用變數、運算子、判斷、方法等等。

寫乙個.btn類並支援:hover:active樣式

css

.btn .btn:hover .btn:active

less

.btn
&:active
}

可以看出 less 的結構要比 css 清晰，並且寫的也要更少。

下面的 less 在使用中就會生成上面的 css。

而這還只是皮毛，保證你用過 less 之後就不會再用 css 寫樣式了。

less是支援變數的，因為有了變數，讓less在改變全域性樣式的時候更加方便了。

一般使用中，顏色是最常用的。其次是單位長度。

@變數名: 變數值
// 如：
// colors
@red: #cd594b;
@yellow: #f8ce5e;
@green: #4b9e65;
@yellow: #5a8dee;
// unites
@btn-padding: 4px;
@btn-lineheight: 26px;

實際使用中：

less

.btn-success

生成 css

.btn-success

可以直接在其它類中插入其它類的內容。

less

.bg-yellow .btn-warn

會生成 css

.bg-yellow .btn-warn

less 支援+-*/( )運算，看例子

@width-20: 20px; @count: 3; @per-10: 10%; .card // 注意，運算的時候，要在運算子兩邊留空格，因為可能會有橫線連線的變數，造成混淆。 // 單位 less 可以自動識別，不用擔心單位。

輸出

.card

參閱：

完整的函式有：

雜項函式、字串函式、列表函式、數學函式、型別函式、顏色定義函式、顏色通道函式、顏色操作函式、顏色混合函式

這裡只說一此關於顏色的常用方法，因為其它的我現在也沒怎麼用到。

lighten(顏色, 百分比)
// 調高顏色的亮度
darden(顏色, 百分比)
// 調低顏色的亮度
saturate(顏色, 百分比)
// 調高飽和度
desaturate(顏色, 百分比)
// 調低飽和度

輸出

.green .green-lighten .green-darken .green-saturate .green-desaturate

有時候，比如，你需要寫乙個按鈕類.btn-success,.btn-danger,.btn-default,.btn-warning，如果單個定義的話，會很麻煩，現在用了方法，就可以直接填引數完成了。

less

@green:     #4b9e65;
@blue: #5a8dee;
@yellow: #f8ce5e;
@red: #cd594b;
.btn-template(@bgcolor,@fcolor:white)
&:active 
}.btn-success
.btn-primary
.btn-warning
.btn-danger

上面的 less 輸出為下面的內容，有沒有很厲害

.btn-success .btn-success:hover .btn-success:active .btn-primary .btn-primary:hover .btn-primary:active .btn-warning .btn-warning:hover .btn-warning:active .btn-danger .btn-danger:hover .btn-danger:active

像 js 和其它高階開發語言一樣， less 也可以引用外部的 less 檔案

引用格式：

@import "variables.less"

這樣就把外部的variables.less引入到當前檔案中了

variables.less

// colors
@green: #4b9e65;
@blue: #5a8dee;
@yellow: #f8ce5e;
@red: #cd594b;
// units
@common-height: 30px;
@input-height: 26px;
@input-padding: 4px;

主體less檔案

@import "variables.less"
// 主檔案裡面就可以引用 variables.less 中的變數了。

就是去看 bootstrap 3.4 的樣式原始碼，bootstrap 3.4 就是用less寫的，這也是我後來用less沒用sass的主要原因。

是我孤陋寡聞了，原來 bootstarp 4 已經換作 scss 了，我也要轉向 scss 了，學習完了再來分享給大家。

點這裡去 github 檢視【 bootstrap 分支】，目前好像已經開始v5.0的開發了。

Less 日常用法

Less 日常用法

pychearm日常用法

Git日常用法 2

Less 日常用法

Less 日常用法

pychearm日常用法

Git日常用法 2

相關推薦