scss-@import


  css有一個特別不常用的特性,即@import規則,它允許在一個css文件中導入其他css文件。然而,后果是只有執行到@import時,瀏覽器才會去下載其他css文件,這導致頁面加載起來

特別慢。

  scss也有一個@import規則,但不同的是,scss@import規則在生成css文件時就把相關文件導入進來。這意味着所有相關的樣式被歸納到了同一個css文件中,而無需發起額外的下載

請求。另外,所有在被導入文件中定義的變量和混合器(參見2.5節)均可在導入文件中使用。

  使用scss@import規則並不需要指明被導入文件的全名。你可以省略.sass.scss文件后綴(見下圖)。這樣,在不修改樣式表的前提下,你完全可以隨意修改你或別人寫的被導入的

scss樣式文件語法,在sassscss語法之間隨意切換。舉例來說,@import"sidebar";這條命令將把sidebar.scss文件中所有樣式添加到當前樣式表中。

  一、使用SCSS部分文件

  當通過@importscss樣式分散到多個文件時,你通常只想生成少數幾個css文件。那些專門為@import命令而編寫的scss文件,並不需要生成對應的獨立css文件,這樣的scss文件稱

為局部文件。對此,sass有一個特殊的約定來命名這些文件。

  此約定即,scss局部文件的文件名以下划線開頭。這樣,scss就不會在編譯時單獨編譯這個文件輸出css,而只把這個文件用作導入。當你@import一個局部文件時,還可以不寫文件

的全名,即省略文件名開頭的下划線。舉例來說,你想導入themes/_night-sky.scss這個局部文件里的變量,你只需在樣式表中寫@import "themes/night-sky";

  局部文件可以被多個不同的文件引用。當一些樣式需要在多個頁面甚至多個項目中使用時,這非常有用。在這種情況下,有時需要在你的樣式表中對導入的樣式稍作修改,scss有一

個功能剛好可以解決這個問題,即默認變量值。

  二、默認變量值

  一般情況下,你反復聲明一個變量,只有最后一處聲明有效且它會覆蓋前邊的值。舉例說明:


$link-color: blue; $link-color: red; a
{   color: $link-color; }

  在上邊的例子中,超鏈接的color會被設置為red。這可能並不是你想要的結果,假如你寫了一個可被他人通過@import導入的sass庫文件,你可能希望導入者可以定制修改sass庫文件

中的某些值。使用sass!default標簽可以實現這個目的。它很像css屬性中!important標簽的對立面,不同的是!default用於變量,含義是:如果這個變量被聲明賦值了,那就用它聲明

的值,否則就用這個默認值。

$fancybox-width: 400px !default;
.fancybox {
width: $fancybox-width;
}

  在上例中,如果用戶在導入你的sass局部文件之前聲明了一個$fancybox-width變量,那么你的局部文件中對$fancybox-width賦值400px的操作就無效。如果用戶沒有做這樣的聲明,

$fancybox-width將默認為400px

  三、嵌套導入

  跟原生的css不同,scss允許@import命令寫在css規則內。這種導入方式下,生成對應的css文件時,局部文件會被直接插入到css規則內導入它的地方。舉例說明,有一個名為_blue-

theme.scss的局部文件,內容如下

.aside {
  background: blue;
  color: white;
}

  然后把它導入到一個CSS規則內,如下所示:

.blue-theme {@import "blue-theme"}

//生成的結果跟你直接在.blue-theme選擇器內寫_blue-theme.scss文件的內容完全一樣。

.blue-theme {
  .aside {
    background: blue;
    color: #fff;
  }
}

  被導入的局部文件中定義的所有變量和混合器,也會在這個規則范圍內生效。這些變量和混合器不會全局有效,這樣我們就可以通過嵌套導入只對站點中某一特定區域運用某種顏色

主題或其他通過變量配置的樣式。

  有時,可用css原生的@import機制,在瀏覽器中下載必需的css文件。scss也提供了幾種方法來達成這種需求。

  四、原生的CSS導入

  由於scss兼容原生的css,所以它也支持原生的CSS@import。盡管通常在scss中使用@import時,sass會嘗試找到對應的scss文件並導入進來,但在下列三種情況下會生成原生的  

CSS@import,盡管這會造成瀏覽器解析css時的額外下載:

  • 被導入文件的名字以.css結尾;
  • 被導入文件的名字是一個URL地址(比如http://www.sass.hk/css/css.css),由此可用谷歌字體API提供的相應服務;
  • 被導入文件的名字是CSS的url()值。

  這就是說,你不能用scss@import直接導入一個原始的css文件,因為scss會認為你想用css原生的@import。但是,因為scss的語法完全兼容css,所以你可以把原始的css文件改名

.scss后綴,即可直接導入了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM