Sass學習筆記

2021-08-28 21:54:24 字數 2063 閱讀 1541

1.宣告變數

宣告變數的符號「$」

變數名稱

賦予變數的值

(1)普通變數與預設變數

普通變數

定義之後可以在全域性範圍內使用。

預設變數

sass 的預設變數僅需要在值後面加上 !default 即可。

(2)區域性變數和全域性變數

2.宣告混合巨集

不帶引數混合巨集

@mixin border-radius
帶引數混合巨集

@mixin border-radius($radius:5px)
複雜的混合巨集:

@mixin box-shadow($shadow...)  @else

}

3.呼叫混合巨集

(1)呼叫不傳參的混合巨集

例如在你的樣式中定義了乙個圓角的混合巨集「border-radius」:

@mixin border-radius
在乙個按鈕中要呼叫定義好的混合巨集「border-radius」,可以這樣使用:

button
(2)呼叫傳參的混合巨集

比如:

@mixin border-radius($radius)
在混合巨集「border-radius」中定義了乙個不帶任何值的引數「$radius」。

在呼叫的時候可以給這個混合巨集傳乙個引數值:

.box
(3)[sass]混合巨集的引數--傳乙個帶值的引數

在 sass 的混合巨集中,還可以給混合巨集的引數傳乙個預設值,例如:

@mixin border-radius($radius:3px)
在混合巨集「border-radius」傳了乙個引數「$radius」,而且給這個引數賦予了乙個預設值「3px」。

在呼叫類似這樣的混合巨集時,會多有乙個機會,假設你的頁面中的圓角很多地方都是「3px」的圓角,那麼這個時候只需要呼叫預設的混合巨集「border-radius」:

.btn
(4)[sass]混合巨集的引數--傳多個引數

sass 混合巨集除了能傳乙個引數之外,還可以傳多個引數,如:

@mixin center($width,$height)
呼叫方法

.box-center
4.繼承

5.[sass]佔位符 %placeholder

%mt5 

%pt5

這段**沒有被 @extend 呼叫,他並沒有產生任何**塊,只是靜靜的躺在你的某個 scss 檔案中。只有通過 @extend 呼叫才會產生**:

//scss

%mt5

%pt5

.btn

.block

}

編譯出來的css

6.插值未完待續,我覺得入個門就行了

Sass學習筆記

安裝 2.開啟ruby的命令視窗 start command prompt with ruby 輸入gem install sass gem install sass pre 要安裝beta版本的 gem update sass 公升級sass vsass hgit安裝 git clone git ...

Sass學習筆記

1.全域性變數p background color color red span div2.default 第二種,使用前面定義的值 color red 變數申明帶有 default,但是前面還有這個變數的申明 color blue default p3.變數用 包裹 btnclass btn de...

Sass學習筆記。

定義 css預處理器定義了一種新的語言,其基本思想是,用一種專門的程式語言,為css增加了一些程式設計的特性,將css作為目標生成檔案,然後開發者就只要使用這種語言進行編碼工作。採用ruby語言編寫的一款css預處理語言 副檔名 sass 嚴格的縮排式語法 scss 與平時css語法書寫類似 scs...