[Sass]普通變量與默認變量

普通變量

定義之後可以在全局範圍內使用。

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

編譯後的css代碼：

body{
    font-size:12px;
}

默認變量

sass 的默認變量僅需要在值後面加上!default 即可。

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

編譯後的css代碼：

body{
    line-height:1.5;
}

sass的默認變量一般是用來設置默認值，然後根據需求來覆蓋的，覆蓋的方式也很簡單，只需要在默認變量之前重新聲明下變量即可。

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

編譯後的css代碼：

body{
    line-height:2;
}

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