Question

我有三个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字体（$ size，$ color）。

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

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

Answer 1

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

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

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

所以，回答你的最后一个问题 - 只有在全球范围内定义的mixins是全局的，否则你可以安全地重用名称。在您的示例中，如果您的a.scss，b.scss和c.scss被构造为定义不同的总体类（例如.header，.main，.footer），则可以为每个类添加本地字体。

相关：Localizing/Scoping a sass mixin。

Answer 2

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

是否可以创建本地/私人sass mixin？

2 个答案: