Sass 和 SCSS 其實(shí)是同一種東西,我們平時(shí)都稱(chēng)之為 Sass,兩者之間不同之處有以下兩點(diǎn):
先來(lái)看一個(gè)示例:
Sass 語(yǔ)法
$font-stack: Helvetica, sans-serif //定義變量 $primary-color: #333 //定義變量 body font: 100% $font-stack color: $primary-color
SCSS 語(yǔ)法
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
編譯出來(lái)的 CSS
body { font: 100% Helvetica, sans-serif; color: #333; }
提示:小伙伴們可以看出來(lái),我們的右側(cè)代碼使用的是 SCSS 語(yǔ)法方式(我們的代碼編輯器不支持 Sass 語(yǔ)法方式噢?。?。
編寫(xiě)第一個(gè)".scss"文件,在編輯器的第一行和第二行定義一個(gè)變量,并在body中調(diào)用對(duì)應(yīng)變量來(lái)設(shè)置body大小尺寸?
body {
width: 200px;
height: 300px;
}
設(shè)置一個(gè)變量$width和$height
參考代碼:
$width: 200px; $height: 300px; body { width: $width; height: $height; }
請(qǐng)驗(yàn)證,完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多,請(qǐng)先驗(yàn)證,完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)