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

Question

我已经添加了字体并尝试制作 mixin（也尝试作为变量，结果是一样的）来使用它。

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

”

@import '_interface'
@import '_fonts'

文件“_fonts.sass”，我在其中添加了字体并进行了混合

@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
    box-sizing: border-box
    color: $text-color
    +reg

在结果中我捕获了 sass 异常“没有名为 reg 的 mixin”

如果有人帮忙，我将不胜感激！谢谢。

Answer 1

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

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

使用共享 SASS 混入、变量或函数的常见模式是创建它们并将它们存储在一个地方（例如名为 _mixins、_vars 的文件, _functions) 然后你 import 在你的主 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!

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

Sass does not compile mixins and variables into css

css

sass

mixins