本人作為一名今年剛畢業(yè)的應(yīng)屆生，目前的工作方向是前端開發(fā)，學(xué)習(xí)前端到現(xiàn)在差不多14個(gè)月，有9個(gè)月的工作經(jīng)驗(yàn)。
從幾個(gè)月前就有在計(jì)劃學(xué)習(xí)css預(yù)處理相關(guān)的內(nèi)容，結(jié)果被各種耽誤，最近終于可以開始學(xué)習(xí)less。
在學(xué)習(xí)使用之前我們需要先安裝less
可以通過npm進(jìn)行安裝，下載并安裝node就可以使用npm，具體的安裝過程很簡(jiǎn)單就不詳細(xì)說了
筆記參考自less官網(wǎng)，進(jìn)行個(gè)人理解的翻譯，方便自身理解，作為自身學(xué)習(xí)總結(jié)所用，之后會(huì)慢慢的加上自身練習(xí)的代碼。

變量

變量名稱定義需要@前綴

@blue: #5b83ad
@light-blue: @blue + #111;
.test{
    color: @light-blue;
}

變量實(shí)際上是“常量”，因?yàn)樗鼈冎槐欢x聲明一次

mixin(混合/混入):

mixin是將一個(gè)定義的樣式規(guī)則包含進(jìn)另外一個(gè)規(guī)則中

.background{
    background-image: url('test.png');
    background-repeat: no-repeat;
    background-size: 80% 80%;
}

如果我們需要在其他的樣式規(guī)則中使用到上述的樣式的話，可以直接在規(guī)則中引入。

#banner .img{
    width: 50px;
    height: 50px;
    .background;
}

嵌套規(guī)則:

#header{
    color: red;
    .nav{
        display: inline-block;
    }
    .logo{
        width: 30px;
        height: 30px;
    }
}

編譯為：

#header{
    color: red;
}
#header .nav{
    display: inline-block;
}
#header .logo{
    width: 30px;
    height: 30px;
}

在嵌套規(guī)則中可以使用偽選擇器(&代表當(dāng)前選擇器的父選擇器)

.list{
    color: blue;
    &:after{
        content: " ";
        display: block;
        height: 10px;
        width: 10px;
        background-color: #000;
    }
}

嵌套準(zhǔn)則和冒泡

像media和keyframe的指令可以嵌套在和選擇器一樣的地方。冒泡就是將指令放置在頂部，并且保持同一個(gè)規(guī)則集中的其他元素的相對(duì)順序不變。
條件指令，像@media,@supports,@document可以將選擇器復(fù)制進(jìn)它們的規(guī)則里面

.screen-color{
    @meida screen{
        color: green;
        @media (min-width: 768px){
            color: red;
        }
    }
    @media tv{
        color: black;
    }
}

編譯為：

@media screen{
    color: green;
}
@media screen and (min-width: 768px){
    color: red;
}
@media tv{
    color: black;
}

其余的非條件指令，如font-face或者keyframes 也會(huì)冒泡，它們的身體不變

#a{
    color: blue;
    @font-face{
        src: some-url;
    }
    padding: 2px;
}

編譯為：

#a{
    color: blue;
}
@font-face{
    src: some-url;
}
#a{
    padding: 2px;
}

運(yùn)算:

算術(shù)運(yùn)算操作符 +,-,,/ 可以對(duì)任意數(shù)字，顏色或者變量進(jìn)行運(yùn)算。
如果可能，運(yùn)算操作符會(huì)在加，減或者比較之前代入單位并且進(jìn)行轉(zhuǎn)換，結(jié)果的單位會(huì)等同于運(yùn)算式中最左邊的第一個(gè)顯式單位。
如果不能進(jìn)行轉(zhuǎn)換或者無意義時(shí)，會(huì)忽略單位。可能的轉(zhuǎn)換： px->cm,rad->%

@cvs: 5cm+10mm;//6cm
@cvs: 2-3cm-5mm;//1.5cm 待定
@cvs: 2+5px-3cm;//4px
@base: 5%;
@filler: @base  2;//10%
@other: @base + @filler;//15%
@base-color: #000;
.test{
    color: #fff / 4;
    background-color: @base-color + #654;
    width: 50% / 2 +@filler
}

乘法和除法不會(huì)對(duì)數(shù)字進(jìn)行轉(zhuǎn)換，在大部分的情況下都是無意義的，比如一個(gè)長(zhǎng)度乘上另外一個(gè)長(zhǎng)度得到面積，而css并不支持面積。less會(huì)計(jì)算數(shù)字本身，然后分配一個(gè)顯式的單位給計(jì)算結(jié)果。

@base: 2cm  3mm;// 6cm

色值會(huì)分割成red,green,blue和α維度，計(jì)算會(huì)分別作用在rgb三個(gè)量綱上。如果用戶讓兩個(gè)色值相加，green量綱的計(jì)算結(jié)果會(huì)等于兩個(gè)色值的green量綱的值的相加結(jié)果，red量綱和blue量綱也是同樣計(jì)算方式。如果用戶將一個(gè)色值和一個(gè)數(shù)字進(jìn)行相乘，每個(gè)量綱都會(huì)乘上該數(shù)字。
注：算術(shù)運(yùn)算在α上是沒有定義的，因?yàn)樯档臄?shù)學(xué)計(jì)算上是沒有約定的標(biāo)準(zhǔn)含義的，不要依賴于當(dāng)前方式，因?yàn)橛锌赡茉谙乱粋€(gè)版本就發(fā)生改變了。
色值上的計(jì)算總是得到有效的色值，如果某一個(gè)顏色量綱的計(jì)算結(jié)果超出了FF或者小于00，最后得到的結(jié)果會(huì)等于FF或者00，如果α的計(jì)算結(jié)果大于1.0或者小于0.0，最后結(jié)果會(huì)等于1.0或者0.0。

@color: #224488 / 2； //#112244
@background-color: #112244 + #111; //#223355

less可以理解色值和單位的之間區(qū)別：

@var: 1px + 5;

這個(gè)變量的最終輸出為6px

轉(zhuǎn)義（escaping）

escaping允許使用任意字符串來作為屬性或者變量的值，任何在~'anything' 或者 ~"anything" 將會(huì)被直接使用除了插值（interpolation）。

.test{
    color: ~"green";
}

編譯為：

.test{
    color: green;
}

函數(shù)

less內(nèi)置了多種函數(shù)用于轉(zhuǎn)換顏色，處理字符串，算術(shù)運(yùn)算等。函數(shù)在函數(shù)手冊(cè)中有詳細(xì)介紹。用法如下：

@base: #f500f5;
@width: 0.5;
.test{
    width: percentage(@width);//50%
    color: saturate(@base, 5%);
}

命名空間和訪問器(namespaces&accessors)

有些時(shí)候，你想要組合你的變量或者mixin，無論是出于組織目的還是只是想實(shí)現(xiàn)一些封裝，你可以很直觀的在less中實(shí)現(xiàn)。

@color: #ff4e56
#bundle{
    .button{
        display: block;
        background-color: @color;
        width: 100px;
        height: 30px;
        border-radius: 5px;
        &:hover{
            background-color: @color - #222;
        }
    }
    .tab{ ... }
    .input{ ... }
}

如果你將.button這個(gè)類加入 #header button中，可以這樣做：

#header{
    color: green;
    #bundle > .button
}

注：變量在某命名空間內(nèi)定義聲明，該變量的作用范圍僅限于該空間中，外部的空間中該變量將無法不可用。因此無法像上面的語法(#namespace > .mixin-name)那樣進(jìn)行,(#namespace > @var)是不行的

作用范圍(scope)

scope在less中與編程語言中的非常相似，變量和mixin會(huì)先在當(dāng)前規(guī)則中尋找，如果無發(fā)現(xiàn)，編譯器會(huì)當(dāng)前規(guī)則的上一級(jí)尋找，以此類推。

@var: red;
#page{
    @var:  blue;
    #nav{
        color: @var;//blue
    }
}

變量和mixin不一定要在其使用之前定義聲明，下面例子同上面例子：

@var: red;
#page{
    #nav{
        color: @var;//blue
    }
    @var: blue;
}

注釋

可以使用行注釋或者塊注釋

/
這里是注釋
/
@var: red;
//這里是注釋
@var: blue;

導(dǎo)入(importing)

可以導(dǎo)入.less的文件，所有在該.less的文件中的變量都是可用的。

@import "test.less";
@import "main.css";