Sass 从一场激烈的混战中脱身

是否有可能提前爆发/返回Sass混入？我想这样做：

@mixin foo($bar: false) {

  @if $bar {
    // return early without applying any of the styles below
  }

  color: red;
}

---

编辑：请记住，这个例子是我能想出的最简单的例子来说明我的问题。在现实世界中，我的代码要复杂得多，其使用案例也很清楚。

Sass实际上没有“中断”的概念，但是一个

@if/@else

会让你非常接近：

@mixin foo($bar: false) {

  @if $bar {
    color: green;
  }
  @else {
    color: red;
  }

}

来自首席Sass开发人员，地址：

问题在于，中国存在着更为罕见的控制结构 Sass，对一件只是暂时熟悉的事情来说就越难 使用该语言读取使用这些控件的样式表 结构。这就是为什么它从最基本的 结构需要做任何事情：因为在许多情况下它是有意义的 向语言的较小表面区域倾斜，而不是 编写复杂代码的最佳语义

---

我仍然认为

@if/@else

语句是解决Sass问题的最简单、最好的解决方案，但我创建了两种不同的突破组合来帮助您，并作为一种挑战：

不含@includes（）

@包括突破（$style）

$style

应该是由空格分隔的样式列表，以下是允许的值：

• 样式
  常用CSS样式由空格分隔，不带冒号或分号，值列表应用括号括起来：

    @include breakout(
      color blue // <property> <value>
      width (100 * 20px) // <property> <operation with values>
      border (1px solid #fff) // <property> <list of values>
      box-shadow (0 0 10px 4px #0000FF , 0 0 20px 30px #008000) // <property> <nested list of values>
    )
  

• 混音中断
  现在你也可以在休息时使用mixin。这里的顺序仍然很重要：

    $foo: true
    @include breakout(
      mixin foobar
      mixin bar
      break ($foo mixin foo) // This breaks is compiled because condition is true
      color blue // This style isn't compiled because the $foo break ends the mixin
    ) {
      @include break-mixin(foo) { // Here your mixin or mixins for mixin foo }
      @include break-mixin(bar) { @include mixin1; @include mixin2; @include mixin3}
      @include break-mixin(foobar) { @include foobar}
    }
  

因此，对于您的特定情况，将不带@includes（）的Breakout mixin复制到您的scss文件中，或者将其用作部分，然后将其添加到您的代码中

@include breakout(
  break ($bar property value) // The break out statement
  color red // If $bar != false this will be compiled if not it won't
);

我很惊讶这个声明还没有被提及。根据文件（重点矿山）：

在编写包含参数的混合函数和函数时，通常需要确保这些参数具有API期望的类型和格式。如果没有，则需要通知用户，并且您的mixin/功能需要停止运行

也就是说，

@error

可能不适合所有情况，因为它将完全停止Sass编译。这使得它不适合于出现预期的最终场景的混合

Sass文档中的示例：

@mixin reflexive-position($property, $value) {
  @if $property != left and $property != right {
    @error "Property #{$property} must be either left or right.";
  }

  $left-value: if($property == right, initial, $value);
  $right-value: if($property == right, $value, initial);

  left: $left-value;
  right: $right-value;
  [dir=rtl] & {
    left: $right-value;
    right: $left-value;
  }
}

.sidebar {
  @include reflexive-position(top, 12px);
  //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  // Error: Property top must be either left or right.
}

---

为什么你想为你的混音做一个分解呢？你可以使用

@if

和

@else

来代替，看看这个分解混音会使代码更简洁易读。请参阅Mixin不要使用

@return

返回值。Mixin显示一段代码。最好的解决方案是使用

@if

和

@else

：但如果您完成了示例并描述了您的场景，我可以帮助您@LandonSchropp@Parhum那真是个倒霉蛋。我的问题不是我做不到。我的问题是，我试图以一种易于阅读和维护的方式来实现它。如果你想使用Mixin，你必须使用@If并在其中执行任何操作。看看这个混音：只要用if。。。但是你能使用@function吗？谢谢你的回复，特别是Sass维护人员的评论。在我看来，语言应该以清晰而不是熟悉为目标，但这显然是正确的答案。感谢您的详细回复，但我觉得这会给代码增加一些不值得的复杂性。

@include breakout(
  break ($bar property value) // The break out statement
  color red // If $bar != false this will be compiled if not it won't
);

@mixin reflexive-position($property, $value) {
  @if $property != left and $property != right {
    @error "Property #{$property} must be either left or right.";
  }

  $left-value: if($property == right, initial, $value);
  $right-value: if($property == right, $value, initial);

  left: $left-value;
  right: $right-value;
  [dir=rtl] & {
    left: $right-value;
    right: $left-value;
  }
}

.sidebar {
  @include reflexive-position(top, 12px);
  //       ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  // Error: Property top must be either left or right.
}