SASS 基礎語法（二）

官方文檔解釋 SCSS 與 Sass 異同
。。。反正這個東西都這麼叫，sass

快速入門

快速入門參考 sass 中文文檔，大量的語言描述與講解會被省略。

變量

變量聲明

/* sass 使用 $ 符號來標識變量 */
$basic-border: 1px solid black;
$highlight-color: #F90;
$nav-color: #F90;

nav {
  $width: 100px;
  width: $width; /* $width 只能在 nav 內部使用，聲明時不限位置，引用時受限與聲明時的位置 */
  color: $nav-color;
}
複製代碼

變量引用

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

$highlight-border: 1px solid $highlight-color;
.selected {
  border: $highlight-border;
}
複製代碼

變量名

/* 下劃線中劃線通用 */
$link-color: blue;
a {
  color: $link_color;
}
複製代碼

嵌套CSS 規則

/* 下劃線中劃線通用 */
#content {
  article {
    h1 { color: #333 }
    p { margin-bottom: 1.4em }
  }
  #content 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 }
複製代碼

羣組選擇器的嵌套

nav, aside {
  a {color: blue}
}

/* 編譯後 */
article a { color: blue }
article a:hover { color: red }
複製代碼

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

article > section { border: 1px solid #ccc } /* 直接子元素選擇器> */
header + p { font-size: 1.1em } /* 同層相鄰組合選擇器+ */
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 }
}
複製代碼

嵌套屬性

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

nav {
  border: 1px solid #ccc;
  border-left: 0px;
  border-right: 0px;
}
複製代碼

導入文件

使用SASS部分文件

/* 無太大差異 */
@import './base.scss'
複製代碼

默認變量值

/* 反覆聲明一個變量，只有最後一處聲明有效且它會覆蓋前邊的值 */
$link-color: blue;
$link-color: red;
a {
    color: $link-color; /* red */
}

/* default 若是有重複聲明則會阻止重複聲明 */
$link-color: blue;
$link-color: red !default;
a {
    color: $link-color; /* blue */
}
複製代碼

嵌套導入

/* _blue-theme.scss */
aside {
  background: blue;
  color: white;
}
複製代碼

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

/* 至關於 */
.blue-theme {
  aside {
    background: blue;
    color: #fff;
  }
}
複製代碼

原生的CSS導入

原生的 css 也有 @import 但這直接寫在文件中的一段代碼，瀏覽器解析
css 文件時，遇到了 @import 會暫停繼續解析後面的代碼轉而去向服務
器發起一個請求，因此在 .scss 文件中 @import './xxx.css' 會被當成
原生 css 的 @import，若是你想用 sass 的導入，就必須把你的文件
改爲 xxx.scss