通過使用一個變量縮短代碼包括mixin

我想知道是否有一種方法可以通過特定變量的值包含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); 

}

我使用薩斯3.4.5（選擇性史蒂夫）

來源

2014-10-05 Nir Naor

[混合，函數和變量名稱的Sass插值]的可能重複（http://stackoverflow.com/questions/16152547/sass-interpolation-of-mixin-function-and-variable-names） – cimmanon 2014-10-05 12:47:49

爲什麼在這個問題上有更少的標籤？ – Harry 2014-10-05 13:53:34

@Harry發送問題後幾分鐘，我做了一個較少的標記並將其刪除。 – 2014-10-06 07:54:55

薩斯文檔有此說關於插補：

您也可以使用＃{}插值語法

沒有關於混入或功能使用它們使用SassScript變量選擇和屬性名。但是沒有什麼能夠阻止你將自己的供應商環路添加到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; 
} 
}

它得到最終的輸出有點乾燥，但很多大。但有可能。

來源

2014-10-14 17:57:31

通過使用一個變量縮短代碼包括mixin

回答

相關問題