sass學習筆記（三）：sass的變量及嵌套

sass的變量

1、聲明變量

$width: 300px;

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

2、普通變量與默認變量

普通變量定義之后可以在全局范圍內使用。默認變量僅需要在值后面加上 !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。

3、局部變量與全局變量

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

css 的結果：

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

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

什么時候聲明變量？

創建變量只適用于感覺確有必要的情況下。不要為了某些駭客行為而聲明新變量，這絲毫沒有作用。只有滿足所有下述標準時方可創建新變量：

1.該值至少重復出現了兩次；

2.該值至少可能會被更新一次；

3.該值所有的表現都與變量有關（非巧合）。

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

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，與這個類似的還有 margin、padding、font 等屬性。假設你的樣式中用到了：

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

在 Sass 中我們可以這樣寫：

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

3、偽類嵌套

偽類嵌套和屬性嵌套非常類似，只不過他需要借助`&`符號一起配合使用。拿經典的“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;
}

避免選擇器嵌套：

選擇器嵌套最大的問題是將使最終的代碼難以閱讀。開發者需要花費巨大精力計算不同縮進級別下的選擇器具體的表現效果。

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

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