Question

我想知道是否有办法用特定变量的值包含mixin（指南针或我自己的）。

目前我有以下mixin（有效）

@mixin aligned-top-bottom-border($size, $side){
  @if $side == "left"{
   @include border-top-left-radius($size);
   @include border-bottom-left-radius($size);
  }
  @else{
    @include border-top-right-radius($size);
    @include border-bottom-right-radius($size);
  }
}

我希望将其转换为类似下面的代码（或任何其他更短且更易读的替代方案）

@mixin aligned-top-bottom-border($size, $side){

 @include border-top-#{side}left-radius($size);
 @include border-bottom-#{side}-radius($size);

}

我使用Sass 3.4.5（选择性史蒂夫）

Answer 1

Sass文档有关插值的说法：

您还可以在选择器和属性名称中使用SassScript变量使用＃{}插值语法

在mixins或函数中使用它们没有任何意义。但是没有什么可以阻止你将自己的供应商循环添加到mixin而不是使用指南针mixin。像这样：

@mixin aligned-top-bottom-border($size, $side){
 @each $vendor in ('-webkit-', '-moz-', '-ms-', '-o-', ''){
  #{$vendor}border-top-#{$side}-radius: $size;
  #{$vendor}border-bottom-#{$side}-radius: $size;
 }
}

它有点DRYer但在最终输出中要大得多。但它有可能。

通过使用变量来包含mixin来缩短代码

1 个答案: