SCSS 語法

前言：Sass是CSS預處理器，引入了變量、嵌套、mixin（混合）、運算以及函數等功能，且完全兼容 CSS 語法，而SCSS是Sass3版本當中引入的新語法特性。

優點：

• 完全兼容 CSS3
• 在 CSS 語言基礎上添加了擴展功能，比如變量、嵌套 (nesting)、混合 (mixin)
• 通過函數進行顏色值與屬性值的運算
• 函數庫控制指令之類的高級功能
• 自定義輸出格式
• 有無數的框架使用Sass構建
• 助於更好地組織管理樣式文件，以及更高效地開發項目

語法

一、自定義變量

• 屬性值

$color:pink;
.test1{
    background-color:$color;
}

• 屬性

$right:right;
.test2{
    border-#{$right}:1px solid #000;
}

二、嵌套

• 嵌套元素

#sidebar {
  a { text-decoration: none; }
}

• 嵌套屬性

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

三、引用父選擇符 &

• 例如，在該選擇器懸停時或者當body元素具有某個類時具有特殊樣式。
• 無論css如何嵌套多少層次，& 在編譯時都會替換爲父選擇符，以下代碼&始終解析爲a標籤

.box{
	a {
	  font-weight: bold;
	  text-decoration: none;
	  &:hover { text-decoration: underline; }
	  body.firefox & { font-weight: normal; }
	}
}

四、混入mixin

• 使用@mixin指令聲明mixin ：

@mixin rounded($amount) {
  -moz-border-radius: $amount;
  -webkit-border-radius: $amount;
  border-radius: $amount;
}

• mixin與@include指令一起使用：

.box {
  border: 3px solid #777;
  @include rounded(0.5em);
}

五、導入import

@import則會直接將這些引入的片段合併至當前CSS文件，並且不會產生新的請求

@import "themes/dark";
@import "font.sass";

六、繼承extend

複用css屬性，簡化代碼
單個選擇器可以多個選擇器t繼承了所有擴展選擇器的樣式

.test{
  border: 1px #f00;
  background-color: #fdd;
}
.box{
  @extend .test;
  border-width: 3px;
}

七、運算

• css中也可以使用算術運算符 ‘+’、‘-’、‘*’、‘/’、‘%’等
• 所有算數運算都支持顏色值， 並且是分段運算的。 也就是說，紅、綠、藍各顏色分量會單獨進行運算

.box{
  width: 600px / 960px * 100%;
  color: #010203 + #040506;
}

注意：除法 ‘/’，出現在屬性值裏，作爲分隔數字的一種方法，在以下幾種情況下才會被編譯爲除法。

.box{
  font: 10px/8px;             // 純 CSS，不是除法運算
  $width: 1000px;
  width: $width/2;            // 使用了變量，是除法運算
  width: round(1.5)/2;        // 使用了函數，是除法運算
  height: (500px/2);          // 使用了圓括號，是除法運算
  margin-left: 5px + 8px/2px; // 使用了加（+）號，是除法運算
}

控制指令