Sass學習實踐筆記（五）

sass 支援所有 css3 的 @ 規則，以及一些 sass 專屬的規則，也被稱為「指令（directives）」。這些規則在 sass 中具有不同的功效，詳細解釋如下。

@import

sass 擴充套件了 css 的 @import 規則，讓它能夠引入 scss 和 sass 檔案。所有引入的 scss 和 sass 檔案都會被合併並輸出乙個單一的 css 檔案。另外，被匯入的檔案中所定義的變數或 mixins 都可以在主檔案中使用。

sass 會在當前目錄下尋找其他 sass 檔案，如果是 rack、rails 或 merb 環境中則是 sass 檔案目錄。也可以通過 :load_paths 選項或者在命令列中使用 --load-path 選項來指定額外的搜尋目錄。

@import 根據檔名引入。預設情況下，它會尋找 sass 檔案並直接引入，但是，在少數幾種情況下，它會被編譯成 css 的 @import 規則：

如果上述情況都沒有出現，並且副檔名是 .scss 或 .sass，該名稱的 sass 或 scss 檔案就會被引入。如果沒有副檔名， sass 將試著找出具有 .scss 或 .sass 副檔名的同名檔案並將其引入。

例如：

@import "foo.scss";

或

@import "foo";

兩者都將引入 foo.scss 檔案，而

@import "foo.css";
@import "foo" screen;
@import "";
@import url(foo);

將被編譯為：

@import "foo.css";
@import "foo" screen;
@import "";
@import url(foo);

也可以通過乙個 @import 引入多個檔案。例如：

@import "rounded-corners", "text-shadow";

將引入 rounded-corners 和 text-shadow 兩個檔案。

例如，你有乙個檔案叫做 _colors.scss。這樣就不會生成 _colors.css 檔案了，而且你還可以這樣做：

@import "colors";//不用加下劃線

來引入 _colors.scss 檔案。

注意，在同乙個目錄不能同時存在帶下劃線和不帶下劃線的同名檔案。例如， _colors.scss 不能與 colors.scss 並存。

巢狀 @import

雖然大部分時間只需在頂層檔案使用 @import 就行了，但是，你還可以把他們包含在 css 規則和 @media 規則中。

來看官網提供的乙個簡單示例：

假設要引入的樣式檔案`example.scss`檔案中包含這樣的**：

.example

然後這樣引用：

#main

編譯出來的 css：

#main .example

sass 中的 @media 指令和 css 的使用規則一樣的簡單，但它有另外乙個功能，可以巢狀在 css 規則中。有點類似 js 的冒泡功能一樣，如果在樣式中使用 @media 指令，它將冒泡到外面：

.sidebar 
}

編譯出來：

.sidebar 
@media screen and (orientation: landscape) }

@media 也可以巢狀 @media：

@media screen 
}}

此時編譯出來：

@media screen and (orientation: landscape)  }

在使用 @media 時，還可以使用外掛程式#{}:

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;
@media # and ($feature: $value) 
}

編譯出來的 css：

@media screen and (-webkit-min-device-pixel-ratio: 1.5)  }

sass 中的 @extend 是用來擴充套件選擇器或佔位符。比如：

.error

.error.intrusion

.seriouserror

被編譯為：

.error, .seriouserror

.error.intrusion, .seriouserror.intrusion

.seriouserror

詳細的可以回顧前面介紹的繼承樣式部分。

擴充套件選擇器：

@extend 不止擴充套件類選擇器，還可以擴充套件任何選擇器，比如 .special.cool, a:hover, 或 a.user[href^=「http://「]，例如：

.hoverlink

a:hover

編譯出來：

a:hover, .hoverlink

再來看乙個複雜點的：

.hoverlink

.comment a.user:hover

編譯出來的css

.comment a.user:hover, .comment .user.hoverlink

多個擴充套件

所設某個樣式要繼承多個地方的樣式，那麼可以使用 @extend 來繼承多個選擇器或佔位符的樣式，如：

.error

.attention

.seriouserror

編譯出來的css

.error, .seriouserror

.attention, .seriouserror

.seriouserror

擴充套件單一選擇器

前面我們知道 %placeholder 不使用@extend顯示呼叫是不會生成任何樣式**。那麼在選擇器中使用佔位符一樣。比如下面的**：

#context a%extreme

這段**在不呼叫之前不產生任何**，只有能過@extend呼叫之後才生成**：

.notice

編譯出來的css

#context a.notice

@at-root 從字面上解釋就是跳出根元素。當你選擇器巢狀多層之後，想讓某個選擇器跳出，此時就可以使用 @at-root：

.a 
}} 
}

編譯出來的css

.a .b

.a .b .c

@debug 在 sass 中是用來除錯的，當你的在 sass 的原始碼中使用了 @debug 指令之後，sass **在編譯出錯時，在命令終端會輸出你設定的提示 bug:

@debug 10em + 12em;

會輸出：

line 1 debug: 22em

@warn 和 @debug 功能類似，用來幫助我們更好的除錯 sass。如：

@mixin adjust-location($x, $y)  to be in pixels";
$x: 1px * $x;
} @if unitless($y) to be in pixels";
$y: 1px * $y;
} position: relative; left: $x; top: $y;
}

@error 和 @warn、@debug 功能是如出一轍。

@mixin error($x) @else if $x == 10  @else 值設定在10以內的數";
}}.test

編譯的時候：

你需要將15值設定在10以內的數 on line 7 at column 5

Sass學習實踐筆記（五）

Sass學習筆記

Sass學習筆記

Sass學習筆記。

Sass學習實踐筆記（五）

Sass學習筆記

Sass學習筆記

Sass學習筆記。

相關推薦