sass - 在 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 颜色在没有 # 的情况下传递给 url，因此典型的调用如下所示:

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

并且背景颜色需要在它前面有一个散列。我想像这样在 mixin 中写下这一行:

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

希望这对某些人有帮助。