Sass變量、嵌套

聲明變量
定義變量的語法
Sass 的變量包括三個部分：
　　聲明變量的符號「$」
　　變量名稱
　　賦予變量的值
簡單的示例，假設你的按鈕顏色能夠給其聲明幾個變量：

1 $brand-primary : darken(#428bca, 6.5%) !default;/* #337ab7*/
2 $btn-primary-color : #fff !default; 3 $btn-primary-bg : $brand-primary !default; 4 $btn-primary-border : darken($btn-primary-bg, 5%) !default; 5 /*若是值後面加上!default則表示默認值。*/

 

 

普通變量與默認變量
普通變量
定義以後能夠在全局範圍內使用

1 $fontSize: 12px; 2 body{
3  font-size:$fontSize;
4 }

編譯後的CSS代碼：

1 body{
2  font-size:12px;
3 }

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

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

編譯後的css代碼：

1 body{
2  line-height：1.5; 3 }

sass 的默認變量通常是用來設置默認值，而後根據需求來覆蓋的，覆蓋的方式也很簡單，只須要在默認變量以前從新聲明下變量便可。

1 $baseLineHeight: 2; 2 $baseLineHeight: 1.5 !default; 3 body{
4  line-height: $baseLineHeight; 
5 }

編譯後的css代碼：

1 body{
2  line-height:2;
3 }

能夠看出如今編譯後的 line-height 爲 2，而不是咱們默認的 1.5。默認變量的價值在進行組件化開發的時候會很是有用。

 

 

局部變量和全局變量
若是已經存在同名的全局變量，從 3.4 版本開始，Sass 已經能夠正確處理做用域的概念，並經過建立一個新的局部變量來代替。
全局變量與局部變量

 1 /*SCSS*/
 2 $color: orange !default;/*定義全局變量(在選擇器、函數、混合宏...的外面定義的變量爲全局變量)*/
 3 .block {
 4  color: $color;//調用全局變量  5 }
 6 em {
 7  $color: red;//定義局部變量  8  a {  9  color: $color;//調用局部變量 10     }
11 } 12 span {
13  color: $color;//調用全局變量 14 }

css 的結果：

 1 /*CSS*/
 2 .block {
 3  color: orange;
 4 }
 5 em a {
 6  color: red;
 7 }
 8 span {
 9  color: orange;
10 }

在元素內部定義的變量不會影響其餘元素。如此能夠簡單的理解成，全局變量就是定義在元素外面的變量，以下代碼：

$color:orange !default;

 $color  就是一個全局變量，而定義在元素內部的變量，好比  $color:red;  是一個局部變量。
全局變量的影子
當在局部範圍（選擇器內、函數內、混合宏內...）聲明一個已經存在於全局範圍內的變量時，局部變量就成爲了全局變量的影子。基本上，局部變量只會在局部範圍內覆蓋全局變量。
上面例子中的 em 選擇器內的變量 $color  就是一個全局變量的影子。

 1 /*SCSS*/
 2 $color: orange !default;//定義全局變量  3 .block {
 4  color: $color;//調用全局變量  5 }
 6 em {
 7  $color: red;//定義局部變量（全局變量 $color 的影子）  8  a {  9  color: $color;//調用局部變量 10     }
11 }

何時聲明變量？
建議：建立變量只適用於感受確有必要的狀況下。不要爲了某些駭客行爲而聲明新變量，這絲毫沒有做用。只有知足全部下述標準時方可建立新變量：
　　一、該值至少重複出現了兩次；
　　二、該值至少可能會被更新一次；
　　三、該值全部的表現都與變量有關（非巧合）。
　　四、基本上，沒有理由聲明一個永遠不須要更新或者只在單一地方使用變量。

 

 

嵌套-選擇器嵌套
Sass 中還提供了選擇器嵌套功能，但這也並不意味着你在 Sass 中的嵌套是無節制的，由於你嵌套的層級越深，編譯出來的 CSS 代碼的選擇器層級將越深
Sass 的嵌套分爲三種：
　　選擇器嵌套
　　屬性嵌套
　　僞類嵌套
一、選擇器嵌套
假設咱們有一段這樣的結構：

1 <header>
2     <nav>
3         <a href=「##」>Home</a>
4         <a href=「##」>About</a>
5         <a href=「##」>Blog</a>
6     </nav>
7 <header>

想選中 header 中的 a 標籤，在寫 CSS 會這樣寫：

1 nav a {
2  color:red;
3 }
4 header nav a {
5  color:green;
6 }

那麼在 Sass 中，就可使用選擇器的嵌套來實現：

1 nav {
2  a { 3  color: red;
4 
5  header & { 6  color:green;
7         }
8  } 9 }

 

 

 

 

引用父選擇符： &

1 a {
2  font-weight: bold;
3  text-decoration: none;
4  &:hover { text-decoration: underline; }
5  body.firefox & { font-weight: normal; }
6 }

 

被編譯爲：

1 a {
2  font-weight: bold;
3  text-decoration: none; }
4  a:hover {
5  text-decoration: underline; }
6  body.firefox a {
7  font-weight: normal; }

 &  在編譯時將被替換爲父選擇符，輸出到 CSS 中。 也就是說，若是你有一個深層嵌套的規則，父選擇符也會在 & 被替換以前被完整的解析

 

 

1 #main {
2  color: black;
3  a { 4  font-weight: bold;
5  &:hover { color: red; }
6  } 7 }

 

被編譯爲：

1 #main {
2  color: black; }
3  #main a {
4  font-weight: bold; }
5  #main a:hover {
6  color: red; }

 

 

 

 

嵌套-屬性嵌套
Sass中還提供屬性嵌套,CSS有一些屬性前綴相同，只是後綴不同，好比:border-top/border-right,與這個相似的還有margin、padding、font等屬性。
例：

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

在Sass中能夠這樣寫：

1 .box{
2  border:{ 3  top: 1px solid red;
4  bottom: 1px solid green;
5     }
6 }

 

 

 

嵌套-僞類嵌套
僞類嵌套和屬性嵌套很是相似，只不過他須要藉助「&」符號一塊兒配合使用。
就拿經典的「clearfix」爲例吧：

 1 .clearfix{
 2  &:before,&:after {  3  content:"";
 4  display: table;
 5     }
 6  &:after {
 7  clear:both;
 8  overflow: hidden;
 9     }
10 }

編譯出來的 CSS：

1 clearfix:before, .clearfix:after {
2  content: "";
3  display: table;
4 }
5 .clearfix:after {
6  clear: both;
7  overflow: hidden;
8 }

避免選擇器嵌套：
選擇器嵌套最大的問題是將使最終的代碼難以閱讀。開發者須要花費巨大精力計算不一樣縮進級別下的選擇器具體的表現效果。
選擇器越具體則聲明語句越冗長，並且對最近選擇器的引用(&)也越頻繁。在某些時候，出現混淆選擇器路徑和探索下一級選擇器的錯誤率很高，這很是不值得。
爲了防止此類狀況，咱們應該儘量避免選擇器嵌套。然而，顯然只有少數狀況適應這一措施。