Sass學習筆記 -- 變量及變量作用域歷史遺留問題

sass有兩種后綴名文件：

一種后綴名為sass，寫選擇器時不能使用大括號和分號

一種后綴名為scss，使用大括號和分號

//后綴名為sass的語法，不能出現(xiàn)大括號和分號
$highlight-color: #abcdef

.selected
  border: 1px $highlight-color solid
  
//后綴名為scss的語法，跟css一樣，需要大括號和分號
$highlight-color: #abcdef;

.selected{
  border:1px solid $highlight-color;
}

Sass的一個重要特性就是它為CSS引入了變量。你可以把反復使用的CSS屬性值定義成變量，然后通過變量名來引用它們，而無需重復書寫這一屬性值。或者，對于僅使用過一次的屬性值，你可以賦予其一個易懂的變量名，讓人一眼就知道這個屬性值的用途

Sass使用“$”來標識變量，比如: $highlight-color, $width

變量聲明

1、普通變量

Sass變量的聲明跟CSS屬性的聲明很像，后面緊跟變量名，變量名和值之間用冒號分隔開

$highlight-color: #abcdef;

這就意味著變量$highlight-color現(xiàn)在的值是#abcdef，這時的變量還沒有生效，除非你引用了這個變量

.selected{
  border:1px solid $highlight-color;
}

2、默認變量

如果值后面加 "!default" 則表示默認值

無"!default" 

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

//css編譯
p {
  color: blue; }

有"!default" 

//scss
$color:red;
$color:blue !default;
p{
  color:$color;
}

//css編譯
p {
  color: red; }

sass編譯css是從上到下的，后面會覆蓋前面的，所以第一段無!default的解析的是blue，而第二段代碼由于有了!default，打破了這個規(guī)則，使用了前面定義的red

//scss
$baseLineHeight:2px; //這個寫在帶有!default的變量后面就沒有任何意義了
$baseLineHeight:1.5px !default;

.box{
  line-height:$baseLineHeight;
}
//css編譯
.box {
  line-height: 2px; }

3、#{}  讓一切變成字符串

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

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

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

//css編譯
.border-top {
  border-top: 1px solid #ddd; }

body {
  font: 12px/1.5; }

//scss
@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");

//css編譯
body.firefox .header:before {
  content: "Hi, Firefox users!"; }

如果不用行不行呢？不妨試試看：

//scss
body{
  font:$baseFontSize/$baseLineHeight;
}

//css編譯
body {
  font: 8px; }

字體成了8px，因為誤做了除法，上面的border-top如果不加#{}的話，無法編譯

4、多值變量

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

（1）、list

list數據可通過空格，逗號或小括號分隔多個值，可用nth($var,$index)取值。關于list數據操作還有很多其他函數如length($list)，join($list1,$list2,[$separator])，append($list,$value,[$separator])等

//一維數據
$px: 5px 10px 20px 30px;

//二維數據，相當于js中的二維數組
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

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

//css編譯
a {
  color: #f00; }
  a:hover {
    color: #eee; }

（2）、map

map數據以key和value成對出現(xiàn)，其中value又可以是list。格式為：$map: (key1: value1, key2: value2, key3: value3);?？赏ㄟ^map-get($map,$key)取值。關于map數據還有很多其他函數如map-merge($map1,$map2)，map-keys($map)，map-values($map)等

//scss
$headings:(h2:2em, h3:1.5em, h4:1em);
@each $header, $size in $headings{
  #{$header}{
    font-size:$size;
}
}

//css編譯
h2 {
  font-size: 2em; }

h3 {
  font-size: 1.5em; }

h4 {
  font-size: 1em; }

上面的代碼中，把map數據的屬性看作是$header，把屬性值看作是$size進行遍歷（當成了js對象去理解，所以稱之為屬性和屬性值，這種說法不一定對）

變量運算

你能夠運用‘加’或‘減’操作符來對相同類型的變量進行運算，如果我們想要手動的輕微的加深一個顏色值，可以通過'-'來減去#101，同樣我們可以通過‘+’來將字體值增大10px。

//scss
$red:#f00;
$fontSize:12px;

.bar{
  color:$red+#101;
  font-size:$fontSize+10px;
}

//css編譯
.bar {
  color: #ff0011;
  font-size: 22px; }

全局變量和局部變量

首先聲明：當前sass版本是3.4.22，與之前的3.3版本相比，有關全局變量這塊有所不同。跟著原來的文檔學習，在編譯的時候出現(xiàn)了差異，困擾了我很久，去一些交流群問還被人夾槍帶棒的嘲笑，最后非常慶幸得到大漠老師的指導，指出版本的差異并分享了較新的文檔資料，在這里再次感謝大漠老師?。?！

大漠老師文章：http://www.w3cplus.com/preprocessor/understanding-variable-scope-in-sass.html

在當前大部分文檔中都有這么一句話“sass沒有局部變量”，并且隨處可見這種示例

大家不妨把sass代碼重新編譯一下，我們得到的結果卻是：

所以，如果跟我一樣是sass初學者的話，就跳過你看到的那些老的文檔關于變量作用域的介紹吧

sass變量作用域支持兩種類型變量：全局變量和局部變量

全局變量：默認情況下，所有定義在任何選擇器之外的變量被認為是全局變量。這就意味著他們可以在樣式表中任意地方被訪問

$bg-color: green;

局部變量：定義在選擇器之內的變量稱之為局部變量

先看第一個例子，首先定義一個混合器，在里面添加一個$btn-bg-color變量，這是一個局部變量，它只在mixin內部可見

@mixin button-style {
  $btn-bg-color: lightblue;
  color: $btn-bg-color;
}

接下來，調用這個mixin

button {
  @include button-style;
}

//執(zhí)行css編譯
button {
  color: lightblue;
}

如果不是一個mixin，而是一個選擇器來調用這個局部變量，可以想象，應該是無法調用的吧

嵌套選擇器

如果我們在一個選擇器內部聲明了一個變量，嵌套在里面的其他選擇器中都可以訪問它

//scss
.wrap {
    $bg-color: red;

    &:after {
        background: lighten($bg-color, 10%);
    }
}

//css
.wrap:after {
  background: #ff3333;
}

再看一個例子，我們定義了一個函數，然后在嵌套的選擇器中使用這個函數

//scss
@function my-function() {
    $text-color: black;
    @return $text-color;
}

.wrap {
    color: my-function();
}

//css
.wrap {
  color: black;
}

我們稍加修改一下：

//scss
@function my-function() {
    $text-color: black;
    @return $text-color;
}

.wrap {
    color: my-function();

    &:after{
        background: $text-color;
    }
}

編譯的結果是變量$text-color未定義，因為它不是直接定義在選擇器里面，而是在選擇器內部調用了定義的函數

全局變量和局部變量可以定義相同的變量名，我們定義了三個相同變量名的變量，只是他們具有不同的值。第一個是全局變量，其他兩個是局部變量

//scss
//定義一個全局變量
$text-color: tomato;

//定義一個混合器
@mixin button-style {
  $text-color: lime;
  color: $text-color;
}

@mixin link-style {
  $text-color: black;
  color: $text-color;
}

//調用混合器
button {
  @include button-style;
}

a {
  @include link-style;
}

//調用變量
.wrap {
  background: $text-color;
}

//css
button {
  color: lime; }

a {
  color: black; }

.wrap {
  background: tomato; }

Global標志

"!global"可以改變一個局部變量的作用范圍，回到我們一開始探討sass版本的那個例子

//scss
p{
    $color:blue !global;
    color:$color;//blue
}
a{
    color:$color;//本來應該是Undefined variable
}

理論上，$color是定義在p里面的局部變量，a選擇器里面的color應該是訪問不到的，但是我們通過"!global"標志可以讓$color發(fā)揮一個全局變量的作用

檢查一個變量是否存在

Sass提供了兩個函數，用來測試一個變量是否存在。我們可以使用variable-exists或global-variable-exists函數來檢查我們的局部變量或全局變量是否分別存在

//scss
$text-color: tomato;
@if(global_variable_exists(text-color)){
  #mainTitle{
    color:$text-color;
  }
}

//css
#mainTitle {
  color: tomato; }

有一定英語基礎的朋友，也可以從下面兩個網站學習

http://sass-lang.com/documentation/file.SASS_REFERENCE.html

https://webdesign.tutsplus.com/articles/understanding-variable-scope-in-sass--cms-23498