SASS - 將變量傳遞給@each循環

我使用npm模塊'iconfont'來管理我的主題圖標（帶有一些大口）。模塊使用模板生成SCSS文件。見下：SASS - 將變量傳遞給@each循環

@font-face { 
    font-family: '<%= fontName %>'; 
    font-weight: normal; 
    font-style: normal; 
    src: url('../<%= fontPath %><%= fontName %>.eot'); 
    src: url('../<%= fontPath %><%= fontName %>.woff2') format('woff2'), 
     url('../<%= fontPath %><%= fontName %>.woff') format('woff'), 
     url('../<%= fontPath %><%= fontName %>.ttf') format('truetype'), 
     url('../<%= fontPath %><%= fontName %>.eot?#iefix') format('embedded-opentype'), 
     url('../<%= fontPath %><%= fontName %>.svg#<%= fontName %>') format('svg'); 

} 

.<%= className %>[class^="<%= className %>-"], 
.<%= className %>[class*=" <%= className %>-"] { 
    display: inline-block; 
    font-family: '<%= fontName %>'; 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
    font-style: normal; 
    font-variant: normal; 
    font-weight: normal; 
    line-height: 1; 
    text-transform: none; 
} 

$icons: (
    <%= glyphs.map(function(glyph) { 
     return glyph.name + ': \'' + '\\' + glyph.unicode[0].charCodeAt(0).toString(16).toUpperCase() + '\'' 
    }).join(',\n ') %> 
); 

@each $name, $icon in $icons { 
    .<%= className %>-#{$name}:##Dynamic position### { 
     font-family: '<%= fontName %>'; 
     content: $icon; 
    } 
}

正如你所看到的，它使用'@each'循環來生成我的圖標類。

我創建了一個mixin來使用它。見下圖：

@mixin svgicon($name, $fontsize, $lineheight, $color, $position){ 
    @extend .icon; 
    @extend .icon-#{$name}:#{$position}; 
    @extend #{$position}; 
    font-size:$fontsize; 
    line-height:$lineheight; 
    color:$color; 
}

這裏是我的問題：默認情況下，圖標模塊生成的僞元素之前::圖標，我想能夠選擇僞元素在我的mixin參數。

有什麼想法？

THX

來源

2015-11-05 jetpulp-fronts

沒有什麼可以通過。在你調用你的mixin之前很久就會生成選擇器。除了修改'@ each'塊之外，沒有什麼*要做。 – cimmanon

通過修改'@ each'塊，你的意思是用:: after僞元素創建第二個選擇器，並創建第二個mixin？ –

您需要在'@ each'中創建另一個選擇器。 mixin只需要修改即可擴展正確的選擇器。大多數人不想修改第三方庫以適應他們的目的。 – cimmanon

解決方案（簡單得多，我認爲）

我已經刪除德：從@each塊之前，然後修改了我的mixin這樣：

@mixin svgicon($name, $fontsize, $lineheight, $color, $position:before){ 

    @if $position == 'before'{ 

     &:before{ 

      @extend .icon; 
      @extend .icon-#{$name}; 
      font-size:$fontsize; 
      line-height:$lineheight; 
      color:$color; 

     } 

    } @else { 

     &:after{ 

      @extend .icon; 
      @extend .icon-#{$name}; 
      font-size:$fontsize; 
      line-height:$lineheight; 
      color:$color; 

     } 

    } 

}

現在我只需要包括我的mixin這樣：

@include svgicon('gyro', 10px, 10px, red, 'before');

來源

2015-11-05 15:19:03

SASS - 將變量傳遞給@each循環

回答

相關問題