※ 引述《ponba (胖爸)》之銘言：
: @include icon("icon-library", "\e621", $pon-icon);
: @include icon("icon-calculate", "\e63a", $pon-icon);
: @include icon("icon-clock", "\e648", $pon-icon);
: @include icon("icon-bars", "\e698", $pon-icon);
: @include icon("icon-cog2", "\e690", $pon-icon);
: 上面是設定值，下面是想要變成的CSS
: .pon-icon-library:before {
: font-family: $pon-icon;
: content: "\e621";
: }
: 目前有想到的方式為
: @mixin pon-icon($icon){
: font-family: $pon-icon;
: content: $icon;
: }
: .pon-icon-library:before { @include pon-icon("\e621"); }
: 請問如何用類似迴圈或其它較精簡的方式改寫？
: 如果可用for-each直接把@include icon的值抓出來就好了。
: 謝謝
: ※ 編輯: ponba (220.132.131.252), 07/08/2014 22:22:54
: → mmis1000:scss? 07/08 22:59
: → superpai:參考 http://blog.sass-lang.com/posts/184094 看看 07/09 06:01
sass 在 3.3 之後開始支援 map
http://viget.com/extend/sass-maps-are-awesome
可參考這篇使用
: @include icon("icon-library", "\e621", $pon-icon);
: @include icon("icon-calculate", "\e63a", $pon-icon);
: @include icon("icon-clock", "\e648", $pon-icon);
: @include icon("icon-bars", "\e698", $pon-icon);
: @include icon("icon-cog2", "\e690", $pon-icon);
: .pon-icon-library:before {
: font-family: $pon-icon;
: content: "\e621";
: }
$map: ("icon-library": "\e621", "icon-calculate": "\e63a",
"icon-clock": "\e648", "icon-bars": "\e698", "icon-cog2": "\e690");
// 實際上不能換行，要整個寫在一起，這邊是為了讓您易讀
@each $type, $content in $map {
.pon-#{$type}:before {
font-family: $pon-icon;
content: $content;
}
}
大概像這樣，我習慣上是寫 sass, 你看一下這樣 scss 能不能過。