iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 15
2

Variable可以儲存value,讓code更好維護。

在一間公司可能有公司代表的主要顏色,
會被使用在everywhere,

header {
  background-color: #ac0000;
  font-size: 40px;  
}

.content {
  background-color: #ac0000;
  color: #550000;
}

今天老闆想要把顏色換成#cc0000
雖然只有一個字要改,
但如果有100處,得要改100次,
或是可以ctrl+h 取代。

如果使用variable,
可以很容易解決這個問題。

@main-color :#ac0000;

header {
  background-color: @main-color;
  font-size: 40px;  
}

.content {
  background-color: @main-color;
  color: #550000;
}

#ac0000存到 @main-color這個變數中,
就可以直接使用這個變數來當作值,

header {
  background-color: #ac0000;
  font-size: 40px;
}
.content {
  background-color: #ac0000;
  color: #550000;
}

如果今天要稍作修改顏色,
直接修改變數就可以了。


此外,變數還可以做運算:

@main-color :#ac5712;

header {
  background-color: @main-color;
  font-size: 40px;  
}

.content {
  background-color: @main-color / 3;
  color: @main-color * 0.8;
}
header {
  background-color: #ac5712;
  font-size: 40px;
}
.content {
  background-color: #391d06;
  color: #8a460e;
}

Variable Interpolation

變數不只可用在控制css 的value,
也可以用於 selector、url、properties:

@main-color: #ac5712;
// 用於properties
@t: text;
// 用於urls
@img-link: "../../images/";
// 用於selectors
@headSelector: header;


@{headSelector} {
  background-color: @main-color;  
  font-size: 40px;   
  @{t}-align: center; 
  // 用於properties
  @{t}-decoration: none; 
  // 用於properties
  background: url("@{img-link}main.png"); 
  // 用於url
}

.content {
  background-color: @main-color;
  color: @main-color;
  background: url("@{img-link}content.svg"); 
  // 用於url
}

compile後的結果:

header {
  background-color: #ac5712;
  font-size: 40px;
  text-align: center;
  text-decoration: none;
  background: url("../../images/main.png");
}
.content {
  background-color: #ac5712;
  color: #ac5712;
  background: url("../../images/content.svg");
}

Variable Variables

在Less中,可以使用variable來定義variable。

@foo: #ffffff;

.content {
  @color: foo;
  span {
    background-color: @@color;
  }
}

compile後的結果:

.content span {
  background-color: #ffffff;
}

Lazy Evaluation

變數使用前不用先宣告,可以在使用後再行宣告既可。
如果一個變數被宣告兩次,
只會使用最後被宣告的變數。

.content {
  color: @foo;  
}
@foo: #ffffff;
@foo: #000000;

compile後的結果:

.content {
  color: #000000;
}

Less會從當前scope中向上搜索變數,

@var: 0;
.class {
  @var: 1;
  .brass {
    @var: 2;
    three: @var; 
    // 會找到後宣告的@var: 3
    @var: 3;
  }
  one: @var; 
  // 會找到同一個scope的@var: 1
}

compile後的結果:

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

##Properties as Variables

也可以將css的properties當作變數來使用?!
必須寫成$properties

.content {
  color: #acacac;
  background-color: $color;  
  height: 20px;
  line-height: $height;
}

compile後的結果:

.content {
  color: #acacac;
  background-color: #acacac;
  height: 20px;
  line-height: 20px;
}

接觸preprocessor並不多,
雖然variable很方便,
像是用於urls可以省掉少寫很多路徑。

但其他有些功能看似有點脫褲子放屁,
像是Properties as Variables、Lazy Evaluation,

如果前輩你看到這邊
這些功能或是特性在實作上是不是真的會使用到呢?


參考資料
lesscss.org


上一篇
[14] Less - Import
下一篇
[16] Less - Mixin、Nesting
系列文
我在繡房繡小主常服的日子-- 初入前端工程師的第一個小挑戰30

尚未有邦友留言

立即登入留言