Question

我正在将样式表从LESS转换为SCSS，并且大部分内容都很顺利但是有一个问题：我似乎无法让我的一个mixin工作。

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

我写了一个PHP脚本来动态生成渐变（是的，并缓存它们！）然后LESS负责在调用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

当然，由于哈希标记，服务器最多只能看到透明/所以它不会获取颜色信息。

剥离哈希标签是一个可以接受的解决方案，如果它可以完成（虽然我更喜欢像以前那样逃避它们），但我似乎无法找到任何方法去做。

谢谢！

Answer 1

我想出来了。

这让我指出了正确的方向： How do I load extensions to the Sass::Script::Functions module?

这让我在那里剩下的路上： http://sass-lang.com/documentation/Sass/Script/Functions.html#adding_custom_functions

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

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

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

想知道SCSS相当于LESS逃脱的是什么？

1 个答案: