簡(jiǎn)介

Less 是一個(gè)Css 預(yù)編譯器，意思指的是它可以擴(kuò)展Css語(yǔ)言。
它的功能如允許變量(variables)，混合(mixins)次屠，函數(shù)(functions) 和許多其他的技術(shù)园匹，讓Css更具維護(hù)性，主題性帅矗，擴(kuò)展性偎肃。
Less 可運(yùn)行在 Node 環(huán)境、瀏覽器環(huán)境和Rhino環(huán)境浑此，同時(shí)也有3種可選工具供你編譯文件和監(jiān)視任何改變累颂。
安裝請(qǐng)至底部查看
本文參考了 w3cschool-less

使用-語(yǔ)言特性

1. Mixins （混合函數(shù)）
   Mixin是一組CSS屬性，混合類(lèi)似于編程語(yǔ)言中的函數(shù)凛俱，允許將一個(gè)類(lèi)的屬性用于另一個(gè)類(lèi)紊馏，可以使用類(lèi)或id選擇器與CSS添加樣式的方式來(lái)聲明一個(gè)Mixin，它可以儲(chǔ)存多個(gè)屬性蒲犬，并且可以在代碼中復(fù)用朱监。
   ex：聲明一個(gè)Mixin，.sbox { color: #992e2e; }

   • 使用()不輸出Mixins：定義的時(shí)候加上括號(hào)原叮，在使用時(shí)生成后的文件中即不顯示 .sbox() { color: #992e2e; }
   • 內(nèi)部層級(jí)選擇器：在Mixin內(nèi)部可以使用選擇器 .sbox { &:hover { color: #f00; } }
   • 命名空間妙用：命名空間用于在通用名稱下對(duì)mixin進(jìn)行分組赫编。 使用命名空間可以避免名稱沖突，并從外部封裝mixin組奋隶。.sbox { .pic { xx } } .bbox { .pic { xx } }
   • !important：對(duì)所有繼承的屬性加上!important擂送，.bbox { .sbox !important; }
   • 多個(gè)混合函數(shù)合并：如果有多個(gè)同名的混合函數(shù)在同層級(jí)下，他們會(huì)合并不會(huì)覆蓋唯欣！
   • 代表所有參數(shù)的@arguments：綁定所有參數(shù)（代表了括號(hào)里所有內(nèi)容）嘹吨，.sbox( @fz, @lh, @fm ) { font: @fz / @lh @fm; } .box { .sbox( 12px,20px,"Arial" ); }
   • 代表部分參數(shù)的@rest ：綁定部分參數(shù)，.sbox( @a, @rest... ) { box-shadow: @a @rest; } .box { .sbox ( 1px, 0px, #000 );}境氢，別忘了加 ...
   • 在多個(gè)同名的混合函數(shù)中選定想要的那個(gè)（和if判斷神似）：.tbox(one) { font-size: 12px; } .tbox(two) { font-size: 14px; } .ckbox { .tbox(two); }
   • 變量與函數(shù)混用：將變量以返回值的形式輸出蟀拷，.box() { @bgcolor #000; }，可能在一些場(chǎng)合有用吧萍聊，大概问芬。。使用時(shí)注意變量的特性
   • 混合函數(shù)是可以任意嵌套的

2. 變量
   LESS允許使用 @ 符號(hào)定義變量寿桨。 變量分配使用冒號(hào)(:)完成愈诚。
   LESS中聲明變量的格式為“@變量名：變量值”。

   • 最常用的就是定義和引用
   • 選擇器：編譯時(shí)構(gòu)建的牛隅。變量名稱必須放在用@符號(hào)前綴的花括號(hào)（{}）內(nèi)： @select: h2; @{select} { color: #992e2e; } -> h2 { color: #992e2e; }
   • url：@link: "http://xxx.com; .boxs { background: ("@link/pic.jpg"); } "
   • import：@link: "http://xxx.com; @import "@link/box.less";
   • 由值組成：@col: "#992e2e"; @color: "col"; .sbox { color: @@color; }
   • 延遲加載：延遲加載中，即使它們尚未聲明酌泰，也可以使用變量（先使用媒佣，后聲明）。.sbox { color: @color; } @color: "#992e2e";

3. 操作
   加減乘除可以對(duì)數(shù)字陵刹、顏色默伍、變量任意操作，
   font-size: 24px/2*2+2-2;

4. 導(dǎo)入
   @import 可用于導(dǎo)入LESS或CSS文件的內(nèi)容，默認(rèn)是less也糊，所以less文件可以不寫(xiě)后綴炼蹦，比如 @import "less/box"，需加分號(hào)結(jié)尾狸剃，下同
   @import ( reference ) 用于導(dǎo)入內(nèi)容掐隐，但會(huì)將成品樣式排除在外（感覺(jué)很實(shí)用），注意括號(hào)內(nèi)部最好加空格進(jìn)行分隔钞馁，下同
   @import ( inline ) 將內(nèi)容復(fù)制到輸出css文件中虑省，不進(jìn)行處理，注意使用此參數(shù)時(shí)需加后綴
   @import ( optional ) 導(dǎo)入可選的文件僧凰，加了此參數(shù)后就算該文件不存在也不會(huì)報(bào)錯(cuò)
   @import ( once ) 在該文件中只導(dǎo)入一次探颈，在該文件中執(zhí)行第一次以后，還有導(dǎo)入的話训措，一概忽略
   @import ( less ) 不管后綴定義為什么伪节，都把導(dǎo)入文件以less文件處理
   @import (css) 不管后綴定義為什么，都把導(dǎo)入文件以css文件處理
   @import (multiple) 可導(dǎo)入多次

5. 父選擇器

• &代表父級(jí)元素绩鸣，它的用法很多
• 直接用 & 怀大，代表父級(jí)
• 和選擇器一起用，& + & 全闷，&:hover 叉寂，&:first-child
• 字符串拼接，&_lf 总珠， 純粹的字符串拼接
• 與產(chǎn)生列表中選擇器的所有可能性排列屏鳍，會(huì)用逗號(hào)分隔

  div,p {
    & + & {
      font-size: 12px;
    }
  }
  //生成 - >
  div + div,
  div + p,
  p + div,
  p + p {
      font-size: 12px;
  }
  

6. 注釋
   // 編譯后消失
   /**/ 編譯后保留

7. 規(guī)則集
   規(guī)則集相當(dāng)于定制作用域
   @rule: {
   //可以包含很多東西，比如變量局服，函數(shù)等
   };
   調(diào)用：

@fonts: {
  font-size: 12px;
  .sbox() { color: #992e2e; }
};
//使用時(shí)注意:  定義結(jié)尾花括號(hào)外要加分號(hào)钓瞭，使用時(shí)要加括號(hào)分號(hào)，如果要引用混合函數(shù)還需另外定義引用
.box { @fonts(); .sbox; }

8. 擴(kuò)展
   Extend是一個(gè)Less偽類(lèi)淫奔，它通過(guò)使用:extend 選擇器在一個(gè)選擇器中擴(kuò)展其他選擇器的樣式

.sbox {
    color: #992e2e;
    font-size: 12px;
}

.bbox:extend(.sbox) {
    line-height: 24px;
}
#生成
.sbox,
.bbox {
  color: #992e2e;
  font-size: 12px;
}
.bbox {
  line-height: 24px;
}

9. Mixin Guards
   用于匹配簡(jiǎn)單的值或參數(shù)數(shù)量山涡，可以使用Guards，他與mixin聲明相關(guān)聯(lián)唆迁，Guard必須括在括號(hào)里鸭丛，效果類(lèi)似于 if 效果

• 比較運(yùn)算符： = > < >= <=

  .minx1 ( @fz ) when ( @fz = 12 ) {
      font-size: 12px;
  }
  .minx2 ( @fz ) when ( @fz > 12 ) {
      font-size: 13px;
  }
  .minx3 ( @fz ) when ( @fz < 12 ) {
      font-size: 11px;
  }
  
  .boxs {
      .minx1(12);
      .minx2(14);
      .minx3(10);
  }
  //結(jié)果
  .boxs {
    font-size: 12px;
    font-size: 13px;
    font-size: 11px;
  }
  

• 邏輯運(yùn)算符，使用 and 和 not

   .minx4 ( @fz ) when ( @fz > 11 ) and ( @fz < 15 ) and not ( @fz = 13 ) {
       font-size: @fz/1px;
   }
  
   .boxs2 {
       .minx4(12);
               .minx4(13);
   }
       //結(jié)果
   .boxs2 {
       font-size: 12px;
   }
  

• 類(lèi)型檢查函數(shù) （返回值為 ture / false）
  常見(jiàn)的有：iscolor 唐责、isnumber鳞溉、isstring鼠哥、iskeyword看政、isurl
  ex: .minx5 ( @color ) when ( iscolor(@color) ) { color: @color; }
  iskeyword不知道是啥抄罕，isurl在使用的時(shí)候有url才為true: isurl(url(...));

10. loops循環(huán)，允許多次執(zhí)行一個(gè)語(yǔ)句或一組語(yǔ)句

.minx ( @num ) when ( @num > 2 ) {
    .minx( @num - 1 );
    font-size: @num * 12px;
}
.box {
    .minx(7);
}
//結(jié)果
.box {
  font-size: 36px;
  font-size: 48px;
  font-size: 60px;
  font-size: 72px;
  font-size: 84px;
}

11. 合并

• 用逗號(hào)合并相同的屬性呆贿，語(yǔ)法是在屬性名后分號(hào)前加上加號(hào)：.box { box-shadow+: 1px 1px #fff; box-shadow+: 0px 2px #000; } 結(jié)果是： .box { box-shadow: 1px 1px #fff, 0px 2px #000; }
• 用空格合并相同的屬性，語(yǔ)法是在屬性名后分號(hào)前加上加號(hào)和下劃線榨崩，.box { font+_: 12px; font+_: "Microsoft YaHei"; } 結(jié)果是： .box { font: 12px "Microsoft YaHei"; }

未完待續(xù)