，我有該配合的問題，使用插值是，我不能插值調用不同的精靈混入這個指南針提供。調用羅盤精靈混入

我希望能夠有這個在一個地方，創造不同的SCSS精靈和他們只是包含這個共享的混合和使用它。

到目前爲止似乎薩斯不允許我這樣做。也許我只是做的事情（我不是設計師真的和我幾個月前瞭解SASS）的瘋狂和壞的方式。

謝謝你的時間。

@mixin icon-button($width, $height, $icon-bg-color, $icon, $sprite-name){ 
    .icon-base{ 
    width: $width; 
    height: $height; 
    background-color: $icon-bg-color; 
    .icon{ 
     $icon-height: #{$sprite-name}-sprite-height(#{$icon}); 
     $icon-width: #{$sprite-name}-sprite-width(#{$icon}); 
     @include #{$sprite-name}-sprite(#{$icon}); 
     width: $icon-width; 
     height: $icon-height; 
     position: relative; 
     left: ($width - $icon-width)/2; 
     top: ($height - $icon-height)/2; 
    } 
    } 
}

來源

2013-06-05 DraskyVanderhoff

的#{something}是內插的一個紅寶石路。 Compass框架使用ruby編譯器從scss/sass製作css。插值只是插入（可變）某個值轉換成字符串，像這樣的方式：puts "I want to say #{smth}"將打印"I want to say something"到irb控制檯，如果你前面定義的變量smth = "something"。您也可能會注意到'和」的區別所以，有時候你想使用獨立的功能，在指南針是這樣的：

headings(all) { 
    color: $color; 
}

把它編譯成CSS：

h1, h2, h3, h4, h5, h6 { 
    color: #2a2a2a; 
}

相反，它拋出。錯誤所以，要做到這一點，你需要插值函數的調用：

#{headings(all)} { 
    color: $color; 
}

，它運行但是，如果你試圖讓插補變量：

$color: #abc; 
$color2: "#abc"; 

@mixin some($color) { 
    color: #{$color}; 
}

也會拋出一個錯誤，因爲在這種情況下，插值輸出一個字符串「#abc」。儘量避免使用羅盤的Ruby語法是否有可能對更清潔的風格。注：我將不勝感激，如果有人能提供更好的編譯細節，因爲我不是一個rubyist，我是pythonist解釋。

更新

檢查這個代碼：

@mixin setFonting($from, $to, $size) { 
    $curr: $from; 
    $to: $to + 3; 

    @while $curr != $to { 
     h#{$curr} { 
      font-size: $size; 
     } 
     $curr: $curr + 1; 
     $size: $size + 2; 
    } 
} 
@include setFonting(1, 3, 20px);

它編譯成：

h1 {font-size: 20px;} h2 {font-size: 22px;} h3 {font-size: 24px;} h4 {font-size: 26px;} h5 {font-size: 28px;}

所以你看，#{}插在羅盤的作品用於外大括號爲選擇器定義語句。

來源

2013-07-26 09:59:25 boldnik

調用羅盤精靈混入

回答

更新

相關問題