How can one import only variables and mixins from Sass stylesheets?(如何从 Sass 样式表中只导入变量和 mixin?)
问题描述
我正在使用 Zurb Foundation 4 (S)CSS 框架,并且遇到了样式大量重复的问题.这是因为在我 @import 'foundation'
的每个文件中,Foundation 的所有样式也都被导入(body
、.row
的规则, .button
和朋友).这导致了较长的 SCSS 编译时间和在 Chrome 中难以导航的 Web 开发人员控制台,因为 Zurb 的所有样式都被声明了四到五次.
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.
为了缓解这种情况,我创建了一个 globals
scss 文件,其中包含 Foundation 使用的可覆盖变量(它是从 foundation_and_overrides.scss
复制粘贴的,然后 foundation_and_overrides
导入全局变量).仅导入 globals.scss
文件可以消除仅在不使用 Foundation mixin 的文件中的重复.
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.
在使用 Foundation mixin 的文件中:我可以只从 SCSS 文件中导入 mixins,而不导入具体的 Foundation 样式吗?
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 的源代码,您可以修改一些变量来抑制发射样式(例如,在 buttons,将 $include-html-button-classes
设置为 false 将禁用样式).此设计模式是 Foundation 特定的,您不能期望其他库以这种方式创作.
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.
当您通过 @import "foundation"
导入 Foundation 时,您正在导入此文件:https://github.com/zurb/foundation/blob/master/scss/foundation.scss.如您所见,它导入了其他文件.如果您不需要所有内容,则不必导入此文件:只需导入所需的特定文件(例如,@import 'foundation/components/side-nav'
仅用于侧面-导航文件).
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).
这篇关于如何从 Sass 样式表中只导入变量和 mixin?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!
本文标题为:如何从 Sass 样式表中只导入变量和 mixin?
基础教程推荐
- 我什么时候应该在导入时使用方括号 2022-01-01
- 有没有办法使用OpenLayers更改OpenStreetMap中某些要素 2022-09-06
- 动态更新多个选择框 2022-01-01
- 在for循环中使用setTimeout 2022-01-01
- Karma-Jasmine:如何正确监视 Modal? 2022-01-01
- 角度Apollo设置WatchQuery结果为可用变量 2022-01-01
- 响应更改 div 大小保持纵横比 2022-01-01
- 悬停时滑动输入并停留几秒钟 2022-01-01
- 当用户滚动离开时如何暂停 youtube 嵌入 2022-01-01
- 在 JS 中获取客户端时区(不是 GMT 偏移量) 2022-01-01