1

我正在将样式表从 LESS 转换为 SCSS，并且在大多数情况下它进展顺利，但有一个问题：我似乎无法让我的一个 mixin 工作。

基本上我还没有完全跳上 html5 的潮流，我仍然使用图像进行渐变以实现浏览器兼容性。

我编写了一个 PHP 脚本来动态生成渐变（是的，并缓存它们！）然后 LESS 负责在调用 mixin 时链接到它。

无论如何，我的旧 mixin（来自 LESS）：

.verticalGradient(@startColor, @endColor, @height){
    @tmpStartColor: escape("@{startColor}");
    @tmpEndColor: escape("@{endColor}");
    background: @endColor url('@{img_path}gradient/v/5px/@{height}/@{tmpStartColor}/@{tmpEndColor}.png') 0 0 repeat-x;

}

到目前为止，这是我的新 mixin (SCSS) 所拥有的：

@mixin verticalGradient($startColor, $endColor, $height){
  background: $endColor url('#{$img_path}gradient/v/5px/' + $height + '/' + $startColor + '/' + $endColor + '.png') 0 0 repeat-x;
}

所以这就是问题所在：在没有被转义的情况下，网址最终会变成这样：

/img/gradient/v/5px/25px/transparent/#ffe4c4.png

它应该是：

/img/gradient/v/5px/25px/transparent/%23ffe4c4.png

当然，由于哈希标签，服务器只能看到透明/，所以它没有得到颜色信息。

如果可以做到的话，剥离哈希标签是一个可以接受的解决方案（尽管我更愿意像以前一样逃避它们），但我似乎找不到任何方法来做到这一点。

谢谢！

4

1 回答 1

3

我想通了。

这让我找到了正确的方向： 如何将扩展加载到 Sass::Script::Functions 模块？

这让我走完了剩下的路： http ://sass-lang.com/documentation/Sass/Script/Functions.html#adding_custom_functions

如果这对其他人有用的话，这是我的代码:) config.rb（需要 lib）：

require File.dirname(__FILE__) + "/lib/urlencode.rb"

库/urlencode.rb：

module Sass::Script::Functions
  def urlencode(string)
    Sass::Script::String.new(ERB::Util.url_encode(string));
  end
  declare :urlencode, :args => [:string]
end

然后这只是在我的样式表中实现的问题：

@mixin verticalGradient($startColor, $endColor, $height){
  background: $endColor url('#{$img_path}gradient/v/5px/' + $height + '/' + urlencode($startColor) + '/' + urlencode($endColor) + '.png') 0 0 repeat-x;
}
于 2013-10-27T17:47:36.470 回答