條件表示式

條件表示式其實就是我們在less中使用比較運算子或者表示式的判斷來輸入我們的值，根據不同的條件來輸出不同的值。

一、帶條件的混合

比較運算子有以下幾種：

>,>=,=,=<,<,true

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

.class1{
    .mixin( #aaa );
}
.class2
 
{
    .mixin( #333 );
}

編譯後的css:

.class {
  background-color: black;
}

二、型別檢查函式
型別檢查函式也就是所得的值通過函式去判斷是那個型別的值。
如下是一些函式
Iscolor(是否為顏色值) Isnumber(是否為數字) isstring(是否為字元) iskeyword(是否為關鍵字) isurl(是否為url)

.minix( @a )when(iscolor(@a)){
    background: black;
    color:@a;
}
.minix( @a )when(isnumber(@a)
 
){
    background: white;
    number: @a;
}
.minix( @a )when(isstring(@a)){
    background: orange;
    string: @a;
}
.minix( @a )when(iskeyword(@a)){
    background: yellow;
    keyword: @a;
}
.minix( @a )when(isurl(@a)){
    background: blue;
    url:@a
}

編譯後的css:

.class1 {
  background: black;
  color
 
: #333333;
}
.class2 {
  background: white;
  number: 123;
}
.class3 {
  background: orange;
  string: "hello less!";
}
.class4 {
  background: orange;
  string: "www.baidu.com";
}

三、單位檢查函式
檢查一個值除了數字是否是一個特定的單位。

.minix( @a )when(ispixel(@a)){
    background: yellow;
    pixel: @a;
}
.minix( @a )when(ispercentage(@a)){
    background: blue;
    percentage:@a
}

.class1{
    .minix(230px);
}
.class2{
    .minix(83%);
}

編譯後的css:

.class1 {
  background: yellow;
  pixel: 230px;
}
.class2 {
  background: blue;
  percentage: 83%;
}

迴圈

在less中，混合可以呼叫它自身，這樣，當一個混合遞迴呼叫自己，再結合Guard表示式和模式匹配這兩個特性，就可以寫出個迴圈結構。

.loop( @count )when( @count > 0 ){
    [email protected]{count}{
        padding: ( 10px * @count );
    }
    .loop((@count - 1));
}

div{
    .loop(5);
}

編譯後的css:

div h5 {
  padding: 50px;
}
div h4 {
  padding: 40px;
}
div h3 {
  padding: 30px;
}
div h2 {
  padding: 20px;
}
div h1 {
  padding: 10px;
}

合併屬性

在需要合併的屬性的：前加上+就可以完成合並，合併以，分割屬性；
一、在需要合併的屬性的;（分號）的前面加上+就可以完成合並，合併以,分割屬性

.minix(){
    box-shadow+: inset 0 0 10px #555; 
}
.myclass{
    .minix;
    box-shadow+: inset 0 0 20px #222;
}

編譯後的css:

.myclass {
  box-shadow: inset 0 0 10px #555, inset 0 0 20px #222;
}

二、“+_”空格分割所合併的屬性值

.a(){
    background+_: #333; 
}
.aclass{
    .a;
    background+_: url("sss.jod");
}

編譯後的css:

.aclass {
  background: #333 url("sss.jod");
}

三、如果兩種方式混用，則根據最新的判斷以什麼方式進行分割屬性值

.b(){
    background+_: #333; 
}
.bclass{
    .a;
    background+: url("sss.jod");
}

.c(){
    background+: #333; 
}
.cclass{
    .a;
    background+_: url("sss.jod");
}

編譯後的css:

.bclass {
  background: #333, url("sss.jod");
}
.cclass {
  background: #333 url("sss.jod");
}

引入

你可以引入一個或多個less檔案，然後這個檔案中的所有變數都可以在當前的less專案中使用！
注意：引入css檔案會被原樣輸出到編譯的檔案中
一些常用的引入

@import (reference) "main.less";  //引用LESS檔案，但是不輸出
@import (inline) "main.less";  //引用LESS檔案，但是不進行操作
@import (once) "main.less";  //引用LESS檔案，但是不進行操作
@import (less) "index.css";  //無論是什麼格式的檔案，都把他作為LESS檔案操作
@import (css) "main.less";  //無論是什麼格式的檔案，都把他作為CSS檔案操作