前言

less是一種css的擴充套件語言，一般需要less.js工具將less樣式轉換成css樣式

變數可以替換多次重複出現的屬性或者屬性值，這樣在修改需求時只需要在這一處修改變數值，可以提高工作效率

1、替換多次重複出現的屬性的值

當檔案中多次重複出現n次多同一個屬性值時，可以用變數替換這個變數值，當以後需要改變屬性值時直接改變變數的值    ·

@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;

#header {
  color: @light-blue;
} 

編譯為：

#header {
  color: #6c94be;
}

2、作為選擇器

@my-selector: banner;

 
[email protected]{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

3、URL網址

當專案特別複雜時，檔案路徑也會特別複雜，假如用變數替換路徑，就可以特別方便快捷的定義檔案路i經

@images: "../img";

body {
  color: #444;
  background: url("@{images}/white-sand.png");
}
 

4、引入語句

引入語句和引入檔案類似

@themes: "../../src/themes";

@import "@{themes}/tidal-wave.less";

5、屬性

@property: color;

.widget {
  @{property}: #0ee;
  [email protected]{property}: #999;
}

.widget {
  color: #0ee;
  background-color: #999;
}

6、二次變數

@primary:  green;
@secondary: blue;

.section {
  @color: primary;

  .element {
    color: @@color;
  }
}
 

編譯為：

.section .element {
  color: green;
}

7、作為變數的屬性

.block {
  color: red; 
  .inner {
    background-color: $color; 
  }
  color: blue;  
} 

.block {
  color: red; 
  color: blue;  
} 
.block .inner {
  background-color: blue; 
}

8、變數多次定義選取規則

@var: 0;
.class {      //.class同級中定義了一次@var
  @var: 1;
  .brass {     //.brass同級中定義了兩次@var，最後取最後一個定義的變數值
    @var: 2;
    three: @var;
    @var: 3;
  }
  one: @var;
}

.class {
  one: 1;
}
.class .brass {
  three: 3;
}