less學習筆記

less要點：變量，混合，嵌套，函數&運算，擴展

一，變量

（1）less經過@來定義變量；如：@color:#333;
（2）不只能夠用變量來管理屬性值，也能夠用在選擇器名稱，屬性名，URL以及@import語句中；
例一：選擇器變量
less:

//定義一個選擇器變量； 
@mySelector:banner;
//應用
.@{mySelector}{
    width:100px;
    height:100px;
}

編譯後的css:

.banner{
    width:100px;
    height:100px;
}

例二：URL變量

@img:'../img';
//應用
.widget{
    width:100px;
    height:100px;
    background:url('@{img}/widget.png') no-repeat;
}

例三：屬性變量

@property:color;
//應用
.widget{
   width:100px;
   height:100px;
   @{property}:#eee;
}

二，混合（Mixin）

相似於函數。混合能夠將一個定義好的class A輕鬆的引入到另外一個class B中，從而簡單實現class B繼承 class A中的全部屬性。咱們還能夠帶參數地調用，就像使用函數同樣。
例一：無參

//定義一個color類
.color{
   color:#eee;
   background-color:#f00;
}
//應用
.widget{
   width:100px;
   height:100px;
   .color;
}

例二：有參

//定義一個color類
.color (@color:#eee){
    color:@color;
    background-color:#f00;
}
//應用
.widget{
    width:100px;
    height:100px;
    .color();//不傳參時，即用默認的參數；
    .color(#0f0);//傳入參數的狀況
}

有些時候看到以下的用法：

.color () {
    color:#eee;
}

當你但願.color()不出如今css裏，且又能引入其它類時，就能夠這樣寫。
例三：
在媒體查詢裏的嵌套寫法稍有區別，以下所示；

三，匹配模式

匹配模式的寫法相似於混合。它的做用相似於if語句。

.mixin(dark,@color) {
  color: darken(@color, 15%);
}
.mixin(light,@color) {
  color: lighten(@color, 15%);
}
//下面代碼的做用是，無論匹配上面哪一種模式，下面樣式都會加進去。注意：第一個參數必定是@_，後面的每一個參數都要加上
.mixin(@_,@color) {
width:100px;
height:100px;
}
.line {
  .mixin(dark,#FF0000);
}

編譯後：

.line {
    color: #b30000;
    width: 100px;
    height: 100px;
}

四，嵌套

（1）在一個選擇器中嵌套另外一個選擇器來實現繼承；（&表示當前選擇器的父選擇器）
（2）媒體查詢和嵌套媒體查詢
less:

#header{
    background-color:#eee;
    overflow:hidden;
    .logo{
        float:left;
        width:50px;
        height:30px;
        a{
            display:block;
        }
    }
}

編譯後：

#header{
    background-color:#eee;
    overflow:hidden;
}
#header .logo{
        float:left;
        width:50px;
        height:30px;
}
#header .logo a{
    display:block;
}

五，函數&運算

任何數值，顏色和變量均可以進行運算；less能夠進行加、減、乘、除的運算；less提供了內置的函數，如Color函數，Math函數；

@width:50px;
#header{
width:@width + 50;
}

六，命名空間和訪問器

有時候，出於組織的目的，或者爲了提供一些封裝，你會但願將你的mixins 組合在一塊兒。以便稍候複用或者分發。
命名空間至關於一個混合的集合；能夠在須要的地方引用單獨的樣式。

#bundle{
    .button{
        display:block;
    }
    .tab{……}
    .citation{……}
}

如今若是咱們想在#header a中混合.button類，那麼能夠這樣寫：

#header a{
    #bundle > .button
}

須要注意的是命名空間內聲明的變量將只做用於該命名空間，你會用它來引用一個mixin (#Namespace > .mixin-name)。但你不能這麼作： (#Namespace > @this-will-not-work)。

七，做用域

less 中的做用域與編程語言中的做用域概念很是類似。首先會在局部查找變量和混合，若是沒找到，編譯器就會在父做用域中查找，依次類推。

八，註釋

/*塊註釋*/
//行註釋（不會輸出到編譯後的css文件中）

九，擴展

extend是一個less僞類，它會合並它所在的選擇其和它所匹配的引用。
less:

nav ul{
    &:extend(.inline);
    background:blue;
}
.inline{
    color:red;
}

編譯後：

nav ul{
    background:blue;
}
.inline,nav ul{
    color:red;
}

十，arguments變量

arguments變量包含了所有的傳進來的參數。若是不想一個參數一個參數的寫，那麼能夠用arguments參數。
less:

.border(@w:10px,@c:red,@xx:solid) {
    border:@arguments;
}
div{
    .border(20px);
}

編譯後：

div{
    border:20px red solid;
}

十一，避免編譯

有時候咱們須要輸出一些不正確的css語法或less不認識的專有語法。要輸出這樣的值咱們能夠在字符串前加上‘~’
例：

div{
    width:~' calc(100% - 35)';
}

十二，！important關鍵字

相似於css ！important關鍵字。