SASS 在不同文件中使用 mixins（断点）答案

【问题标题】：SASS using mixins (breakpoints) in different fileSASS 在不同文件中使用 mixins（断点）
【发布时间】：2021-08-06 16:34:47
【问题描述】：

我正在努力解决 SASS 中的断点问题。

我有这个文件结构

我想在 _layout.scss 中使用来自 _variables.scss 的代码断点

_variables.scss

$screen-xl-min: 1200px;

@mixin xl {
    @media (min-width: #{$screen-xl-min}) {
        @content;
    }
}

_layout.scss

@use 'variables';
nav {
    height: 80px;
    @include xl {
        background-color: red;
    }
}

style.scss

@use 'variables';
@use 'layout';

我有错误

SassError: 未定义的混合。

谁能告诉我，我做错了什么？非常感谢您的帮助！

【问题讨论】：

标签： sass

【解决方案1】：

尝试改变

@use 'variables'

为

@use 'variables' as *;

【讨论】：

【解决方案2】：

查看文档：https://sass-lang.com/documentation/at-rules/use

在您的示例中，正确的方式是写@include variables.xl {}

或者像@Café写的那样修改@use规则

【讨论】：