css - 在 SCSS 中抽象变量

Question

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

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

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

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

我想我只是流程错误。我哪里错了？

score 3 · Accepted Answer

如果您可以将额外的文件作为中间人，您可以这样做。

_master.css.scss：

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

网站.css.scss：

@import '_master.css';

score 1 · Accepted Answer

问题是您如何命名 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';

score 0 · Accepted Answer

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

3 回答 3