在 SASS 中转义 #
这是我正在使用的 mixin 的示例：
@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};
但这不起作用......有什么想法吗？
Here's an example of a mixin I'm using:
@mixin gradient($from, $to, $height) {
background-color: #{$to};
background-image: url("/media/img/gradient/4/#{$height}/#{$from}/#{$to}/");
background-repeat:repeat-x;
}
The problem is that the $from and $to colors are passed to the url without the #, so a typical call looks like this:
@include gradient(ff00ff, 00ff00, 600);
and the background-color needs a hash in front of it. I want to write the line in the mixin like this:
background-color: ##{$to};
but that doesn't work... any ideas?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
我需要做类似的事情，因为这是谷歌上的第一个结果，我想我应该添加我是如何解决这个问题的。
我必须传递十六进制颜色并使用类名称中的值作为真实颜色。所以我创建了一个 addHash 函数。
这是一个简单的例子...
@include setColour("00ff00");
这会输出这样的 CSS...
希望这对某人有帮助。
I needed to do something similar, and as this was the first result on Google I thought I'd add how I got around this.
I had to pass a hex colour and use the value in the class name and as a real colour. So I created an addHash function.
Here's a simple example...
@include setColour("00ff00");
This outputs CSS like this...
Hopefully this will be helpful for somebody.
最后我决定重写：
as
，它按预期工作。
In the end I decided to rewrite:
as
which works as expected.
也许这会起作用：
#{"#" + $myVar}
Maybe this will work:
#{"#" + $myVar}