Sass 和 SCSS 其實是同一種東西,我們平時都稱之為 Sass,兩者之間不同之處有以下兩點:
1.文件擴展名不同,Sass 是以“.sass”后綴為擴展名,而 SCSS 是以“.scss”后綴為擴展名
2.語法書寫方式不同,Sass 是以嚴格的縮進式語法規則來書寫,不帶大括號({})和分號(;),而 SCSS 的語法書寫和我們的 CSS 語法書寫方式非常類似。
先來看一個示例:
Sass 語法
$font-stack: Helvetica, sans-serif //定義變量
$primary-color: #333 //定義變量
body
font: 100% $font-stack
color: $primary-color
SCSS 語法
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
編譯出來的 CSS
body {
font: 100% Helvetica, sans-serif;
color: #333;
}