0

I'd like to know if there is a way to include a mixin (compass or my own) by a value of a specific variable.

Currently I have the following mixin (which works)

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

I'd like to turn it to something like the code below (or any other alternative that is shorter and more readable)

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

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

}

I'm using Sass 3.4.5 (Selective Steve)

4

1 回答 1

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

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

于 2014-10-14T17:57:31.927 回答