新建一個檔案夾，創建一個檔案命名為demo.scss，保存后可以看到會自動編譯
sass變數和參考：
demo.scss
$width:300px; $height:300px; $bgcolor:#abcdef; div{ width:$width; height:$height; background-color:$bgcolor; }
編譯后demo.css
!default 表示默認值，后續會被同名變數覆寫
字串變數，拼接用逗號
編譯后
字串不加引號也是可以的
編譯后
#{} 插值
編譯后
#{} 基本可以用在任何地方，比如選擇器
編譯后
sass變數作用域：
以花括號包裹住的為作用域
外部無法訪問內部定義的變數，內部可以使用外部定義的變數
報錯
import的用法：
以下四種情況，import匯入將不會被編譯
如：
編譯后：
正常情況下如何使用sass import：
演示如下：
新建一個基礎檔案 _base.scss
在某個scss檔案中引入_base.scss
編譯后
import出現在不同的位置，則引入的檔案也會出現在相對應的位置
當出現同名變數時，由于import位置不同，可能存在被覆寫的情況
如果不想受到import位置的影響，可以借助 !default 默認值的方法
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/55519.html
標籤：Html/Css