Less(v3.9.0)使用詳解—變數

白夜追胸發表於2019-04-27
原文網址 : https://juejin.im/post/5cc4080c6fb9a0320f7dedca
變數

該系列：

Less(v3.9.0)使用詳解——基本使用

Less(v3.9.0)使用詳解——變數

Less(v3.9.0)使用詳解——巢狀和父選擇器&

Less(v3.9.0)使用詳解——extend(巢狀)

其他待更新...

翻譯自less官方文件lesscss.org/features/#v…

變數

@width: 10px;
@height: @width + 10px;

#header {
  width: @width;
  height: @height;
}
複製程式碼

編譯為

#header {
  width: 10px;
  height: 20px;
}
複製程式碼

變數還可以用在其他地方，比如選擇器名稱，屬性名稱，urls地址，@import匯入語句

// Variables
@my-selector: banner;
@images: "../img";
@property: font-weight;

// Usage
.@{my-selector} {
  @{property}: bold;
  line-height: 40px;
  margin: 0 auto;
  background: url("@{images}/white-sand.png");
}
複製程式碼

編譯為

.banner {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
  background: url("../img/white-sand.png");
}
複製程式碼

引用變數的變數

@primary:  green;
@secondary: blue;

.section {
  @color: primary;

  .element {
    color: @@color;
  }
}
複製程式碼

編譯為

.section .element {
  color: green;
}
複製程式碼

惰性求值，變數不用非得在使用之前宣告，有點類似js的變數提升，當一個變數重複宣告兩次時，從當前作用域開始向上找，以最近作用域最後宣告的為準

.lazy-eval {
  width: @var;
  @a: 9%;
}

@var: @a;
@a: 100%;
複製程式碼

編譯為

.lazy-eval {
  width: 9%;
}
複製程式碼

引用css屬性值作為變數（v3.0.0），當遇到多個重複屬性值時，規則同惰性求值

.block {
  color: red; 
  .inner {
    background-color: $color; 
  }
  color: blue;  
} 
複製程式碼

編譯為

.block {
  color: red; 
  color: blue;  
} 
.block .inner {
  background-color: blue; 
}
複製程式碼

由於類似變數提升，惰性求值的特性，能夠實現改變某些庫預設變數的功能

// library
@base-color: green;
@dark-color: darken(@base-color, 10%);

// use of library
@import "library.less";
@base-color: red;
複製程式碼

此時base-color就變為red，而dark-color就變為dark red了，這在實現主題顏色時很有用

相關文章