帶你走入 SASS (進階篇)

昨天初步介紹了一些關於SASS的基礎知識，今天就來分享一些更深層次的東西。

關於後綴

昨天又跟大家提到一個點，就是關於後綴名的，SASS文件又兩種後綴，分別是.sass和.scss，那麼它們之間又什麼區別呢？我們來看一下下面的代碼：

// 後綴為 sassnndivnn color: blacknn font-size: 16pxnnpnn font-size: 12pxn

// 後綴為 scssnndiv {nn color: black;nn font-size: 16pxnn}nnp {nn font-size: 12px;nn}n

從上面兩個代碼片段大家應該可以看出差別，前者不使用大括弧和分號，而後者和我們平時寫的 CSS格式一樣，所以這也是為什麼我在上一篇文章中建議大家用.scss來作為後綴名的原因。

關於導入

在CSS和SASS中都可以使用@import，但在編譯的時候SASS會將@import進來的SASS文件合成進來只生成一個文件。但是有一點需要注意的是，如果你在SASS文件中導入CSS文件，那麼效果會跟普通的CSS導入一樣，不會被合併到編譯後的文件中，還是以@import的形式存在。

還有一個小 Tips 就是在SASS中引入其他SASS文件時，可以忽略後綴名。

// default.scssnndiv {nn font-size: 12px;nn}n

@import "default";nnp {nn color: gray;nn}n

關於注釋

在普通的CSS文件中，我們一般用/* */來進行注釋，那麼在SASS中呢，還允許用雙斜杠//來為代碼進行注釋，但是這種注釋不會被轉譯。

/*nn* 這裡是注釋nn*/nn// 還可以這樣注釋nnp {nn font-size: 12px;nn}n

關於變數

在上一篇分享中給大家介紹了SASS是可以自定義變數的，關於變數，還有一些是大家要知道的。

默認變數

在變數值後面加上!default即可定義默認變數。

$defaultSize: 12px !default;nndiv {nn font-size: $defaultSize;nn}n

一般來說，默認變數是用來設定默認值得，但是有時候我們需要其他的值，那麼我們就可以在默認變數聲明之前聲明變數即可完成覆蓋。

$defaultSize: 16px;nn$defaultSize: 12px !default;nndiv {nn font-size: $defaultSize;nn}n

特殊變數

在SASS中是可以進行四則運算的，如果我們需要用自定義的變數來進行運算，我們就需要用#{$xxxxx}的形式來使用。

$defaultWidth: 200px !default;nn$defaultHeight: 800px !default;nndiv {nn height: #{$defaultHeight} / #{$defaultWidth};nn}n

多值變數

多值變數分兩種，一種是list類型，一種是map類型，分別對應的是數組和對象。

// list 類型nn$defaultSize: 5px 10px 15px 20px;nn// map 類型nn$defaultHeight: (h1: 20px, h2: 15px, h3: 10px, h4: 5px);n

關於多值變數的使用，主要是使用SASS內置的一些函數，如果有同學感興趣可以去官方文檔查閱。

關於繼承

SASS是可以繼承的，這一點在昨天是有提到過的，關於繼承，還有一個點需要注意，那就是佔位選擇器：%。

使用佔位選擇器的好處在於如果不調用這個預定義的樣式的話，就不會有這個樣式出現在最後生成的CSS樣式中。

%default {nn font-size: 12px;nn color: black;nn}nndiv {nn p {nn @extend %default;nn background: gray;nn }nn}n

關於判斷和循環

在SASS中既然可以使用函數，那麼循環判斷也肯定是可以使用的。

@if可以單獨使用，也可以和@else結合使用。

// 簡單的判斷nn$flag: true;nndiv {nn width: 800px;nn height: 1000px;nn @if $flag {nn background: green;nn }nn}n

三目判斷

// 三目判斷nn// 這裡的結果是10px;nn$flag: true;nndiv {nn font-size: if($flag, 10px, 20px); nn}n

for循環

看個簡單的例子：

@for $i from 1 through 5 {nn .item-#{$i} {nn width: 10px * $i;nn }nn}nn@for $i from 1 to 5 {nn item-#{$i} {nn width: 10px * $i;nn }nn}n

這兩種方式的區別在於through包括 5 而to不包括。

@each循環

同樣是一個例子：

$defaultValue: 1 2 3 4;nn@each $default in $defaultValue {nn .item-#{$default} {nn color: green;nn }nn}n

通過上面這個例子來看的話很容易就可以理解了。

關於SASS的進階篇的內容就到這裡，希望能給學習前端的同學一些幫助。

本文同步發佈於同名微信公眾號：Wecode365，有興趣的同學可以關注一下。