SASS的基本語法

了解 sass

sass是 css 的預編譯語言，可以把檔案編譯成 css 檔案。

sass可以定義變數、可以定義函式、可以有 if 語句可以有 for 迴圈語句，能使你敲**的速度的變得更高更快更強。

.sass 檔案和 .scss 檔案的區別

+ 在 .scss 檔案裡面和寫 css 的語法基本一致

+ 在 .sass 檔案裡面就沒有大括號和分號, 全部依靠縮進來維持關係

+ 這兩個檔案被編譯成 css 檔案以後是一樣的

sass的安裝

sass 的變數

在 sass 裡面定義乙個變數，一次定義多次使用

語法: $名字: 值;

注意:你的變數名是 $名字，值不需要引號

使用: 直接使用變數名即可，只要變數的值修改了，那麼所有使用這個變數的位置就都修改了

例：

// 定義了三個叫做 $color、$fs、$border 的變數
$color: green;
$fs:
30px;
$border:
10px solid #333
;div 
p a

效果：

div

p a

sass 的條件分支語句

其實就是

依賴於變數使用

// 準備乙個變數
$type: c;
div 
}p  @else
}h1  @else
if $type == b  @else
if $type == c 
}

效果：

div

p h1

sass 的迴圈語句

例：

/* for 迴圈 */
// 這個迴圈的數字變化是 1 2, 不包含 3
@for $i from
1 to 3)}
// 這個迴圈的數字變化是 1 2 3
@for $i from
1 through 3
)}

/* each 迴圈 */
$colorarr:(1
, red),(
2, green),(
3, skyblue),(
4, purple),(
5, orange),(
6, yellow)
;li 
@each $index, $color in $colorarr 
)}

效果：

/* each 迴圈 */
li li:nth-
child(1
)li:nth-
child(2
)li:nth-
child(3
)li:nth-
child(4
)li:nth-
child(5
)li:nth-
child(6
)

sass選擇器巢狀

sass的選擇器巢狀和 html 一樣讓選擇器也有乙個上下級的關係

後代選擇器巢狀

語法: 父級 }

子代選擇器巢狀

語法: 父級 }

連字元選擇器巢狀

偽類選擇器和偽元素選擇器巢狀

當你需要的偽類和偽元素和選擇器連線在一起的時候

使用 & 連線符操作

語法: 選擇器 }

群組選擇器的巢狀(使用太少)

語法: 群組選擇器 }

語法: 選擇器 }

語法: 群組選擇器 }

例：

/* 1. 後代選擇器巢狀 */
div }}
}/* 2. 子代選擇器巢狀 */
div 
}    a 
}  ul 
> ol 
}/* 3. 連字元選擇器巢狀 */
div &:
:before 
}li 
&:nth-
child(2
)}p }
/* 4. 群組選擇器巢狀 */
.box1,
.box2,
.box3 
}div 
}.box1,
.box2 
}

效果：

/* 1. 後代選擇器巢狀 */ div div p div p span div p span a /* 2. 子代選擇器巢狀 */ div div > p div > p > span div > p > span i div > p a div ul div > ol /* 3. 連字元選擇器巢狀 */ div div:hover div: :before li:nth- child(1 )li:nth- child(2 )p p.active /* 4. 群組選擇器巢狀 */ .box1, .box2, .box3 .box1 p, .box2 p, .box3 p div div .box1, div .box2, div .box3 .box1, .box2 .box1 .list1, .box1 .list2, .box2 .list1,

.box2 .list2

sass的屬性巢狀例：

div 
;  margin:;}
p ;}span 
;}

效果：

div

p span

sass混合器

類似於 js 裡面的函式

js 的函式 function 函式名(形參) {}

例：

/* 使用方式一 */ // 先準備乙個混合器 // 不使用的時候是不會被編譯的 @mixin transition div h1 /* 使用方式二 */ // 在定義混合器的時候設定幾個引數 // 由呼叫的時候傳遞的實參決定 @mixin transition ($t, $p, $d, $tf) div p /* 使用方式三 */ // 在定義混合器的時候可以傳遞乙個引數預設值 // 如果傳遞了實參, 就用傳遞的 // 如果沒有傳遞實參, 那麼就是用預設值 @mixin transition ($t: 1s, $p: all, $d: 0s, $tf: linear) div p h1

h4

效果：

/* 使用方式一 */ div h1 /* 使用方式二 */ div p /* 使用方式三 */ div p h1

h4

sass的繼承

就是使用另乙個規則集的樣式

當你在寫乙個樣式的時候你發現和之前寫的乙個規則集的樣式一摸一樣，就把剛才寫的直接拿下來

div p .list #box

h5

效果：

div, p, .list p,.list .list

#box, h5

sass的匯入

就是把別的檔案拿到我這裡執行

平時開發的時候會寫乙個 base.css 的檔案： * 這樣的公共樣式檔案，這個公共樣式檔案每個 html 檔案都會引入，如果我們在公共檔案裡面把所有需要用到的變數都定義好，那你再寫每乙個檔案的時候只要匯入這個 base.scss 就有了公共樣式和這些變數了。

匯入的語法: 語法: @import 「你要匯入的檔名稱」;

專門定義乙個 variable.scss 的檔案，這裡專門就寫所有的變數

專門定義乙個 mixin.scss的檔案，這裡面專門就寫所有的混合器

例：

// 匯入解釋sass變數的那個檔案 @import "./01_變數.scss"

;h1

效果：

div p a

h1

家中逆戰，無畏疫情，武漢加油，中國加油，人類必勝！！！

指導老師：郭翔

SASS的基本語法

Sass語法一基本用法

Sass安裝及基本語法

sass的高階語法

SASS的基本語法

Sass語法 一 基本用法

Sass安裝及基本語法

sass的高階語法

相關推薦

Sass語法一基本用法