無法編譯的Sass導入

在sass中，導入的方式是使用import命令。我將使用Zurb基金會作爲一個例子：無法編譯的Sass導入

@import "foundation";

這將隨後導入整個foundation.scss文件和所有它的相對導入到當前文件的頂部。這意味着整個foundation.scss文件將被編譯並與文件內容一起輸出到最終的<name here>.css文件。

雖然這對自定義顏色和間距等自定義很好，但在創建庫和將這些庫作爲單獨的水滴分發給其他人插入其現有項目時，這會變得非常痛苦。

有沒有一種方法導入文件作爲「參考」，使mixins和其他變量在當前文件的範圍變得可用，但其他的CSS語句將被忽略？ LESS css預處理器具有與此類似的新實現的導入標記（適當地命名爲reference）。

來源

2013-11-25 user3030670

創建一個像'_subfile.scss'這樣的子文件，在那裏編寫代碼並將其導入到主文件中。易於維護。 –

@VivekVikranth然後我會如何將它打包發佈（供最終用戶使用）？ – user3030670

[Sass partial imported]的可能重複（http://stackoverflow.com/questions/14122316/sass-partial-importing） – cimmanon

考慮看看基金會演示了一個好方法是：

https://github.com/zurb/bower-foundation/blob/master/scss/foundation/components/_breadcrumbs.scss

在這裏，他們必須在文件的頂部一個@import "global";。

這後面是一堆混入

的

在底部，他們有：

@include exports("breadcrumbs") { 
    @if $include-html-nav-classes { 
    .breadcrumbs { 
     @include crumb-container; 
     @include radius($crumb-radius); 

     &>* { 
     @include crumbs; 
     } 
    } 
    } 
}

的$include-html-nav-classes默認情況下，在_global.scss文件設置爲true。通過將其更改爲false，可以在任何其他文件中覆蓋它。這可以讓你使用mixins並生成html。

如果你不需要生成任何CSS只包含mixins，它會簡化你的情況。我相信他們這樣做是爲了允許快速定製和優化輸出的CSS。

來源

2013-11-25 21:29:37 JAMESSTONEco

實際上，Foundation方法是*糟糕的*，不應該被模仿。沒有人推薦以這種方式創作CSS庫，因爲它並不比它需要更復雜。發佈CSS的代碼應該與mixin，變量等分開。 – cimmanon

查找*任何*此時，指南針擴展是一項非常困難的任務。大多數可以找到的擴展都是純粹的* building block *風格（即，它們只包含變量，函數和混合類：時髦按鈕，模塊化等等）。像重置和規範化的擴展遠不那麼常見。 Foundation和Bootstrap是我能夠找到的唯一擴展，它將CSS *和*它們的基本構建塊封裝在一起，而不會隔離。 – cimmanon

這是一個很好的問題，我同意這個答案中的基礎方法是一種代碼異味。理想情況下，Sass語言會有一個特殊的導入指令（例如「@importReference」），以便在不寫入CSS的情況下導入文件。這在母版頁鏈接Global的母版頁場景中會很有用（並且直觀）。css文件，然後子頁面鏈接到可能使用母版頁CSS文件引用的特定於子文件的CSS文件（如果Global.css較大，並且應跨多個頁面緩存而不是合併到一個CSS文件中，則可能有意義）。 –

無法編譯的Sass導入

回答

相關問題