如何從Sass樣式表中僅導入變量和mixin？

Question

我正在使用Zurb Foundation 4（S）CSS框架，我遇到了大量重復樣式的問題。 這是因為在我@import 'foundation'每個文件中，也會導入Foundation中的所有樣式（ body ， .row ， .button和friends的規則）。 這導致SCSS編譯時間長，並且Chrome中的Web開發人員控制台難以導航，因為Zurb的所有樣式都被聲明了四到五次。

為了緩解這種情況，我創建了一個globals scss文件，其中包含Foundation使用的可重寫變量（它從foundation_and_overrides.scss復制粘貼，然后是foundation_and_overrides導入全局變量）。 僅導入globals.scss文件只能在不使用Foundation mixins的文件中刪除重復。

它位於使用Foundation mixins的文件中：我可以只導入SCSS文件中的mixins，而無需導入具體的Foundation樣式嗎？

Answer 1

進口是一個全有或全無的事情。 文件中的所有內容都是您得到的。 但是，如果查看Foundation的源代碼，可以修改一些可以抑制發光樣式的變量（例如，在按鈕中 ，將$include-html-button-classes為false將禁用樣式）。 此設計模式是特定於Foundation的，您不能指望以這種方式編寫其他庫。

當您通過@import "foundation"導入基礎時，您將導入以下文件： https ： //github.com/zurb/foundation/blob/master/scss/foundation.scss 。 如您所見，它會導入其他文件。 如果您不需要所有內容，則不必導入此文件：只需導入所需的特定文件（例如@ @import 'foundation/components/side-nav'僅用於side-nav文件）。

Answer 2

看一下doc中的_partial.scss

https://sass-lang.com/guide

部分您可以創建包含很少CSS片段的部分Sass文件，您可以將這些片段包含在其他Sass文件中。 這是模塊化CSS並幫助維護事物更容易的好方法。 partial只是一個以前導下划線命名的Sass文件。 您可以將其命名為_partial.scss。 下划線讓Sass知道該文件只是一個部分文件， 不應該生成CSS文件 。 Sass partials與@import指令一起使用。