SASS 中的嵌套 mixins 或函数

Posted 2023-03-06

【中文标题】SASS 中的嵌套 mixins 或函数

【英文标题】：Nested mixins or functions in SASS

【发布时间】：2013-04-07 20:53:39

【问题描述】：

有人知道我如何在 SASS 中使用嵌套的 mixins 或函数吗？ 我有这样的事情：

@mixin A()
    do something....


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

【问题讨论】：

是的，你做得对。您可以在第二个中调用第一个 mixin。 check this pen.

哦，谢谢！我试过这个，但没有工作，也许我的红宝石正在崩溃。我会尝试重新安装。谢谢你。 （codepen 很棒！，还不知道）

@crazyrohila 您应该将此作为答案发布。

对不起，我错误地删除了最后一支笔。所以创造了一支新笔。

这里不清楚为什么运行此代码没有回答您的问题。

【参考方案1】：

如其他答案中所述，您可以在其他混合中包含混合。此外，您还可以确定 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;

范围混入意味着您可以在不同的范围内拥有多个名称相同的混入，而不会产生冲突。

【参考方案2】：

你可以多嵌套 mixins，你也可以在 mixins 中使用占位符..

@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;

【讨论】：

必须注意mixin的顺序很重要，即如果你在上面代码的底部移动@mixin a...，sass生成编译错误Undefined mixin 'a'

任何原因b 不是b() 在@include b; 中？

@ajax333221 mixins 不必有参数，如果你不指定参数，那么 () 是可选的。

【参考方案3】：

是的，你已经做得对了。您可以在第二个中调用第一个 mixin。检查这支笔http://codepen.io/crazyrohila/pen/mvqHo