Less語法整理

一.變量

基本使用

Less:

.@{selector} {
    width: 100px;
    height: 100px;
    @{property}: #000;
    background: url("@{bgImg}/test.png");

    &:after {
        display: block;
        content: @@var;
    }
}
@selector: box;
@bgImg: "../img";
@property: color;
@name: "你好啊";
@var: "name";

生成CSS:

.box {
    width: 100px;
    height: 100px;
    color: #000;
    background: url("../img/test.png");
}

.box:after {
    display: block;
    content: "你好啊";
}

字符串插值

@base-url: "http://abc.com";
background-image: url("@{base-url}/images/bg.png");

選擇器插值

//Less
@name: blocked;
.@{name} {
    color: black;
}

//輸出css
.blocked {
    color: black;
}

二.運算

任何數字、顏色或者變量都可以參與運算

@base: 5%;
@filler: @base * 2;
@other: @base + @filler;

color: #888 / 4;
background-color: @base-color + #111;
height: 100% / 2 + @filler;

LESS 的運算已經超出了我們的期望，它能夠分辨出顏色和單位,括號也同樣允許使用,並且可以在復合屬性中進行運算:

@var: 1px + 5;
width: (@var + 5) * 2;
border: (@width * 2) solid black;

三.Mixin混合

基本使用和extend

Less:

/*不加括號顯示樣式,生成並集選擇器組合*/
.public {
  width: 100px;
  height: 100px;
}
.public() {
  /*加括號隱藏樣式,生成在調用者里,代碼重復*/
  width: 100px;
  height: 100px;
}
nav:extend(.public) {
  background-color: #f00;
}
div {
  &:extend(.public);
  background-color: #00f;
}
footer {
  .public;
  background-color: #cccccc;
}

生成CSS:

/*不加括號顯示樣式,生成並集選擇器組合*/
.public,
nav,
div {
  width: 100px;
  height: 100px;
}
nav {
  background-color: #f00;
}
div {
  background-color: #00f;
}
footer {
  /*隱藏樣式,生成在調用者里,代碼重復*/
  width: 100px;
  height: 100px;
  background-color: #cccccc;
}

模式匹配

Less:

.mixin (dark, @color) {
  background-color: darken(@color, 10%);
}
.mixin (light, @color) {
  background-color: lighten(@color, 10%);
}
.mixin (show) {
  display: block;
}
.mixin (hide) {
  display: none;
}

div {
  width: 100px;
  height: 100px;
  .mixin(show);
  //.mixin(hide);
  .mixin(dark,red)
}

生成CSS:

div {
  width: 100px;
  height: 100px;
  display: block;
  background-color: #cc0000;
}

命名空間

Less:

/*加括號隱藏了樣式 .div命名空間*/
.div() {
  width: 200px;
  height: 200px;
  background-color: #000;

  div {
    width: 50px;
    height: 50px;
    background-color: #f00;
  }
  .color {
    color: skyblue;
  }
  &:hover{
    background-color: lighten(rgb(0, 0, 0), 20%);
  }
}
/*這樣使用*/
nav {
  .div;
}
nav p {
  .div > .color;
}

生成CSS:

nav {
  width: 200px;
  height: 200px;
  background-color: #000;
}
nav div {
  width: 50px;
  height: 50px;
  background-color: #f00;
}
nav .color {
  color: skyblue;
}
nav:hover {
  background-color: #333333;
}
nav p {
  color: skyblue;
}

作用域

(類似於JS作用域鏈,一層一層網上找,找到為止)
Less:

@color: #ccc;
.box {
  @color: #eee;
  .gray {
    color: @color;
  }
}
.box2 {
  .gray {
    color: @color;
  }
}

生成CSS:

.box .gray {
  color: #eeeeee;
}
.box2 .gray {
  color: #cccccc;
}

!important

Less:

.box() {
  @color: #eee;
  background-color: #f00;
  width: 100px;
  height: 200px;
  .gray() {
    color: @color;
  }
}
nav {
  /*可以使繼承到的混合集所有屬性都添加!important*/
  .box !important;
  .box > .gray;
}

生成CSS:

nav {
  /*可以使繼承到的混合集所有屬性都添加!important*/
  background-color: #f00 !important;
  width: 100px !important;
  height: 200px !important;
  color: #eeeeee;
}

Parametric Mixins(參數混合)

Less:

/*可以設定參數,也可以同時設置默認值*/
.transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
  -webkit-transition: @property @duration @function @delay;
  -moz-transition: @property @duration @function @delay;
  -ms-transition: @property @duration @function @delay;
  -o-transition: @property @duration @function @delay;
  transition: @property @duration @function @delay;
}
/*等同於上式,Less中也有arguments*/
.transition(@property:all;@duration:1s;@function:linear;@delay:0s;) {
  -webkit-transition: @arguments;
  -moz-transition: @arguments;
  -ms-transition: @arguments;
  -o-transition: @arguments;
  transition: @arguments;
}
div1 {
  .transition;
}
div2 {
  .transition(@duration: 2s);
}
div3 {
  .transition(@duration: 3s;@property: width;)
}

生成CSS:

div1 {
  -webkit-transition: all 1s linear 0s;
  -moz-transition: all 1s linear 0s;
  -ms-transition: all 1s linear 0s;
  -o-transition: all 1s linear 0s;
  transition: all 1s linear 0s;
}
div2 {
  -webkit-transition: all 2s linear 0s;
  -moz-transition: all 2s linear 0s;
  -ms-transition: all 2s linear 0s;
  -o-transition: all 2s linear 0s;
  transition: all 2s linear 0s;
}
div3 {
  -webkit-transition: width 3s linear 0s;
  -moz-transition: width 3s linear 0s;
  -ms-transition: width 3s linear 0s;
  -o-transition: width 3s linear 0s;
  transition: width 3s linear 0s;
}

Less:

.test(@width:100px;@height:100px;) {
  width: @width;   //可以不需要執行體,只為了獲得返回值
  @result: (@width + @height) / 2;
}

div {
  .test;   //call the mixin
  padding: @result;  //use the return value
}

生成CSS:

div {
  width: 100px;
  padding: 100px;
}

高級參數用法與 @rest 變量

.mixin (...) {        // 接受 0-N 個參數
.mixin () {           // 不接受任何參數
.mixin (@a: 1) {      // 接受 0-1 個參數
.mixin (@a: 1, ...) { // 接受 0-N 個參數
.mixin (@a, ...) {    // 接受 1-N 個參數

//此外
.mixin (@a, @rest...) {
    // @rest 表示 @a 之后的參數
    // @arguments 表示所有參數
}

Mixin Guards(導引表達式/混合保護)

我們可以在mixin中設置條件；常用的條件運算符：>、>=、<、<=、=；我們設定的條件還可以使用IS函數：iscolor、isnumber、isstring、iskeyword、isurl、ispixel、ispercentage...

    //->LESS代碼
    .mixin (@a) when (lightness(@a) >= 50%) {
      background-color: black;
    }

    .mixin (@a) when (lightness(@a) < 50%) {
      background-color: white;
    }

    .box1{
      .mixin(#ddd);
    }

    .box2{
      .mixin(#555);
    }

    //->編譯為CSS的結果
    .box1 {
        background-color: black;
    }

    .box2 {
        background-color: white;
    }

when是在設置條件，除了像上面的寫法外，我們還可以通過when設置多個條件，而且條件中可以使用is函數

    //->LESS代碼:使用IS函數
    .mixin (@a; @b: 0) when (isnumber(@b)) { ... }
    .mixin (@a; @b: black) when (iscolor(@b)) { ... }

    //->LESS代碼:多條件，可以使用and或者逗號間隔
    .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... 
    
    //你可以使用關鍵詞 and 在 guard 中加入額外的條件:
    .mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }
    //或者，使用關鍵詞 not 否定條件：
    .mixin (@b) when not (@b > 0) { ... }

我們還可以通過與&特性結合實現'if'類型的語句

    //->LESS代碼:這里的意思是如果為true,.box的文字顏色才是白色
    @my-option: true;
    & when (@my-option = true) {
      .box {
        color: white;
      }
    }

四.Loops(遞歸/循環)

在Less中，混合可以調用它自身。這樣，當一個混合遞歸調用自己，再結合Guard條件表達式，就可以寫出循環結構。使用遞歸循環最常見的情況就是生成柵格系統的CSS
Less:

/*生成柵格系統*/
@media screen and (max-width: 768px){
  .generate-columns(12);
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-xs-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}
@media screen and (min-width: 768px){
  .generate-columns(12);
  .generate-columns(@n, @i: 1) when (@i <= @n) {
    .column-sm-@{i} {
      width: (@i * 100% / @n);
    }
    .generate-columns(@n, (@i+1));
  }
}

生成CSS:

@media screen and (max-width: 768px) {
  .column-xs-1 {  width: 8.33333333%;  }
  .column-xs-2 {  width: 16.66666667%;  }
  .column-xs-3 {  width: 25%;  }
  .column-xs-4 {  width: 33.33333333%;  }
  .column-xs-5 {  width: 41.66666667%;  }
  .column-xs-6 {  width: 50%;  }
  .column-xs-7 {  width: 58.33333333%;  }
  .column-xs-8 {  width: 66.66666667%;  }
  .column-xs-9 {  width: 75%;  }
  .column-xs-10 {  width: 83.33333333%;  }
  .column-xs-11 {  width: 91.66666667%;  }
  .column-xs-12 {  width: 100%;  }
}
@media screen and (min-width: 768px) {
  .column-sm-1 {  width: 8.33333333%;  }
  .column-sm-2 {  width: 16.66666667%;  }
  .column-sm-3 {  width: 25%;  }
  .column-sm-4 {  width: 33.33333333%;  }
  .column-sm-5 {  width: 41.66666667%;  }
  .column-sm-6 {  width: 50%;  }
  .column-sm-7 {  width: 58.33333333%;  }
  .column-sm-8 {  width: 66.66666667%;  }
  .column-sm-9 {  width: 75%;  }
  .column-sm-10 {  width: 83.33333333%;  }
  .column-sm-11 {  width: 91.66666667%;  }  
  .column-sm-12 {  width: 100%;  }
}

五.Merge(兼並)

+代表以逗號分隔，+_代表多個之前以空格分隔
Less:

.mixin(){
  /*內陰影*/
  box-shadow+: inset 0 0 10px #555;
}
.scale(@num){
  transform+_: scale(@num);
}
div{
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin: 100px auto;
  .mixin;
  box-shadow+: 0 0 20px black;
  transform+_: translateX(100px);
  .scale(2);
}

生成CSS:

div {
  width: 100px;
  height: 100px;
  background-color: #f00;
  margin: 100px auto;
  /*內陰影*/
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
  transform: translateX(100px) scale(2);
}

六.Parent Selectors

Less:

.box(){
  border-color: #f00;

  top {
    /*名稱寫死的后代選擇*/
    width: 10px;
  }
  &:hover {
    background-color: #00f;
  }
  &.current {
    /*選擇當前選擇器並且class為current*/
    color: red;  
  }
  &>top{
    /*名稱寫死的直接后代選擇*/
    width: 11px;
  }
  &-top {
    /*根據選擇器名稱變化的直接選中*/
    background-color: #fff;
  }
  & &-top{
    /*根據選擇器名稱變化的后代選擇*/
    width: 12px;
  }
  &>&-top{
    /*根據選擇器名稱變化的直接后代選擇*/
    width: 13px;
  }
  &,&-top{
    /*根據選擇器名稱變化的並集選擇*/
    height: 14px;
  }
  &-top+&-main{
    /*根據選擇器名稱變化的兄弟選擇*/
    height: 15px;
  }
  &+&{
    /*根據選擇器名稱變化的兄弟選擇*/
    height: 16px;
  }
}

nav {
  .box;
}

生成CSS:

nav {
  border-color: #f00;
}
nav top {
  width: 10px;
}
nav:hover {
  background-color: #00f;
}
nav.current {
  color: red;  
}
nav > top {
  width: 11px;
}
nav-top {
  background-color: #fff;
}
nav nav-top {
  width: 12px;
}
nav > nav-top {
  width: 13px;
}
nav,
nav-top {
  height: 14px;
}
nav-top + nav-main {
  height: 15px;
}
nav+nav{
  height: 16px;
}

改變選擇器順序，下面的案例中，選擇器.no-border-radius &會前置插入它的父選擇器.header .menu，最后變成.no-border-radius .header .menu形式輸出：

//->LESS代碼
.header {
  .menu {
    border-radius: 5px;
    .parent & {
      /*增加權重?*/
      background-color: #f00;
    }
  }
}

//->輸出的CSS
.header .menu {
  border-radius: 5px;
}
.parent .header .menu {
  /*增加權重?*/
  background-color: #f00;
}

七.Import Directives(導入指令)

從其他樣式表中導入樣式。

//->LESS代碼
@import "public.less";  //默認把指定文件的less也編譯
@import "header.less";  //默認把指定文件的less也編譯

@import (reference) "public.less";  //設置僅導入指定文件的less但不編譯

除了reference以外我們還可以配置一些其他的參數值:
inline：在輸出中包含源文件但不加工它
less：將文件作為Less文件對象，無論是什么文件擴展名
css：將文件作為CSS文件對象，無論是什么文件擴展名
once：只包含文件一次（默認行為） multiple：包含文件多次

八.注釋

CSS 形式的注釋在 LESS 中是依然保留的:

/* Hello, I'm a CSS-style comment */
.class { color: black }

LESS 同樣也支持雙斜線的注釋, 但是編譯成 CSS 的時候自動過濾掉:

// Hi, I'm a silent comment, I won't show up in your CSS
.class { color: white }

九.內置函數

Less函數手冊

內容來源於網絡，如有侵權請聯系客服刪除