是否可以创建本地/私有 sass mixin？答案

【问题标题】：Is it possible to create a local/private sass mixin?是否可以创建本地/私有 sass mixin？
【发布时间】：2013-12-26 02:11:58
【问题描述】：

我有三个 sass 文件：a.scss、b.scss、c.scss

a.scss:

@mixin font($size, $color){
  font-size: #{$size};
  color: #{$color}
  }

 p{
  @include font(10px, blue)
  }

b.scss：

@mixin font()
{
..
}

c.scss

@import a.scss
@import b.scss

我认为 b.scss 中的 mixin font() 会覆盖 a.scss 中的 mixin font($size, $color)。

p{
  @include font(10px, blue)  // use mixin font() in b.scss, error
  }

是否可以创建本地/私有 sass mixin？或者 sass 中的所有 mixin 都是全局的，我必须为每个 mixin 赋予它们唯一的名称？

【问题讨论】：

标签： css sass

【解决方案1】：

选择器中的混合是该选择器的本地变量，就像 Sass 变量一样。这两个 mixin 是相互独立的：

.foo{
    @mixin my_color(){
        color: #ffcc00;
    }
    @include my_color;
}

.bar{
    @mixin my_color(){
        color: #00ffcc;
    }
    @include my_color;
}

所以，回答您的最后一个问题 - 只有在全局级别定义的 mixin 才是全局的，否则您可以安全地重用名称。在您的示例中，如果您的 a.scss、b.scss 和 c.scss 被构造为定义不同的总体类（例如 .header、.main、.footer），您可以为每个类使用本地字体混合。

相关：Localizing/Scoping a sass mixin.

【讨论】：

【解决方案2】：

你是对的。就像在典型的 CSS 文件中一样，您的 sass 项目是自顶向下编译的。因此，与前一个名称相同的 mixin 将覆盖它。如果你想在 c.scss 中使用原来的 mixin，你必须重新定义它。

【讨论】：

【解决方案3】：

更新：现在有了新的@use 规则，您只需以- 或_

【讨论】：