Less 總結——快速入門

來自Less官網學習總結https://less.bootcss.com/

Less變量

@開頭，顏色之間可計算加減,@變量名使用；用於"選擇器名","屬性名"，"url","import語句","變量的變量",用@{變量名}使用,變量申明可提高。

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
#header {
  color: @light-blue;
}

//顏色算法
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

//變量的變量
@primary:  green;
@secondary: blue;

.section {
  @color: primary;

  .element {
    color: @@color;//變量的變量 等於 @primary 即 green
  }
}

//屬性名的變量使用
@property: color;
.widget {
  @{property}: #0ee;
  background-@{property}: #999;//background-color:#999;
}

//url的使用方法和import的使用方法
@images:'../img';
background: url("@{images}/white-sand.png");
@themes: "../../src/themes";
@import "@{themes}/tidal-wave.less";

3.0新增 $屬性名做爲變量使用，可繼承父級的屬性，例如$color,$font-size;

父級選擇器的使用

&,指代 全部父級選擇器的字符串，可用於拼接僞類選擇器，帶有父級選擇修飾的子集選擇器,且可屢次使用。用於 子級選擇器後面可調換子父級順序。當父級元素爲並列多個時，可造成不一樣的組合。

一、用於拼接造成選擇器名稱

//一、用於拼接造成選擇器名稱
div{
    a {
      color: blue;
      &:hover {//拼接僞類選擇器 div a:hover
        color: green;
      }
      & + &{//div a + div a
      }
    }
}

.button {
  & + &{//.button + .button
  }
  &-ok {//.button-ok
    background-image: url("ok.png");
  }
  &-cancel {//.button-cancel 
    background-image: url("cancel.png");
  }

  &-cancel  {//.button-cancel 
    background-image: url("custom.png");
  }
}

二、調換選擇器順序

div{
    color:black;
    p &{
        color:red;
    }
}
//編譯後
div{color:black;}
p div{
    color:red;
}

三、多個並列父級造成不一樣組合

p,a{
color:black;
    & + &{
        color:red;
    }
}
//編譯後
p,a{color:black;}
p+a{color:red;}
p+p{color:red;}
a+a{color:red;}
a+p{color:red;}

Less擴展extend

擴展Less,語法：選擇器a:extend(選擇器b [all],選擇器c...)，選擇器a可擴展選擇器b,選擇器c（b,c可爲嵌套選擇器）的屬性樣式。擴展語句必須在選擇器的最後面（包括僞類的後面），可疊加屢次，選擇器與擴展語句間可有空格。

.a:extend(.b) {}
等價於：
.a {
  &:extend(.b);//內部擴展
}
.c:extend(.d all) {
  // 擴展全部包含.d的屬性：".x.d" or ".d.x"
}
.c:extend(.d) {
  // 只擴展編譯後爲.d的屬性
}
.e:extend(.f, .g) {}//擴展多個屬性

擴展選擇器的匹配規則：
一、除引號以外的全部不一樣的表現形式都不會被匹配到，必須一摸同樣,eg:nth 表達式,僞類的順序，*.class，嵌套選擇器，雖然包含選擇器且意義同樣，也不會被匹配到；
二、只有選擇器後面加上了 aLL字段纔會被匹配到。如上所示；
三、當b,c選擇器爲變量時，不會被匹配到，可是a選擇器爲變量時，可生效；
四、@media內部的選擇器只會匹配相同media類型內的選擇器，且不匹配嵌套media內部的屬性。
五、在外層的選擇器擴展可擴展全部符合的選擇器屬性，包括不一樣media內部的全部屬性

@media screen {
  .selector {  /* ruleset inside nested media - top level extend works */
    color: blue;
  }
  @media (min-width: 1023px) {
    .selector {  /* ruleset inside nested media - top level extend works */
      color: blue;
    }
  }
}

.topLevel:extend(.selector) {} /* top level extend matches everything */

合併 merge

使用「+」，「+_」，合併同一個css樣式的屬性，前者用逗號隔開，後者用空格隔開。

.mixin() {
  box-shadow+: inset 0 0 10px #555;
}
.myclass {
  .mixin();
  box-shadow+: 0 0 20px black;
}
//結果
.myclass {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

.mixin() {
  transform+_: scale(2);
}

.myclass {
  .mixin();
  transform+_: rotate(15deg);
}

//結果
.myclass {
  transform: scale(2) rotate(15deg);
}

混合模式Mixins

一、類選擇器和ID選擇器均可以混入，（）是可選的；
二、不輸出Mixin，須要在Mixin後面添加（）；
三、Mixin不只能夠包含屬性，還能包含選擇器；
四、命名空間：嵌套Mixin,用於區分不一樣的庫，解決與其餘庫衝突問題，「>」「 」；
五、Guarded Namespaces 條件命名空間，知足條件時才匹配上，default()匹配全部條件。
六、在Mixins調用的後面加上！important,Mixins內部的全部屬性都會繼承；
七、可傳參數，參數可有默認值 argu:defaultValuee;
八、多參數Mixins，參數用分號或逗號分開，推薦分號分隔，css屬性列表用逗號分割，若是參數列表中有一個分號則默認爲分號分隔；可設置多個名稱相同的多參數Mixins,會自動選擇其中強制參數符合的Mixins.調用時，不須要按照參數順序。@arguments調用時傳入的全部參數，「...」 表明可變個數（0-N）的參數，「@rest」表示指定參數以外的剩餘全部參數。
九、模式匹配：根據傳參，生成不一樣的css屬性，「@_」可匹配全部值；變量能夠匹配任意值，可根據個數來匹配。
十、Mixins中定的變量和Mixins至關於Mixins的return值。父層繼承的變量會被覆蓋，當前調用做用域的變量不會被覆蓋。（至關於一個函數）；
十一、遞歸Mixins ,在自身內部調用本身，與模式匹配和條件表達式一塊兒用。
十二、Mixin Guards——關鍵字When,來實現有條件的執行,依據@media執行規範。例子參照5。比較運算符：>, >=, =, =<, <，true是惟一得「真」值。參數之間也能夠進行比較。邏輯運算符：'and' ,','(至關於or),'not'。類型校驗函數：iscolor，isnumber，isstring，iskeyword，isurl。是否包含單位函數：ispixel，ispercentage，isem，isunit。

.my-hover-mixin() {
  &:hover {//包含選擇器
    border: 1px solid red;
  }
}
button {
  .my-hover-mixin();
}

//輸出
//帶有括號，不輸出.my-hover-mixin
button:hover {
  border: 1px solid red;
}
//四、5************命名空間
#outer {
  .inner {//嵌套在outer id裏面
    color: red;
  }
}
.c {
  #outer > .inner;
//如下用法效果同樣
//#outer > .inner;
//#outer > .inner();
//#outer .inner;
//#outer .inner();
//#outer.inner;
//#outer.inner();
}

//5*******************Guarded Namespaces
#namespace when (@mode=huge) {//@mode=huge 換成default()則可匹配全部條件
  .mixin() { /* */ }
}

#namespace {
  .mixin() when (@mode=huge) { /* */ }
}
//7****************傳參
.border-radius(@radius：5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}//.border-radius(4px);.border-radius，默認5px

//8**********多參數Mixins
.mixin(@color: black; @margin: 10px; @padding: 20px) {
  color: @color;
  margin: @margin;
  padding: @padding;
}
.class1 {
  .mixin(@margin: 20px; @color: #33acfe);
}
.class2 {
  .mixin(#efca44; @padding: 40px);
}
//9**************模式匹配
.mixin(dark; @color) {
  color: darken(@color, 10%);
}
.mixin(light; @color) {
  color: lighten(@color, 10%);
}
.mixin(@_; @color) {
  display: block;
}
//引用
@switch: light;
.class {
  .mixin(@switch; #888);
}
.mixin(@a) {
  color: @a;
}
.mixin(@a; @b) {
  color: fade(@a; @b);
}

//10**************返回變量和Mixins
.mixin() {
  @size: in-mixin;
  @definedOnlyInMixin: in-mixin;
}

.class {
  margin: @size @definedOnlyInMixin;
  .mixin();
}

@size: globaly-defined-value; //被棄用了 最後額結果margin: in-mixin in-mixin;

.unlock(@value) { // outer mixin
  .doSomething() { // nested mixin
    declaration: @value;
  }
}

#namespace {
  .unlock(5); // unlock doSomething mixin
  .doSomething(); //nested mixin was copied here and is usable
}

//11*******************遞歸Mixins
.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}
//12*****************Mixin Guards
.truth (@a) when (@a) { ... }
.truth (@a) when (@a = true) { ... }
.class {
  .truth(40); //不匹配以上得兩個，只有.truth(true)纔會匹配上
}
& when (@my-option = true) {//&可達到if條件句功能。
  button {
    color: white;
  }
  a {
    color: blue;
  }
}

Detached Rulesets 分離規則集

定義：
定義一個變量，內部包含，css屬性集，嵌套樣式，media定義樣式集。 不返回變量。可做爲混合模式得參數傳遞進去。規則集中的media定義能夠引用對象得media定義合併（and），遵循 media query bubbling；
做用域：
一、可利用定義做用域和引用做用域得變量，定義做用域變量優先。
二、複製和引用（@detached-2: @detached-1; ）規則集不能改變定義做用域。
三、unlocked 規則集可改變過用於

// 定義規則集
@detached-ruleset: { background: red; };

// 引用規則及
.top {
    @detached-ruleset(); 
}

//混合模式得規則集利用
.desktop-and-old-ie(@rules) {
  @media screen and (min-width: 1200px) { @rules(); }
  html.lt-ie9 &                         { @rules(); }
}
header {
  background-color: blue;

  .desktop-and-old-ie({//參數爲一個屬性的對象，@rules即爲規則集。
    background-color: red;
  });
}

//unlocked detached ruleset CAN see this variable
#space {
  .importer-1() {
    @detached: { scope-detached: @variable; }; // define detached ruleset
  }
}

.importer-2() {
  @variable: value; // unlocked detached ruleset CAN see this variable
  #space > .importer-1(); // unlock/import detached ruleset
}

.use-place {
  .importer-2(); // unlock/import detached ruleset second time
   @detached();
}

Import選項

可隨處引用，Syntax: @import (keyword) "filename";keyword之間用逗號分隔；
keyword:
reference: 引用Less文件，引用了其中得Mixins或者extend得選擇器纔會被輸出。extend:在import得地方輸出，mixin在引用的地方輸出；
inline:直接在編譯後得文件中import文件，不進行處理。
less: 將文件看成less文件處理，無論後綴是什麼
css: 將文件看成css文件處理，無論後綴是什麼
once: 至引入一次樣式文件
multiple: 可屢次引入樣式文件
optional: 可選的樣式文件，若是沒找到該文件，繼續編譯

插件（V2.5）

用法：@plugin "my-plugin";定義一個插件JS文件，返回一個Less節點。可定義不一樣文件得重名得函數，在插件引用做用域中用。return false可調用該函數但不返回任意值。3.0版本以後，函數可返回任意類型。

//新建一個簡單得插件以下：
registerPlugin({
    install: function(less, pluginManager, functions) {
        functions.add('pi', function() {
            return Math.PI;
        });
    }
})
module.exports = {//nodej其餘commonJS其餘語法不支持，如require()
    install: function(less, pluginManager, functions) {
        functions.add('pi', function() {
            return Math.PI;
        });
    }
};