2019獨(dú)角獸企業(yè)重金招聘Python工程師標(biāo)準(zhǔn)>>>

@import、@media、@extend

Sass 支持所有的 CSS3 @-Rules，以及 Sass 特有的 “指令”（directives）。

@import

Sass 拓展了?@import?的功能，允許其導(dǎo)入 SCSS 或 Sass 文件。被導(dǎo)入的文件將合并編譯到同一個(gè) CSS 文件中，另外，被導(dǎo)入的文件中所包含的變量或者混合指令 (mixin) 都可以在導(dǎo)入的文件中使用。

通常，@import?尋找 Sass 文件并將其導(dǎo)入，但在以下情況下，@import?僅作為普通的 CSS 語(yǔ)句，不會(huì)導(dǎo)入任何 Sass 文件。

·?文件拓展名是?.css；

·?文件名以?http://?開(kāi)頭；

·?文件名是?url()；

·?@import?包含 media queries。

分音 (Partials)

如果需要導(dǎo)入 SCSS 或者 Sass 文件，但又不希望將其編譯為 CSS，只需要在文件名前添加下劃線，這樣會(huì)告訴 Sass 不要編譯這些文件，但導(dǎo)入語(yǔ)句中卻不需要添加下劃線。

例如，將文件命名為?_colors.scss，便不會(huì)編譯?_colours.css?文件。

注意，不可以同時(shí)存在添加下劃線與未添加下劃線的同名文件，添加下劃線的文件將會(huì)被忽略。

嵌套 @import

大多數(shù)情況下，一般在文件的最外層（不在嵌套規(guī)則內(nèi)）使用?@import，其實(shí)，也可以將?@import?嵌套進(jìn) CSS 樣式或者?@media?中，與平時(shí)的用法效果相同，只是這樣導(dǎo)入的樣式只能出現(xiàn)在嵌套的層中。

?

@media

Sass 中?@media?指令與 CSS 中用法一樣，只是增加了一點(diǎn)額外的功能：允許其在 CSS 規(guī)則中嵌套。如果?@media?嵌套在 CSS 規(guī)則內(nèi)，編譯時(shí)，@media?將被編譯到文件的最外層，包含嵌套的父選擇器。這個(gè)功能讓?@media?用起來(lái)更方便，不需要重復(fù)使用選擇器，也不會(huì)打亂 CSS 的書(shū)寫(xiě)流程。

@media?的 queries 允許互相嵌套使用，編譯時(shí)，Sass 自動(dòng)添加?and

@media screen {.sidebar {@media (orientation: landscape) {width: 500px;}}}編譯為@media screen and (orientation: landscape) {.sidebar {width: 500px; } }

?

@extend

@extend?的作用是將重復(fù)使用的樣式延伸 (extend) 給需要包含這個(gè)樣式的特殊樣式:

.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; }

?

@extend-Only 選擇器 (@extend-Only Selectors)

(占位符%)有時(shí)，需要定義一套樣式并不是給某個(gè)元素用，而是只通過(guò)?@extend?指令使用，尤其是在制作 Sass 樣式庫(kù)的時(shí)候，希望 Sass 能夠忽略用不到的樣式。

// This ruleset won't be rendered on its own. #context a%extreme {color: blue;font-weight: bold;font-size: 2em; } 占位符選擇器需要通過(guò)延伸指令使用，用法與 class 或者 id 選擇器一樣，被延伸后，占位符選擇器本身不會(huì)被編譯。 .notice {@extend %extreme; } 編譯為 #context a.notice {color: blue;font-weight: bold;font-size: 2em; }

?

轉(zhuǎn)載于:https://my.oschina.net/u/3412211/blog/1550798

總結(jié)

以上是生活随笔為你收集整理的Sass--@-Rules的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。