sass學(xué)習(xí)筆記（三）：sass的變量及嵌套

sass的變量

1、聲明變量

$width: 300px;

如上所示，Sass 的變量包括三個(gè)部分：聲明變量的符號(hào)“$”、變量名稱、賦予變量的值。

2、普通變量與默認(rèn)變量

普通變量定義之后可以在全局范圍內(nèi)使用。默認(rèn)變量僅需要在值后面加上 !default 即可。例如：

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

編譯后的css代碼：

body{
    line-height:1.5;
}

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

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

編譯后的css代碼：

body{
    line-height:2;
}

可以看出現(xiàn)在編譯后的 line-height 為 2，而不是我們默認(rèn)的 1.5。

3、局部變量與全局變量

//SCSS$color: orange !default;//定義全局變量(在選擇器、函數(shù)、混合宏...的外面定義的變量為全局變量)
.block {
  color: $color;//調(diào)用全局變量
}
em {
  $color: red;//定義局部變量
  a {
    color: $color;//調(diào)用局部變量
  }
}
span {
  color: $color;//調(diào)用全局變量

css 的結(jié)果：

//CSS
.block {
  color: orange;
}
em a {
  color: red;
}
span {
  color: orange;
}

全局變量就是定義在元素外面的變量，而定義在元素內(nèi)部的變量，比如 $color:red; 是一個(gè)局部變量。

什么時(shí)候聲明變量？

創(chuàng)建變量只適用于感覺確有必要的情況下。不要為了某些駭客行為而聲明新變量，這絲毫沒有作用。只有滿足所有下述標(biāo)準(zhǔn)時(shí)方可創(chuàng)建新變量：

1.該值至少重復(fù)出現(xiàn)了兩次；

2.該值至少可能會(huì)被更新一次；

3.該值所有的表現(xiàn)都與變量有關(guān)（非巧合）。

基本上，沒有理由聲明一個(gè)永遠(yuǎn)不需要更新或者只在單一地方使用變量。

sass的嵌套：

1、選擇器嵌套

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

css是這樣的：

nav a {
  color:red;
}

header nav a {
  color:green;
}

2、屬性嵌套

CSS 有一些屬性前綴相同，只是后綴不一樣，比如：border-top/border-right，與這個(gè)類似的還有 margin、padding、font 等屬性。假設(shè)你的樣式中用到了：

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在 Sass 中我們可以這樣寫：

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

3、偽類嵌套

偽類嵌套和屬性嵌套非常類似，只不過他需要借助`&`符號(hào)一起配合使用。拿經(jīng)典的“clearfix”為例：

.clearfix{&:before,&:after {
    content:"";
    display: table;
  }&:after {
    clear:both;
    overflow: hidden;
  }
}

編譯出來的 CSS：

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

避免選擇器嵌套：

選擇器嵌套最大的問題是將使最終的代碼難以閱讀。開發(fā)者需要花費(fèi)巨大精力計(jì)算不同縮進(jìn)級(jí)別下的選擇器具體的表現(xiàn)效果。

選擇器越具體則聲明語句越冗長，而且對最近選擇器的引用(&)也越頻繁。在某些時(shí)候，出現(xiàn)混淆選擇器路徑和探索下一級(jí)選擇器的錯(cuò)誤率很高，這非常不值得。

為了防止此類情況，我們應(yīng)該盡可能避免選擇器嵌套。