Sass 不会将 mixins 和变量编译成 css

Posted 2023-03-17

【中文标题】Sass 不会将 mixins 和变量编译成 css

【英文标题】：Sass does not compile mixins and variables into css

【发布时间】：2020-10-17 05:52:38

【问题描述】：

我已经添加了字体并尝试让mixin（也尝试作为变量，结果相同）来使用它。

所有的sass文件都是通过“style.sass”连接的

@import '_interface'
@import '_fonts'

文件“_fonts.sass”，我在其中添加了字体并制作了mixin

@font-face
    font-family: 'Museo Sans Light'
    src: url('../fonts/MuseoSansCyrl-300.eot')
    src: url('../fonts/MuseoSansCyrl-300.eot?#iefix') format('embedded-opentype'), 
    url('../fonts/MuseoSansCyrl-300.woff') format('woff'), url('../fonts/MuseoSansCyrl-300.ttf') 
    format('truetype')
    font-weight: normal
    font-style: normal

@mixin reg
    font-family: 'Museo Sans Light'
    font-weight: 300

然后我尝试将它用于“_interface.sass”作为body标签：

body
    box-sizing: border-box
    color: $text-color
    +reg

在结果中我发现了 sass 异常“no mixin named reg”

如果有人帮助，我将非常感激！ 谢谢。

【问题讨论】：

你不要把下划线放在'@import'引用中，所以应该只是@import 'interface'

hm，我尝试在两个选项中导入文件。但是，结果没有改变

尝试切换文件的顺序。如果reg定义在_fonts中，则需要先导入才能在_interface中使用。

@ajm 是的，就是这样。我真的很感谢你。谢谢！）

我会将我的评论添加为答案，以便更多人可以找到它，然后您可以将其标记为正确/接受。

【参考方案1】：

SASS 文件是以顺序依赖的方式处理和加载的，因此声明了mixin（或变量或函数等）的文件必须在imported 之前使用mixin其他文件。

在您的示例中，您的 mixin reg 在 _fonts 中声明并在 _interface 中使用。为了让 SASS 识别和加载 reg，_fonts 必须是 imported。在_fonts 为imported 之后，所有随后加载的文件，如_interface，都将可以访问reg。

使用共享 SASS 混合、变量或函数的一种常见模式是创建并将它们存储在一个位置（例如，名为 _mixins、_vars、_functions 的文件），然后您将其 @987654338 @ 在您的主要 SASS 样式表中，位于各个样式表模块之前。这样一来，您就知道您需要的一切都已声明且可用。

可能看起来像这样：

@import "_vars"; // Everything below knows about contents of _vars
@import "_mixins";  // Everything below knows about contents of _mixins

// These files can use everything above!
@import "_fileThatUsesSharedVariables";
@import "_fileThatUsesMixins";
@import "_fileThatUsesMixinsAndVariables"; // This last file can use everything above it!