Extend偽類

樣式的繼承使用

LESS:

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

    .main 
(.public) {
            list-style-type: none;
    }

CSS:

.public,
.main ul {
  width: 100px;
  height: 100px;
}
.main ul {
  list-style-type: none;
}

命名空間和作用域

指定命名空間
LESS:

.public {
    width: 50px;
    height: 50px;
 }

.box {
    width: 100px;
    height: 100px;
     .a {
        display: block;
        float: left;
        .public;
         .b {
            .public;
         }
     }
}

.hk {
    .box;
}

.hn {
    .box >.a;
}

CSS:

.public {
  width: 50px;
  height: 50px;
}
.box {
  width: 100px;
  height: 100px;
}
.box .a {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
}
.box .a .b {
  width: 50px;
  height: 50px;
}
.hk {
  width: 100px;
  height: 100px;
}
.hk .a {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
}
.hk .a .b {
  width: 50px;
  height: 50px;
}
.hn {
  display: block;
  float: left;
  width: 50px;
  height: 50px;
}
.hn .b {
  width: 50px;
  height: 50px;
}

私有作用域
LESS:

@color: #000;
.main {
    @color: #fff;
    .main-content {
        color: @color;
        width: 100px;
        height: 100px;
    }
}
.foot {
    .footer {
        color: @color;
    }
}

CSS:

.main .main-content {
  color: #fff;
  width: 100px;
  height: 100px;
}
.foot .footer {
  color: #000;
}

Parametric Mixins （帶參數(shù)的混合）

1、參數(shù)可以用分號(hào)或者逗號(hào)分割。但是推薦使用分號(hào)分割。因?yàn)槎禾?hào)符號(hào)有兩個(gè)意思：它可以解釋為mixins參數(shù)分隔符或者css列表分隔符。

使用逗號(hào)作為mixin的分隔符則無(wú)法用它創(chuàng)建逗號(hào)分割的參數(shù)列表。換句話說(shuō)，如果編譯器在mixin調(diào)用或者聲明中看到至少一個(gè)分號(hào)，它會(huì)假設(shè)參數(shù)是由分號(hào)分割的，而所有的逗號(hào)都屬于CSS列表:

兩個(gè)參數(shù)，并且每個(gè)參數(shù)都是逗號(hào)分割的列表：.name(1,2,3;something, ele)，
三個(gè)參數(shù)，并且每個(gè)參數(shù)都包含一個(gè)數(shù)字：.name(1,2,3)，
使用偽造的分號(hào)創(chuàng)建mixin，調(diào)用的時(shí)候參數(shù)包含一個(gè)逗號(hào)分割的css列表：.name(1,2,3;)，
逗號(hào)分割默認(rèn)值：.name(@param1: red, blue)。

LESS:

.mixin(@color) {
    color-1: @color;
}

.mixin(@color;@width) {
    color-2: @color;
    width-2: @width;
}

.mixin(@color;@width;@height) {
    color-3: @color;
    width-3: @width;
    height-3: @height;
}

.main {
    .mixin(#fff;5px;10px);
}

CSS:

.main {
  color-3: #fff;
  width-3: 5px;
  height-3: 10px;
}

2、Named Parameters （命名參數(shù)）

引用mixin時(shí)可以通過(guò)參數(shù)名稱而不是參數(shù)的位置來(lái)為mixin提供參數(shù)值。
LESS:

.a (@width:10px; @height:10px; @padding:2px 2px; @margin:10px;) {
    width: @width;
    height: @height;
    padding: @padding;
    margin: @margin;
}

.b {
    .a(@margin:30px;@padding:20px;)
}

CSS:

.b {
  width: 10px;
  height: 10px;
  padding: 20px;
  margin: 30px;
}

3、The @arguments variable （@arguments 變量）

@arguments在mixins內(nèi)部有特殊意義，調(diào)用mixin時(shí)，它包含所有傳入的參數(shù)。

LESS:

.border(@blur: 1px; @type:solid; @color: #000) {
  border: @arguments;
}
.a {
  .border(2px;dashed);
}

CSS:

.a {
  border: 2px dashed #000;
}

4、Pattern-matching （模式匹配）
.mixin基于@switch的值以不同的方式表現(xiàn)
LESS:

.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}

@switch: dark;
.class {
  .mixin(@switch; #888);
}

CSS:

.class {
  color: #6f6f6f;
  display: block;
}

Mixins as Functions （作為函數(shù)使用的混合）

1、從mixin中返回變量
LESS：

.mixin (){
    @width: 100px;
    @height: 100px;
}

.a {
    .mixin();
    width: @width;
    height

CSS:

.a {
  width: 100px;
  height: 300px;
}

2、定義在mixin中的mixin可以作為返回值
LESS：

.unlock(@value) { 
  .doSomething() { 
    declaration: @value;
  }
}
#namespace {
  .unlock(5); 
  .doSomething(); 
}

CSS：

#namespace {
  declaration: 5;
}

Passing Rulesets to Mixins （傳遞規(guī)則集給混合）

1、分離（detached）規(guī)則集合是一組CSS屬性，嵌套的規(guī)則集合，媒體聲明或是存儲(chǔ)在一個(gè)變量中的任何其他東西。可以將其包含到一個(gè)規(guī)則集合或其他結(jié)構(gòu)中，它的所有屬性將被復(fù)制在那里。也可以將它作為一個(gè)mixin參數(shù)，并傳遞它周圍的其他任何變量。
LESS:

// 聲明 detached 規(guī)則集合
@detached-ruleset: { 
    background: red; 
    width: 100px;
    height: 100px;
};

// 使用 detached 規(guī)則集合
.top {
    @detached-ruleset(); 
}

CSS:

.top {
  background: red;
  width: 100px;
  height: 100px;
}

2、定義一個(gè)mixin將一個(gè)媒體查詢中的一個(gè)代碼塊或者一個(gè)瀏覽器不支持的類名抽象出來(lái)時(shí)很有用。規(guī)則集合可以傳遞規(guī)則集給mixin，所以該mixin會(huì)包裝這些內(nèi)容。
LESS:

.a(@rules) {
  @media screen and (min-width: 1200) { 
    @rules(); 
  }
  .b & { 
    @rules(); 
  }
}

header {
  background-color: blue;
  .a({
    background-color: red;
  });
}

CSS:

header {
  background-color: blue;
}
@media screen and (min-width: 1200) {
  header {
    background-color: red;
  }
}
.b header {
  background-color: red;
}

3、一個(gè)規(guī)則集合現(xiàn)在可以分配給一個(gè)變量或傳遞給一個(gè)mixin，并且可以包含全部的less特性。
LESS:

@public: {
    .a {
        width: 100px;
      height: 100px;
    }
    .a {
        background-color: #000;
    }
};

@media (orientation:portrait) {
    @public();
}

CSS:

@media (orientation: portrait) {
  .a {
    width: 100px;
    height: 100px;
  }
  .a {
    background-color: #000;
  }
}

4、
LESS:

.public(@rules) {
    .a { @rules(); }
    .b{ @rules(); }
}
header {
  background-color: blue;
  .public ({
    background-color: red;
  });
}

CSS:

header {
  background-color: blue;
}
header .a {
  background-color: red;
}
header .b {
  background-color: red;
}

5、分離規(guī)則集合可以解鎖（返回）所有它的mixins給調(diào)用者，可以以同樣的方式調(diào)用mixin。但是，它不會(huì)返回變量。
LESS：

// 帶有mixin的分離規(guī)則集合
@detached-ruleset: { 
    .mixin() {
        color:blue;
    }
};
// 調(diào)用分離規(guī)則集合
.caller {
    @detached-ruleset(); 
    .mixin();
}

CSS：

.caller {
  color: blue;
}

Mixin Guards（帶條件的Mixin）

LESS:

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}
.main {
    .mixin(#333)
}
.foot {
    .mixin(#f9f9f9)
}

CSS:

.main {
 background-color: white;
 color: #333;
}
.foot {
 background-color: black;
 color: #f9f9f9;
}