scss是css的預編譯語言，寫法更靈活

宣告變數
1.使用$符號來標識變數

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

//編譯後

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

巢狀CSS 規則

#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  aside { background-color: #EEE }
}

 /* 編譯後 */
 

#content article h1 { color: #333 }
#content article p { margin-bottom: 1.4em }
#content aside { background-color: #EEE }

父選擇器的識別符號&

article a {
  color: blue;
  &:hover { color: red }
}
/* 編譯後 */
article a { color: blue }
article a:hover { color: red }

群組選擇器的巢狀

.container {
  h1, h2, h3 {margin-bottom: .8
 
em}
}

/*編譯後*/

.container h1, .container h2, .container h3 { margin-bottom: .8em }
---------------------

nav, aside {
  a {color: blue}
}

/*編譯後*/

nav a, aside a {color: blue}

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

// > 子代選擇器
article > section { border: 1px solid #ccc }

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

//同層全體組合選擇器~
article ~ article { border-top: 1px dashed #ccc }

巢狀屬性

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

/*編譯後*/
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

---------------------------

nav {
  border: 1px solid #ccc {
  left: 0px;
  right: 0px;
  }
}

/*編譯後*/

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}

匯入SASS檔案

// name: _blue-theme.scss
aside {
  background: blue;
  color: white;
}

.blue-theme {@import "blue-theme"}

//生成的結果跟你直接在.blue-theme選擇器內寫_blue-theme.scss檔案的內容完全一樣。

.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}

靜默註釋

body {
  color: #333; // 這種註釋內容不會出現在生成的css檔案中
  padding: 0; /* 這種註釋內容會出現在生成的css檔案中 */
}

混合器（公用程式碼片段）

// 通過@mixin 來定義
@mixin rounded-corners {
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

// 通過@include 來呼叫
notice {
  background-color: green;
  border: 2px solid #00aa00;
  @include rounded-corners;
}

給混合器傳參

@mixin link-colors($normal, $hover, $visited) {
  color: $normal;
  &:hover { color: $hover; }
  &:visited { color: $visited; }
}

a {
  @include link-colors(blue, red, green);
}

//Sass最終生成的是：

a { color: blue; }
a:hover { color: red; }
a:visited { color: green; }

---------------------------
// 也可以這麼呼叫$name:value
a {
    @include link-colors(
      $normal: blue,
      $visited: green,
      $hover: red
  );
}

使用選擇器繼承來精簡CSS

//通過選擇器繼承繼承樣式@extend
.error {
  border: 1px red;
  background-color: #fdd;
}

.seriousError {
  @extend .error;
  border-width: 3px;
}

--------------------------------
//.seriousError不僅會繼承.error自身的所有樣式，任何跟.error有關的組合選擇器樣式也會被.seriousError以組合選擇器的形式繼承，

//.seriousError從.error繼承樣式
.error a{  //應用到.seriousError a
  color: red;
  font-weight: 100;
}
h1.error { //應用到hl.seriousError
  font-size: 1.2rem;
}