sass入門

文件後綴名

sass有兩種後綴名文件，一種是sass，不使用大括號和分號,一種是scss,使用大括號和分號.建議使用後綴名爲scss的文件，以避免sass後綴名的嚴格格式要求報錯。
可以用sass-convert轉換兩種文件

# 將 Sass 轉換爲 SCSS
$ sass-convert style.sass style.scss

# 將 SCSS 轉換爲 Sass
$ sass-convert style.scss style.sass

導入

@import 'reset'或@import 'reset.scss'會合並，@import 'reset.css'和普通css一樣不會合並

註釋

sass有兩種註釋方式，一種是標準的css註釋方式/* */，另一種則是//雙斜杆形式的單行註釋，不過這種單行註釋不會被轉譯出來。

變量

sass的變量必須是$開頭，後面緊跟變量名，而變量值和變量名之間就需要使用冒號(:)分隔開（就像CSS屬性設置一樣），如果值後面加上!default則表示默認值。

特殊變量

一般我們定義的變量都爲屬性值，可直接使用，但是如果變量作爲屬性或在某些特殊情況下等則必須要以#{$variables}形式使用。

//應用於class和屬性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//應用於複雜的屬性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}