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

Question

我想知道是否有办法通过特定变量的值来包含 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 而不是使用 compass 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;
 }
}

它变得有点干燥，但最终输出要大得多。但有可能。