1.sass(scss->sass第三代)

Sass3 ->?Scss(Sassy CSS),SCSS(Sassy CSS) 是 CSS 語法的擴展.

2.scss注釋

Sass 支持標準的 CSS 多行注釋?/* */，以及單行注釋?//，前者會 被完整輸出到編譯后的 CSS 文件中，而后者則不會

3.scss定義變量

Variables:?$

全局變量與局部變量

?

關于scss變量類型,我們看官網給的:

4.scss引入

5.混合指令 (Mixin Directives)

?定義混合指令?@mixin和?引用混合樣式?@include:

傳參方式:

還可以了解一下一下官網提及的情況:

有時，不能確定混合指令需要使用多少個參數，比如一個關于?box-shadow?的混合指令不能確定有多少個 'shadow' 會被用到。這時，可以使用參數變量?…?聲明（寫在參數的最后方）告訴 Sass 將這些參數視為值列表處理：

6.scss繼承@extend

7.對比混合指令和繼承

混合模式下產生的代碼冗余比較多.

@mixin?和?@include?更側重于定義和復用一組樣式，而?@extend?更側重于樣式的繼承和擴展。

@mixin?和?@include?的優點包括：

• 可以傳遞參數，實現更復雜的樣式定制。
• 對于不相關的樣式組合，更具組織性和可讀性。

@extend?的優點包括：

• 減少代碼重復，尤其是在類之間有相似樣式時。
• 更直觀地表達樣式之間的繼承關系。

8.scss運算符基本使用

這里自己參考一下文檔就行了哈

Sass教程 Sass中文文檔 | Sass中文網

9.scss函數

①color:

? //顏色變亮lighten($color,$amount(0-100%))

? //顏色變暗darken($color,$amount(0-100%))

? //降低透明度opacify($color,$amount(0-1))

10.scss@use和@forward

高級版@import和export