Использование интерполяции для вызова compass sprite mixins

Question

проблема, с которой я сталкиваюсь в этом микшировании, заключается в том, что я не могу интерполяции для вызова различных спрайт-миксинов, которые предоставляет компас.

Я хочу иметь это в одном месте, создавать спрайты в разных сценариях, а их просто включать это совместное смешивание и использовать его.

До сих пор кажется, что Сасс не позволяет мне это делать. Может быть, у меня просто сумасшедший и плохой способ заниматься вещами (я не дизайнер, и я узнал о сасе несколько месяцев назад).

Спасибо за ваше время.

@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; 
    } 
    } 
} 

Answer 1

The #{something} является рубиновым способом интерполяции. Compass framework использует ruby-компилятор для создания css из scss/sass. Интерполяция - это просто способ вставки некоторого значения (переменной) в строку: 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 ​​в компасе, если это возможно для более чистого стиля. Примечание: Я был бы признателен, если бы кто-нибудь мог объяснить с лучшими деталями компиляции, потому что я не рубист, я питонист.

Update

Проверьте этот код:

@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;} 

Итак, как вы видите, #{} интерполяции в компасе работает вне фигурных скобок, используемых для определять инструкции для селектора.