指南針/ Sass功能和mixin語法

我目前正在爲Compass/Sass編寫我的第一個mixin。經過短暫的戰鬥，我已經得到它來生成我需要的確切CSS;因此我的問題不是關於修復輸出，而是關於清理我已經完成的方式。指南針/ Sass功能和mixin語法

以下是我正在使用的兩段代碼。完整的代碼使用任意數量的逗號分隔線性漸變生成一個background-image: CSS規則，其中包括-webkit,moz和最新W3C格式（例如使用to top而不是bottom）的前綴不加梯度。

正如我所說，我很滿意API和輸出。我只是想清理這些代碼。

首先，在下面的w3c條件塊，我怎麼能避免我想要的東西：

@return linear-gradient($direction, $color-stops);

...調用內置羅盤linear-gradient混入？（我在我的項目中包含了所有的CSS3 Compass幫助程序）。我想要的是輸出一個字符串，在$direction和$color-stops值插值的括號內：

@function -gradient-rule($type, $direction, $color-stops) { 
    @if $type == ('moz') { 
     @return -moz-linear-gradient($direction, $color-stops); 
    } 
    @if $type == ('webkit') { 
     @return -webkit-linear-gradient($direction, $color-stops); 
    } 
    @if $type == ('w3c') { 

     // Terrible, terrible hack. Just couldn't work out how to write this without invoking the built-in Compass linear-gradient() function 
     $prefix: linear-gradient; 
     @return #{$prefix}unquote("(")#{$direction}, #{$color-stops}unquote(")"); 
    } 
}

其次，有沒有寫下面的代碼的更清潔的方式？我想循環所有的$gradients，併爲每個$gradient，假設第一項是一個方向聲明，其餘的是彩色停止。因此，第一項應設置在變量$to-direction中，其餘設置在名爲$color-stops的逗號列表中。我怎樣才能做得更好，即不需要$i計數器？

@each $gradient in $gradients { 

    $i: 1; 
    $to-direction: nth($gradient, 1); 
    $color-stops: comma-list(); 

    @each $prop in $gradient { 
     @if $i > 1 { 
      $color-stops: append($color-stops, $prop); 
     } 
     $i: $i+1; 
    } 

    // old syntax is the origin of the gradient, not the destination 
    $from-direction: -from-direction($to-direction); 
    $moz-value: append($moz-value, -gradient-rule('moz', $from-direction, $color-stops)); 
    $webkit-value: append($webkit-value, -gradient-rule('webkit', $from-direction, $color-stops)); 

    // new syntax is the destination 
    $w3c-value: append($w3c-value, -gradient-rule('w3c', $to-direction, $color-stops)); 

    ... 
    (continues) 
}

非常感謝您的幫助！

來源

2012-10-12 George Crawford

我不熟悉Compass漸變mixin，你的mixin做的有什麼不同？ – cimmanon

你可以把所有的代碼放在[codepen]（http://codepen.io/）中嗎？能夠玩耍會讓事情變得更容易：） –

1）除插入引號外，你不能做其他事情。這裏有一個更清潔的黑客：

@return #{"linear-gradient("+ $direction +", "+ $color-stops +")"}

PS你如何使用此代碼？這是有點奇怪，把一個

2）確實有一個更清潔的方式！

@for $gradient-number from 2 through length($gradients) { 
    $gradient: nth($gradients, $gradient-number); 

    $to-direction: nth($gradient, 1); 
    $color-stops: comma-list(); 

    @each $prop in $gradient { 
    $color-stops: append($color-stops, $prop); } 

    ...

的$gradient-number基本相同$i，所以沒有太多的在邏輯的差異，但在代碼整潔相差很多。

當我第一次開始使用這一招我是有點uncomfy，但後來我用它太（例如：1，2）看到SASS大師，這樣我就可以把它推薦給你沒有第二個想法。

來源

2013-03-25 15:04:36

指南針/ Sass功能和mixin語法

回答

相關問題