Question

是否有可能在Sass mixin的早期爆发/返回？我想做这样的事情：

@mixin foo($bar: false) {

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

  color: red;
}

编辑：请记住，这个例子是我能想到的最简单的事情，它说明了我的问题。在现实世界中，我的代码要复杂得多，而且用例很明显。

Answer 1

Sass并没有真正拥有＆＃34; break＆＃34;的概念，但是@if/@else会让你非常接近：

@mixin foo($bar: false) {

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

}

来自https://github.com/nex3/sass/issues/378的Lead Sass开发人员：

问题在于存在更少使用的控制结构 Sass，对于只通过熟悉的东西来说，它就越难使用该语言来读取使用这些控件的样式表结构。这就是为什么它从最初的一套开始结构需要做任何事情：因为在许多情况下它是有道理的偏向于语言的较小表面区域而不是编写复杂代码的最佳语义。

Answer 2

我仍然认为@if/@else语句是解决Sass问题的最简单，最好的解决方案，但我创建了两种不同的突破混音来帮助您并作为挑战：

Play with this mixin first

没有@includes（link）

的突破mixin

@include breakout($styles)

$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(
    break (false color red)  // break (<condition> <property> <value>
    break ((3 < 2) border (1px solid #fff)) // breaks also support list and nested lists
    break ($foo width 10px) // This breaks is compiled because condition is true
    color blue // This style isn't compiled because the $foo break ends the mixin
  )

请注意，mixin参数列表的顺序很重要，因为如果中断条件为真，它确定已编译和未编译的样式

使用@includes（link）

突破mixin

此mixin与上述类似，但它将$styles，break-mixin mixin和@content的mixin值引入分组mixin以允许使用@includes。

<强>混入
如果你想将其他mixin用于breakout mixin，你需要在$styles中添加一些代码并将每个mixin添加到break-mixin mixin中。

  @include breakout(
    mixin foo // mixin <name of the mixin declared into break-mixin arguments>
    mixin bar // mixin name should match break-mixin argument
    mixin foobar
  ) {
    @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}
  }

Mixin休息
现在你也可以将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}
  }

因此，对于您的具体案例，将 Breakout mixin而不包含@includes（link）复制到您的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
);

Answer 3

令我惊讶的是尚未提到@error语句。根据文档（重点是我的）：

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

也就是说，@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.
}

打破Sass mixin

3 个答案:

Play with this mixin first

没有@includes（link）

使用@includes（link）