Sass和Scss 常用功能

sass和scss其實是一樣的css預處理語言，scss是sass3引入新的語法，其字尾名為.scss。sass版本3.0之前的字尾名為.sass，而版本3.0之後的字尾名.scss。兩者是有不同的，繼sass之後scss的編寫規範基本和css一致，sass時代是有嚴格的縮排規範並且沒有"{}"和";"，sass使用縮排代替花括號，使用換行代替分號。而scss則使用"{}"和";"。

建立好如下所示的scss資料夾，並在index1所在終端執行sass --watch scss/index.scss css/index.css就行，此命令會將scss檔案編譯成對應名字的css檔案，並儲存在css資料夾下面

scss使用$符號來標識變數，我們可以把反覆使用的css屬性值定義成變數，之後直接使用該變數就行了。

$mycolor: red;
h1 p

（1）父選擇器大多數情況下，使用簡單的巢狀規則都沒有問題，但是有些場景不行。比如想要在巢狀的選擇器裡面使用乙個類似 :hover 的偽類。為了解決這種以及其他情況，sass提供了乙個特殊結構 &。

$mycolor: red;
p }

（2）巢狀屬性很多 css 屬性都有同樣的字首，例如：font-family, font-size 和 font-weight ， text-align, text-transform 和 text-overflow。在 sass 中，可以使用巢狀屬性來編寫它們。

巢狀屬性的規則是這樣的：把屬性名從中劃線-的地方斷開，在根屬性後邊新增乙個冒號:，緊跟乙個塊，把子屬性部分寫在這個塊中：

p
}

（1）partialssass中的 @import 可以讓我們在乙個scss檔案中包含其他的scss檔案，最後編譯成乙個css檔案。這樣，我們就可以把專案中用到的樣式分割成很多小的部分，最後通過@import包含進來。這些小的部分被稱為partials，它們不會被編譯成css檔案。這有助於我們將樣式模組化。partials檔案以下劃線開頭，在匯入語句中不需要新增下劃線。

sass提供了乙個@import規則，在生成css檔案時就把相關檔案匯入進來；而css中@import引用的css要等頁面載入完後最後載入。

//匯入另乙個scss檔案
@import "public";

我們可以定義@mixin混合器實現大段樣式的重用，它還支援我們動態傳參；在樣式表中通過@include來使用這個混合器

// 大段重複的樣式用混合器
@mixin myfont($color, $fontsize) 
&:hover 
}//使用
a

Sass和Scss 常用功能

sass和scss的區別

使用 Nginx 編譯 Sass 和 Scss

SAP常用功能

Sass和Scss 常用功能

sass和scss的區別

使用 Nginx 編譯 Sass 和 Scss

SAP常用功能

相關推薦