Sass 3.4删除字符串上的正斜杠

时间:2014-09-30 02:49:04

标签: sass compass

是一种解决方法或任何其他方法,使这项工作在Sass 3.4 +

@mixin icon ($name, $code) {
.#{$name}::before {
content: str-slice("\x",1,1) + $code;}
}

@include icon('test', 4556);

代码应输出

  

.test :: before {content:" \ 4556&#34 ;; }

但是在3.4+上\斜线被删除并输出为

  

.test :: before {content:" x4556&#34 ;; }

由于

2 个答案:

答案 0 :(得分:9)

你偶然发现currently-debated issue with escape characters in Sass。看来,目前,Sass要么添加太多字符,要么最终将unicode字符放入输出css中。

更新

@mixin icon ($name, $code) {
  $withslash: "\"\\#{$code}\"";
  .#{$name}:before {
    content: unquote($withslash);
  }
}
@include icon('test', '4556');

输出

.test:before {
  content: "\4556";
}

http://sassmeister.com/gist/04f5be11c5a6b26b8ff9

显然,这种方法的缺点在于它依赖于使用转义字符进行奇怪的操作并欺骗Sass以取消引发可能格式错误的字符串。

答案 1 :(得分:0)

或者,您可以使用辅助函数从字符串中删除空格:

@function nospaces($str) {
  @while (str-index($str, ' ') != null) {
    $index: str-index($str, ' ');
    $str: "#{str-slice($str, 0, $index - 1)}#{str-slice($str, $index + 1)}";
  }
  @return $str;
}

然后函数看起来像这样:

@mixin icon ($name, $code) {
  .#{$name}:before {
    content: nospaces("\ #{$code}");
  }
}

@include icon('test', '4556');

或没有引号:

@mixin icon ($name, $code) {
  .#{$name}:before {
    content: nospaces(\ #{$code});
  }
}

@include icon('test', '4556');