我正在使用Zurb Foundation 4(S)CSS框架,并且遇到了大量重复样式的问题。这是因为在每一个文件,我@import 'foundation'在,从基金会的所有样式也导入(对于规则body,.row,.button和朋友)。由于所有Zurb的样式都被声明为四到五次,因此这会导致SCSS编译时间长,并且难以在Chrome中浏览Web开发者控制台。
@import 'foundation'
body
.row
.button
为了减轻这种情况,我创建了一个globalsscss文件,其中包含Foundation使用的可覆盖变量(从中复制粘贴foundation_and_overrides.scss,然后foundation_and_overrides导入全局变量)。仅导入globals.scss文件将避免重复,仅在不使用Foundation mixins的文件中。
globals
foundation_and_overrides.scss
foundation_and_overrides
globals.scss
正是在使用Foundation mixins的文件中:是否可以仅从SCSS文件中导入mixins,而不导入具体的Foundation样式?
进口是全有还是全无。文件中的所有内容都是您得到的。但是,如果您查看Foundation的来源,则可以修改一些变量,这些变量将禁止显示样式(例如,在button中,设置$include-html-button-classes为false将禁用样式)。该设计模式是特定于Foundation的,您不能期望以此方式创作其他库。
$include-html-button-classes
当通过导入基础时@import"foundation",您将导入以下文件:。如您所见,它将导入其他文件。如果您不需要所有内容,则不必导入此文件:只需导入所需的特定文件(例如@import'foundation/components/side-nav',仅用于side-nav文件)。
@import"foundation"
@import'foundation/components/side-nav'