I'm using the Zurb Foundation 4 (S)CSS framework, and I'm running into an issue of massively duplicated styles. This is because in every file that I @import 'foundation' in, all styles from Foundation are also imported (rules for body, .row, .button and friends). This leads to long SCSS compile times, and a hard to navigate web developer console in Chrome, as all of Zurb's styles are declared four or five times.
我正在使用Zurb Foundation 4 (S)CSS框架，我遇到了大量重复样式的问题。这是因为在我@import 'foundation'的每个文件中，也导入了foundation中的所有样式(body、.row、.button和friends的规则)。这导致了长时间的SCSS编译时间，并且很难在Chrome中导航web开发人员控制台，因为Zurb的所有样式都声明了四到五次。
To mitigate this, I've created a globals scss file, which contains the overrideable variables that Foundation uses (it's copy-pasted from foundation_and_overrides.scss, then foundation_and_overrides import globals). Importing just the globals.scss file gets rid of duplication only in files that don't make use of Foundation mixins.
为了缓解这一问题，我创建了一个globals scss文件，其中包含Foundation使用的可重写变量(它是从foundation_and_overrides中复制粘贴过来的)。scss，然后foundation_and_overrides)。导入全局。scss文件只在不使用Foundation mixin的文件中消除重复。
It's in the files which make use of Foundation mixins: Can I import only the mixins from an SCSS file, without importing the concrete Foundation styles?
在使用Foundation mixin的文件中:我能否只从SCSS文件导入mixin，而不导入具体的Foundation样式?
2 个解决方案
#1
12
Imports are an all or nothing thing. Everything that's in the file is what you get. If you look through the source of Foundation, though, there are variables you can modify that will suppress emitting styles (eg. in buttons, setting $include-html-button-classes to false will disable the styles). This design pattern is Foundation specific, you cannot expect other libraries to be authored this way.
进口是一个全或无的东西。文件中的所有内容都是你得到的。但是，如果您查看Foundation的源代码，您可以修改一些变量，这些变量将抑制发出样式(例如。在按钮中，将$include-html-button-classes设置为false将禁用样式)。此设计模式是特定于Foundation的，您不能期望以这种方式编写其他库。
When you import foundation via @import "foundation", you're importing this file: https://github.com/zurb/foundation/blob/master/scss/foundation.scss. As you can see, it imports other files. You don't have to import this file if you don't need everything: just import the specific file you want (eg. @import 'foundation/components/side-nav' for only the side-nav file).
当您通过@import“foundation”导入foundation时，您正在导入这个文件:https://github.com/zurb/foundation/blob/master/scss/foundation.scss。如您所见，它导入其他文件。如果您不需要所有文件，则不必导入该文件:只需导入您想要的特定文件(如。@import“基础/组件/侧导航”只适用于侧导航文件。
#2
0
Have a look at _partial.scss in the doc
看一看_partial。scss的医生
https://sass-lang.com/guide
Partials You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.
可以创建包含少量CSS片段的部分Sass文件，这些文件可以包含在其他Sass文件中。这是一种很好的方式来模块化您的CSS，并帮助保持事情更容易维护。部分文件只是一个带有前导下划线的Sass文件。您可以将它命名为_partitional .scss。下划线让Sass知道该文件只是一个部分文件，不应该将其生成到CSS文件中。Sass partials与@import指令一起使用。
#1
12
Imports are an all or nothing thing. Everything that's in the file is what you get. If you look through the source of Foundation, though, there are variables you can modify that will suppress emitting styles (eg. in buttons, setting $include-html-button-classes to false will disable the styles). This design pattern is Foundation specific, you cannot expect other libraries to be authored this way.
进口是一个全或无的东西。文件中的所有内容都是你得到的。但是，如果您查看Foundation的源代码，您可以修改一些变量，这些变量将抑制发出样式(例如。在按钮中，将$include-html-button-classes设置为false将禁用样式)。此设计模式是特定于Foundation的，您不能期望以这种方式编写其他库。
When you import foundation via @import "foundation", you're importing this file: https://github.com/zurb/foundation/blob/master/scss/foundation.scss. As you can see, it imports other files. You don't have to import this file if you don't need everything: just import the specific file you want (eg. @import 'foundation/components/side-nav' for only the side-nav file).
当您通过@import“foundation”导入foundation时，您正在导入这个文件:https://github.com/zurb/foundation/blob/master/scss/foundation.scss。如您所见，它导入其他文件。如果您不需要所有文件，则不必导入该文件:只需导入您想要的特定文件(如。@import“基础/组件/侧导航”只适用于侧导航文件。
#2
0
Have a look at _partial.scss in the doc
看一看_partial。scss的医生
https://sass-lang.com/guide
Partials You can create partial Sass files that contain little snippets of CSS that you can include in other Sass files. This is a great way to modularize your CSS and help keep things easier to maintain. A partial is simply a Sass file named with a leading underscore. You might name it something like _partial.scss. The underscore lets Sass know that the file is only a partial file and that it should not be generated into a CSS file. Sass partials are used with the @import directive.
可以创建包含少量CSS片段的部分Sass文件，这些文件可以包含在其他Sass文件中。这是一种很好的方式来模块化您的CSS，并帮助保持事情更容易维护。部分文件只是一个带有前导下划线的Sass文件。您可以将它命名为_partitional .scss。下划线让Sass知道该文件只是一个部分文件，不应该将其生成到CSS文件中。Sass partials与@import指令一起使用。