組合在SASS

Question

.green-oval-button { 
    @extend .oval-button; 
    @include radial-gradient($green-gradient...); 

    &:active { 
     @include radial-gradient($green-gradient-active...); 
    } 
} 

.blue-oval-button { 
    @extend .oval-button; 
    @include radial-gradient($blue-gradient...); 

    &:active { 
     @include radial-gradient($blue-gradient-active...); 
    } 
} 

---

密新+插值+變參數的是否有可能簡化上述SassScripts與Mixin + Interpolation + Variable Arguments？

例：它引起錯誤

@mixin color-oval-button($color) { 
    @extend .oval-button; 
    @include radial-gradient(#{$color}-gradient...); 

    &:active { 
     @include radial-gradient(#{$color}-gradient...); 
    } 
} 

@include color-oval-button("$green"); 
@include color-oval-button("$blue"); 

Answer 1

可變插值不可用在SASS但根據創建者，克里斯Eppstein的它將通過地圖特徵一旦3.3 realeased是可能的。 https://github.com/nex3/sass/issues/132

在此之前，您可以使用2個帶有映射值和for循環的列表進行排序。只需在列表的相同索引中指定所需的漸變作爲要調用的顏色變量即可。

$colors: blue, green; 
$gradients: [gradient css], [gradient css]; 
    @for $i from 1 through length($colors) { 
     @mixin #{nth($colors, $i}-oval-button($color) { 
     @extend .oval-button; 
     @include radial-gradient(#{nth($gradients, $i)}); 
     &:active { 
      @include radial-gradient(#{nth($gradients, $i)}); 
     } 
     } 
    } 

它給你：

@mixin blue-oval-button($color) { 
    @extend .oval-button; 
    @include radial-gradient(blue-gradient); 
    $:active { 
    @include radial-gradient(blue-gradient); 
    } 
} 
etc.... 

對於發燒友和輕微雨衣版本，請檢查鏈接瞭解如何編寫一個查詢功能。