在SCSS中提取变量

Question

我有一个父SCSS文件正在导入我的其他CSS文件：

@import 'variables.css';
@import 'helpers.css';
@import 'layout.css';

我有三个scss文件：variables.css.scss; helper.css.scss＆amp; layout.css.scss。

在变量中，我定义了整个站点中使用的颜色，字体和大小。问题是我假设这些变量可以在其他文档中使用，只要它先导入，但我收到Undefined Variable错误。

我认为我的过程是错误的。我哪里错了？

Answer 1

如果您可以使用额外的文件作为中间人，那么就可以这样做。

_master.css.scss：

@import 'variables.css';
@import 'helpers.css';
@import 'layout.css';

site.css.scss：

@import '_master.css';

Answer 2

问题是您如何命名scss文件。导入文件的方式使SASS认为您使用的是@import CSS规则https://developer.mozilla.org/en-US/docs/CSS/@import 仅使用scss扩展名重命名这些文件，删除“.css”，然后像这样导入它们

@import 'variables.scss';
@import 'helpers.scss';
@import 'layout.scss';

或者你甚至可以跳过扩展名

@import 'variables';
@import 'helpers';
@import 'layout';

Answer 3

如果您希望变量在其他文件上可用，您还需要在其中包含该css。所以基本上layout.css.scss和helper.css.scss需要有@import 'variables.css'