Escape # in SASS

Question

Вот пример миксина, который я использую:

@mixin gradient($from, $to, $height) {
    background-color: #{$to};
    background-image: url("/media/img/gradient/4/#{$height}/#{$from}/#{$to}/");
    background-repeat:repeat-x;
}

Проблема в том, что $ from и $ to colors передаются в URL без #, поэтому типичный вызов выглядит следующим образом:

@include gradient(ff00ff, 00ff00, 600);

, а цвет фона нуждается в хэше перед ним.Я хочу написать в миксине строку так:

background-color: ##{$to};

, но это не работает ... какие-нибудь идеи?

Answer 1

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

Мне пришлось передать шестнадцатеричный цвет и использовать значение вимя класса и как настоящий цвет.Поэтому я создал функцию addHash.

Вот простой пример ...

@function addhash($input) {
  @return unquote("#" + $input);
}

@mixin setColour($colour, $textColour:"0000ff")
{
    .headerButtons .colour#{$colour}  a{
        background:addhash($colour);
        color:addhash($textColour);
    }
}

@ include setColour ("00ff00");

Это выводит CSS следующим образом...

.headerButtons .colour00ff00 a {
    background: #00ff00;
    color: #0000ff;
}

Надеюсь, это кому-нибудь пригодится.

Answer 2

В итоге я решил переписать:

@include gradient(ff00ff, 00ff00, 600);

в

@include gradient("#ff00ff", "#00ff00", "600");

, который работает как ожидалось.

Answer 3

Может быть, это будет работать:

# {"#" + $ myVar}