摘要：?jiǎn)挝恢敌枰y(tǒng)一，如果參數(shù)存在單位不同，會(huì)報(bào)錯(cuò)。亮度，單位百分?jǐn)?shù)。增加到最大值了對(duì)色彩透明減少得到是一個(gè)混色灰度色值將兩種顏色混合，默認(rèn)情況下，是取兩種顏色的十六進(jìn)制轉(zhuǎn)為十進(jìn)制相加后的平均值。

CSS編譯語言

瀏覽器中使用：less.min.js

Node中編譯

lessc demo.less  // 直接在cli中輸出

lessc demo.less test.css // 將把demo.less 編譯到 test.css 中 （lessc url newUrl）

lessc --clean-css demo.less test.css // 將demo.less 編譯到 test.css 文件并且壓縮 (插件：less-plugin-clean-css)

工程化工具

fis使用插件： fis-parser-less

match();中配置插件，然后處理拓展名。

fis.match("**.less", {
    parser: fis.plugin("less"),
    rExt: ".css"
});

gulp使用插件：gulp-less

var gulp =  require("gulp"),
    less = require("gulp-less");


// 編譯less
gulp.task("less1", function () {
    
    gulp.src("*.less")
        .pipe(less())
        .pipe(gulp.dest("test"));
    
});

// 啟動(dòng)任務(wù)
gulp.task("default", ["less1"]);

通過 {} 來嵌套處理。大括號(hào)內(nèi)部定義的元素的樣式。

body {
    div {
        width: 100px;
        height: 100px;
        background: cyan;
    }
}

    

通過 less @ 來定義變量

定義：@space: 100px;
使用：width: @space

@space: 20px;
@BgColor: cyan;
@color: #fff;

ul {
    padding: @space * .5;
    background: @BgColor;
    width: @space * 6; 
    height: @space * 2;
    li {
        float: left;
        width: @space * 2;
        height: @space;
        list-style: none;
        text-align: center;
        line-height: @space;
        a {
            color: @color;
            padding: @space*.15 @space*.15;
            text-decoration: none;
        }
    }
    li:hover {
        background: @color;
        a {
            color: @BgColor;
        }
    }
}

在Less中對(duì)繼承的一種實(shí)現(xiàn)，混合是創(chuàng)建一個(gè)類，并且將該類在其它類中實(shí)現(xiàn)。
定義：.link-style {}
使用：.demo1 { a { .link-style } }

// mix 混合
.box-style {
    width: 400px;
    height: 300px;
    background: cyan;
    margin: 0 auto;
}

.box1 {
    .box-style;
    background: tan;
}

.box2 {
    .box-style;
    width: 1000px;
}

混合是一種繼承，多個(gè)類繼承的樣式是不一樣的?？梢詫?duì)混合函數(shù)傳參。
定義： .className( @arg ) { width: @arg; }
使用： .classname(100px);

// mix 傳參
.box-style( @w ) {
    width: @w * 10;
    height: 300px;
    background: cyan;
    margin: 0 auto;
}

.box1 {
    .box-style(400px);
    background: tan;
}

.box2 {
    .box-style;
    width: 1000px;
}

混合和方法區(qū)別：
在編譯后，定義的混合還存在，變成CSS文件中的普通的樣式條
在編譯后，定義的方法在CSS文件中不存在.

如果沒有指定默認(rèn)參數(shù)，使用方法的時(shí)候，并未傳遞參數(shù)，編譯的時(shí)候，會(huì)報(bào)錯(cuò)。

定義：.className( @w: 100px ) { width: @w; }

.box-style( @w: 100px ) {
    width: @w * 10;
    height: 300px;
    background: cyan;
    margin: 0 auto;
}

表示方法中的所有參數(shù)。實(shí)現(xiàn)對(duì)所有變量的引用

.box-border ( @w: 1px, @s: solid, @c: #ccc) {
    border: @arguments;
}

.box {
    margin-bottom: 10px;
    .box-border(1px, solid, cyan);
}
.box1 {
    .box-border();
}

提升權(quán)重
在less中important 不僅僅可以對(duì)單個(gè)css屬性添加，還可以對(duì)方法添加，實(shí)現(xiàn)對(duì)繼承多個(gè)屬性的important屬性提升權(quán)重。

.box {
    .box-style(100px) !improtant;
    color: #ccc !improtant;
}

通過用when() 方法來判斷條件。（注意：不需要添加單位）.
類似switch條件判斷

.size ( @w, @h ) when ( @w > 200 ) {
    width: @w;
    height: @h;
}

.size (@w, @h ) when ( @w = 200 ) {
    width: @w;
    height: @h;    
}

.size ( @w, @h ) when ( @w < 200 ) {
    width: @w;
    height: @h;
}

使用關(guān)鍵字 and 和 not
多個(gè)條件 and, 配合when 關(guān)鍵字 使用 : when () and ()
否定判斷條件 not, 配合 when 關(guān)鍵字 使用 ： when not()

// 判斷在 300 - 500 范圍之間
.size ( @w, @h ) when ( @w > 300 ) and ( @w < 500 ) {
    width: @w;
    height: @h;
}  

// 判斷不小于200
.size( @w, @h ) when not( @w < 200 ) {
    width: @w;
    height: @h; 
}
   

floor(): 向下取整
ceil() ： 向上取整
round() : 四舍五入
percentage(); 將數(shù)值轉(zhuǎn)化為百分?jǐn)?shù)，(一般參數(shù)中不需要帶%單位)
min(); 參數(shù)中的最小值，單位值需要統(tǒng)一，如果參數(shù)存在單位不同，會(huì)報(bào)錯(cuò)。如果參數(shù)中沒有帶單位，編譯后的值也是沒有單位。
max(); 參數(shù)中最大值。單位值需要統(tǒng)一，如果參數(shù)存在單位不同，會(huì)報(bào)錯(cuò)。如果參數(shù)中沒有帶單位，編譯后的值也是沒有單位。

div {
    width: ceil(100.1px);
    height: floor(100.8px);
    margin-top: round(20.5em);
}

p {
    width: percentage(1);
}

h1 {
    width: max(200, 100px, 300, 230px);
    height: min(30px, 31px, 20px);
    background: tan;
}

rgb()
rgb(red, green, blue);
把原始的rgb值轉(zhuǎn)成16進(jìn)制色值.(注意不可使用變量)

background: rgb(100, 12, 109); // 編譯后：background: #640c6d;

// 編譯報(bào)錯(cuò)
@color: "100";
div {
    background: rgb(@color, @color, @color);  
}

rgba()
rgba(red, green, blue ,alpha);
編譯后按照原來的rgba();的格式顯示在CSS中

background: rgba(100, 12, 109, .3); // 編譯后： background: rgba(100, 12, 109, 0.3);

hsl()
hsl(h, s, l);
表示色相，飽和度，亮度模式.
h: 某一色值(0-360)
s：色彩飽和度, 單位百分?jǐn)?shù)。
l: 亮度，單位百分?jǐn)?shù)。0%表示黑色，100%表示白色.
編譯成CSS之后是16進(jìn)制數(shù)值

background: hsl(200, 30%, 10%); // 編譯后： background: #121c21;

red() 獲取定義色值中的紅色通道
green(); 獲取定義色值的綠色通道
blue(); 獲取定義色值的藍(lán)色通道。
alpha(); 獲取定義的rgba();的alpha();透明度通道

background: rgb(red(@color), red(@color), red(@color)); 
background: rgb(green(@color), green(@color), green(@color));
background: rgb(blue(@color), blue(@color), blue(@color));
background: rgba(red(@color), green(@alphaColor), blue(@color), alpha(@alphaColor));

hue(); 獲取色彩中的色值，結(jié)果是一個(gè)數(shù)字
saturation(); 獲取色彩中的飽和度，結(jié)果是一個(gè)百分?jǐn)?shù)
lightness(); 獲取色彩中的亮度，結(jié)果百分?jǐn)?shù)

@color: #00BCD4;

background: rgb(hue(@color), hue(@color), hue(@color)); // background: #bbbbbb;
margin: hue(@color); // margin: 186.79245283;
width: saturation(@color); // width: 100%;
height: lightness(@color);  // height: 41.56862745%;  

fade(); 對(duì)色彩做透明度處理
fade(color, alpha);

background: fade(@color, 10%); 

fadeIn(); 對(duì)色彩透明度增加，當(dāng)?shù)谝粋€(gè)參數(shù)不透明的顏色，得到的結(jié)果是一個(gè)16進(jìn)制不透明顏色。（增加到最大值100%了）

background: fadeIn(@color, 10%); 

fadeOut(); 對(duì)色彩透明減少

background: fadeOut(@color, 90%);

greyscale(); 得到是一個(gè)混色灰度色值

 background: greyscale(@color);    
 

mix(); 將兩種顏色混合，默認(rèn)情況下，是取兩種顏色的十六進(jìn)制轉(zhuǎn)為十進(jìn)制相加后的平均值。第三個(gè)參數(shù)表示去的數(shù)值，是個(gè)百分?jǐn)?shù)，表示色彩混合的一個(gè)權(quán)重。

background: mix(@color, @color2);
background: mix(@color, @color2, 30%); 

saturate(); 增加飽和度
參數(shù)1：顏色。
參數(shù)2：飽和度的增加量

background: saturate(@color2, 30%);

desaturate(); 減少飽和度

background: desaturate(@color2, 30%);

lighten(); 提高色彩亮度
參數(shù)1：顏色
參數(shù)2：提高的亮度值

background: lighten(@color2, 50%);

darken(); 降低顏色亮度

background: darken(@color2, 50%);

只能處理色彩，不能處理圖片
softlight(); 柔光處理
參數(shù)1： 底色
參數(shù)2：添加色
hardlight(); 強(qiáng)光處理
參數(shù)1： 底色
參數(shù)2：添加色

background: softlight(@color, @color2); 
background: hardlight(@color, @color2); 

escape(); 將字符串做url轉(zhuǎn)碼
參數(shù)：需要轉(zhuǎn)碼的字符串

e(); 不對(duì)字符串做編譯

background: e("rgba(10, 200, 210, .3)");

replace(); 替換字符串的子字符串
參數(shù)1：源字符串
參數(shù)2：被替換的字符串
參數(shù)3：替換的字符串

div {
    content: relace("this color is tan", "tan", "cyan");
}

& : 當(dāng)前所在的class
引用混合時(shí)，要將屬性賦值給誰就放在誰的里面

.box1 {
    .bg {
        background: tan;
    }
}
.box2 {
    .header {
        .box1 .bg;
   }
}

在Less中，作用域是塊級(jí)作用域，定義在塊內(nèi)部的變量，在外界訪問不到。
訪問變量的順序，就近原則。
對(duì)于函數(shù)，它的存在依賴塊級(jí)作用域，定義在塊內(nèi)部的函數(shù)，在外界訪問不到，但是可以使用命名空間使用它。
對(duì)于變量，它存在依賴塊級(jí)作用域，定義在塊內(nèi)部的變量，外界訪問不到，不能通過命名空間訪問，是一種私有變量。

@w: 100px;

.box1 {
    .sayW(){
        @w: 300px;
    }    
    width: @w;
    .sayW();
}

.box1{
    p {
        width: @w;
    }
}

.box2 {
    width: @w;
}

如果函數(shù)在塊中執(zhí)行后，函數(shù)作用域會(huì)擴(kuò)展帶過去。也就是變量在定義的塊中可以訪問。

@w: 100px;

.box1 {
    .sayW(){
        @w: 300px;
    }    
    width: @w;
    .sayW();
}

.box1{
    p {
        width: @w;
    }
}

.box2 {
    .box1 .sayW(); // 函數(shù)通過命名空間執(zhí)行
    width: @w; // @w: 300px;
}

語法：@import url;
通過@import導(dǎo)入一個(gè)文件內(nèi)容，Less文件中，可以使用導(dǎo)入文件中的變量，混合，方法。編譯后，被導(dǎo)入的文件中的內(nèi)容會(huì)保留下來。(導(dǎo)入的文件也會(huì)被編譯)

@import "base/var.less";

語法：@{key}
作用：將變量插入一個(gè)字符串中(注意：key前面沒有@符號(hào)，@符號(hào)放在{}外面)

div {
    content: "@{content}下雨了，下雨天";
}

@dir: top;

div {
    bottom-@{dir}: 1px solid cyan;
}

在Less的字符串中，使用JavaScript表達(dá)式；
content: `["h", "e", "l", "l"].join("")`;
需要在``中編寫JavaScript表達(dá)式.

div {
    content: `["h", "e", "l", "l", "o"].join("")`;
}

根據(jù)項(xiàng)目需求使用Less目錄的結(jié)構(gòu)

app.less 入口文件
variables.less 全局變量 
mixins.less 全局混淆
init.less 初始化頁(yè)面
mixins.less 全局混淆
scaffoldings.less 布局
form.less 表單組件
utils.less 工具類
buttons.less 按鈕組件
nav.less 導(dǎo)航組件
list.less 列表組件
footer.less 底部導(dǎo)航