4、SASS-導入指令跟擴展指令

4、導入指令跟擴展指令

@規則跟指令

@import

• Sass 擴展了 CSS @import規則，容許其導入 SCSS 或 Sass 文件。被導入的所有SCSS 或 Sass文件將一塊兒合併到同一個 CSS 文件中
• 被導入文件中所定義的任何變量或混入（mixins）均可以在主文件中使用
• 一般，@import 尋找 Sass 文件並將其導入，但在如下狀況下，@import 僅做爲普通的 CSS 語句，不會導入任何 Sass 文件:

1. 文件的擴展名是 .css
2. 文件名以 http:// 開始
3. 文件名是 url()
4. @import 中包含任何的媒體查詢

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
將所有編譯爲
@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);
複製代碼

• 沒有指定擴展名，Sass 將嘗試找到以.scss 或.sass爲擴展名的該名稱文件並導入

@import "foo.scss";或
@import "foo";
這兩行代碼都能導入文件foo.scss
複製代碼

• Sass 支持在一個 @import 規則中同時導入多個文件

@import "rounded-corners", "text-shadow";
複製代碼

Partials

• 若是你有一個 SCSS 或 Sass 文件要導入，但不但願將其編譯到一個CSS文件，你能夠在文件名的開頭添加一個下劃線

這將告訴Sass不要將其編譯到一個正常的CSS文件。而後，在導入語句中卻不須要添加下劃線

可能有一個命名爲 _colors.scss 的文件，可是不會編譯成 _colors.css 文件。你能夠這麼作 @import "colors"; 這樣， _colors.scss 將被導入。

注意，請不要將帶下劃線與不帶下劃線的同名文件放置在同一個目錄下，好比，_colors.scss 和 colors.scss 不能同時存在於同一個目錄下。不然帶下劃線的文件將會被忽略

@extend

• @extend 指令告訴 Sass 一個選擇器的樣式應該繼承另外一選擇器

.error { border: 1px #f00; background-color: #fdd; }
.seriousError { @extend .error; border-width: 3px; } 編譯爲：
.error, .seriousError { border: 1px #f00; background-color: #fdd; } .seriousError { border-width: 3px; }
複製代碼

.error { border: 1px #f00; background-color: #fdd; }
.error.intrusion { background-image: url("/image/hacked.png"); }
.seriousError { @extend .error; border-width: 3px; } 編譯爲：
.error, .seriousError { border: 1px #f00; background-color: #fdd; }
.error.intrusion, .seriousError.intrusion { background-image: url("/image/hacked.png"); }
.seriousError { border-width: 3px; }
複製代碼

• 多重擴展

.error { border: 1px #f00; background-color: #fdd; }
.attention { font-size: 3em; background-color: #ff0; }
.seriousError { @extend .error; @extend .attention; border-width: 3px; } 編譯爲：
.error, .seriousError { border: 1px #f00; background-color: #fdd; }
.attention, .seriousError { font-size: 3em; background-color: #ff0; }
.seriousError { border-width: 3px; }
複製代碼

• 鏈式擴展

.error { border: 1px #f00; background-color: #fdd; }
.seriousError { @extend .error; border-width: 3px; }
.criticalError { @extend .seriousError; position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%; } 編譯爲：
.error, .seriousError, .criticalError { border: 1px #f00; background-color: #fdd; }
.seriousError, .criticalError { border-width: 3px; }
.criticalError { position: fixed; top: 10%; bottom: 10%; left: 10%; right: 10%; }
複製代碼

• 選擇器序列

a { color: blue; &:hover { text-decoration: underline; } }
#fake-links .link { @extend a; } 將被編譯爲：
a, #fake-links .link { color: blue; }
.seriousError, .criticalError { border-width: 3px; }
a:hover, #fake-links .link:hover { text-decoration: underline; }
複製代碼