css、less、sass中定義變量，並使用變量設置屬性值

CSS的變量聲明和使用

    :root{
      --base: yellow;
      --spacing: 10px;
      --blur: 10px;
    }

上面代碼定義了3個變量，：root使得所有人可訪問

    img{
      filter: blur(var(--blur));
      padding: var(--spacing);
      background: var(--base);
 
    }

上面使用了之前定義的變量作爲屬性值

還可以通過js改變變量的值，從而改變屬性

 document.documentElement.style.setProperty(`--${this.name}`,this.value + suffix)

其中： 

${this.name}是解析變量的寫法

LESS的變量聲明和使用

less文件內容

@charset "utf-8";
 
//定義變量
@test-width:200px;
@test-height:300px;
//定義樣式
.testDiv{
   width:@test-width;
   height:@test-height;
   background-color: aquamarine;
}

SASS

sass的變量必須是$開頭，後面緊跟變量名，而變量值和變量名之間就需要使用冒號(:)分隔開（就像CSS屬性設置一樣），如果值後面加上!default則表示默認值。

1、普通變量：定義之後可以在全局範圍內使用。

scss語法：

$fontSize: 12px;
body{
    font-size:$fontSize;
}

css輸出：

body{
    font-size:12px;
}

2、默認變量：Sass的默認變量僅需要在值後面加上!default即可。

scss編譯

$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

css輸出：

body{
    line-height:2;
}

可以看出現在編譯後的line-height爲2，而不是我們默認的1.5。默認變量的價值在進行組件化開發的時候會非常有用。

3、特殊變量：一般我們定義的變量都爲屬性值，可直接使用，但是如果變量作爲屬性或在某些特殊情況下等則必須要以#{$variables}形式使用

scss編譯

$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;

//應用於class和屬性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//應用於複雜的屬性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

CSS輸出：

.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

4、多值變量：多值變量分爲list類型和map類型，簡單來說list類型有點像js中的數組，而map類型有點像js中的對象。

list

1. list數據可通過空格，逗號或小括號分隔多個值，可用nth(var,var,value,[$separator]) 具體可參考sass Functions（搜索List Functions即可）

scss輸出

$linkColor:#08c #333 !default;//第一個值爲默認值，第二個鼠標滑過值
a{
  color:nth($linkColor,1);
  &:hover{
    color:nth($linkColor,2);
  }
}

css輸出

a {
  color: #08c;
}
a:hover {
  color: #333;
}

map

1. map數據以key和value成對出現，其中value又可以是list
2. 格式爲：$map: (key1: value1, key2: value2, key3: value3)
3. 通過map-get(map,map,map)等
4. 具體可參考sass Functions（搜索Map Functions即可）

定義：

$heading: (h1: 2em, h2: 1.5em, h3: 1.2em);

scss編譯

$key-green:green;
$val-green:#fff;
$key-red:red;
$val-red: #ff0000;
$key-info:info;
$val-info: #ff00ff;
$key-success:success;
$val-success: #f66;

//$text: (green: #fff, red: #ff0, info: #f0f);
$text: (
    $key-green: $val-green,
    $key-red: $val-red,
    $key-info: $val-info,
    $key-success:$val-success
);

@each $i, $size in $text {
    .text-#{$i} {
        color: $size;
    }
}

css輸出

.text-green {
  color: #fff;
}

.text-red {
  color: #ff0000;
}

.text-info {
  color: #ff00ff;
}

.text-success {
  color: #f66;
}

5、全局變量：在變量值後面加上!global即爲全局變量。這個目前還用不上，不過將會在sass 3.4後的版本中正式應用。目前的sass變量範圍飽受詬病，所以纔有了這個全局變量。

目前變量機制

在選擇器中聲明的變量會覆蓋外面全局聲明的變量。(這也就人們常說的sass沒有局部變量)

scss編譯

$fontSize:12px;
body{
    $fontSize: 14px;
    font-size:$fontSize;
}
p{
    font-size:$fontSize;
}

css輸出

body {
  font-size: 14px;
}
p {
  font-size: 12px;
}

這裏設置了兩個變量，然後在body裏面重新設置了下，有點不同的是對於$color變量，我們設置了!global。通過編譯後的css可以看到font-size取值不同，而color取值相同。與上面的機制對比就會發現默認在選擇器裏面的變量爲局部變量，而只有設置了!global之後纔會成爲全局變量。

文末彩蛋：
關於less和sass的區別：
sass版

$color:red;
p{
    $color:blue;
    color:$color;//blue
}
a{
    color:$color;//blue
}

less版

@color:red;
p{
    @color:blue;
    color:@color;//blue
}
a{
    color:@color;//red
}

詳細介紹請移步這裏。

介紹一個在線編輯sass的工具： https://www.sassmeister.com/