SASS中的嵌套mixin或函数

Question

有人知道我如何在SASS中使用嵌套的mixin或函数吗？ 我有类似这样的代码：

@mixin A(){
    do something....
}

@mixin B($argu){
    @include A();
}

- iLevi

---

是的，你做得对。你可以在第二个mixin中调用第一个mixin。查看这个代码片段。 - crazyrohila

哦，谢谢！我尝试了这个，但是不起作用，也许我的 Ruby 崩溃了。我会尝试重新安装。谢谢。（CodePen 真是太棒了，还没有被广泛知晓） - iLevi

@crazyrohila，你应该把这个发表为回答。 - Pavlo

抱歉，我不小心删掉了上一个笔记。所以我创建了一个新的笔记。 - crazyrohila

这里不清楚为什么运行这段代码没有回答你的问题。 - cimmanon

Answer 1

是的，您已经做得很好了。您可以在第二个 mixin 中调用第一个 mixin。请查看此笔 http://codepen.io/crazyrohila/pen/mvqHo

- crazyrohila

Answer 2

您可以多层嵌套Mixin，您也可以在Mixin内部使用占位符。

@mixin a {
  color: red;
}
@mixin b {
  @include a();
  padding: white;
  font-size: 10px;
}
@mixin c{
  @include b;
  padding:5;
}
div {
  @include c();
}

生成CSS的工具

div {
  color: red;
  padding: white;
  font-size: 10px;
  padding: 5;
}

- Ignatius Andrew

---

必须注意mixin的顺序很重要，即如果您将@ mixin a {...}移动到上述代码的底部，Sass会生成编译错误“未定义mixin'a'”。 - dkjain

在 @include b; 中，为什么 b 不是 b()？ - ajax333221

@ajax333221 混合项不一定需要参数，如果您没有指定参数，则括号是可选的。 - orionrush

Answer 3

正如其他答案中提到的那样，您可以在其他mixin中包含mixin。此外，您可以限定mixin的作用域。

示例

.menu {
  user-select: none;

  .theme-dark & {
    color: #fff;
    background-color: #333;

    // Scoped mixin
    // Can only be seen in current block and descendants,
    // i.e., referencing it from outside current block
    // will result in an error.
    @mixin __item() {
      height: 48px;
    }

    &__item {
      @include __item();

      &_type_inverted {
        @include __item();

        color: #333;
        background-color: #fff;
      }
    }
  }
}

将输出:

.menu {
  user-select: none;
}

.theme-dark .menu {
  color: #fff;
  background-color: #333;
}

.theme-dark .menu__item {
  height: 48px;
}

.theme-dark .menu__item_type_inverted {
  height: 48px;
  color: #333;
  background-color: #fff;
}

作用域混合指的是您可以在不同范围内具有相同名称的多个混合，而不会引起冲突。

- Frederik Krautwald