Sass變量及嵌套

1. 變量：SASS允許使用變量，所有變量以$開頭。

　　變量聲明：$highlight-color: #000;

　　注意：變量可以在css規則塊定義之外存在。如下例子：

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//編譯后
nav {
  width: 100px;
  color: #F90;
}
$nav-color這個變量定義在了規則塊外邊，所以在這個樣式表中都可以像 nav規則塊那樣引用它。
$width這個變量定義在了nav的{ }規則塊內，所以它只能在nav規則塊 內使用。
這意味着是你可以在樣式表的其他地方定義和使用$width變量，不會對這里造成影響。

　　變量引用：css生成時，變量會被他們的值替代，以后只需要改變這個變量的值，所有引用變量的地方的值都會改變。

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

//編譯后
.selected {
  border: 1px solid #F90;
}

　　變量名用中划線還是下划線：這兩種用法相互兼容，沒有區別。用中划線聲明的變量可以使用下划線的方式引用，反之亦然。

　　如果變量需要鑲嵌在字符串之中，就必須需要寫在#{}之中。

$left: left;
div{
    margin-#{$left}:40px;
}

　　sass允許在代碼中使用算式

　body {
　　　　margin: (14px/2);
　　　　top: 50px + 100px;
　　　　right: $var * 10%;
　　}

 

2. 嵌套：選擇器和屬性都可以嵌套

　　父選擇器的標識符：&

　　sass使用后代選擇器的方式生成這種連接（父選擇器 空格 子選擇器）。使用:hover偽類時這種后代選擇器連接不起作用，所以需要用到&。看完以下例子就明白了.

article a {
  color: blue;
  :hover { color: red }
}

//編譯后如下

article a {
  color: 3ee;
}
article a :hover {
  color: red;
}
問題： 第11行代碼 a后面多了空格，所以color:red是不起作用的

當包含父選擇器標識符的嵌套規則被打開時，它不會像后代選擇器那樣進行拼接，而是&被父選擇器直接替換：

article a {
  color: 3ee;
  &:hover { color: red }
}
//編譯后
article a { color: 3ee; }
article a:hover { color: red; }

　　群組選擇器的嵌套： 減少工作量，但是會降低網站速度

.container {
    h1,h2,h3{color: red;}
}
//編譯后
.container h1, .container h2, .container h3 { color: red; }

　　子組合選擇器和同層組合選擇器：>、+和~;

// 選擇article下的所有命中section選擇器的元素 article section { margin: 5px }

// 子組合選擇器>選擇一個元素的直接子元素 article > section { border: 1px solid #ccc }

// 同層相鄰組合選擇器+選擇header元素后緊跟的p元素 header + p { font-size: 1.1em }

//同層全體組合選擇器~，選擇所有跟在article后的同層article元素，不管它們之間隔了多少其他元素 article ~ article { border-top: 1px dashed #ccc }

article {
  ~ article { border-top: 1px dashed #ccc }
  > section { background: #eee }
  dl > {
    dt { color: #333 }
    dd { color: #555 }
  }
  nav + & { margin-top: 0 }
}

//編譯后
article ~ article { border-top: 1px dashed #ccc }
article > section{ background: #eee }
article dl > dt { color: #333 }
article dl > dd { color: #555 }
nav + article { margin-top: 0 }

　　嵌套屬性：以border為例:

//border后面必須加上冒號:
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
//編譯后

nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

border縮寫形式:

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}
//編譯后
nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

3. 注釋

標准的CSS注釋 /* comment */ ，會保留到編譯后的css文件。

單行注釋 // comment，只保留在SASS源文件中，編譯后被省略。

在/*后面加一個感嘆號，表示這是"重要注釋"。即使是壓縮模式編譯，也會保留這行注釋，通常可以用於聲明版權信息。

/*! 
　　　　重要注釋！
*/