SASS 无法正常工作。尝试为 css 属性的值设置前缀答案

【问题标题】：SASS is not working properly. Trying to set prefixes for values of css propertySASS 无法正常工作。尝试为 css 属性的值设置前缀
【发布时间】：2012-03-21 06:06:34
【问题描述】：

天哪，我试过这个

@mixin prefix($property, $value){

    #{$property}: -webkit-#{$value};
    #{$property}:  -moz-#{$value};
    #{$property}: #{$value};
}

但我在使用这个@include prefix(display, border-box)时得到了这个

  display: -webkit- border-box;
  display: -moz- border-box;
  display: border-box;

前缀和 css 值之间有烦人的空格。如何摆脱它？提前谢谢！

【问题讨论】：

你使用了一次后缀并添加了另一个前缀:)

标签： css whitespace sass prefix

【解决方案1】：

使用您的代码并只是将后缀交换为前缀对我来说很好。这是我插入Sass Try Online generator 的文本字符串。

@mixin prefix($property, $value){

    #{$property}: -webkit-#{$value};
    #{$property}:  -moz-#{$value};
    #{$property}: #{$value};
}

h2 {
    @include prefix(display, border-box)
}

输出类似于以下代码：

h2 {
  display: -webkit-border-box;
  display: -moz-border-box;
  display: border-box; }

【讨论】：

由于某种原因，空白消失了，现在工作正常！可能是我在那里做错了什么......
我遇到了类似的问题。粘贴到在线生成器中的代码没有空格，但在我的机器上编译时，“/”周围有空格。

【解决方案2】：

试试：

@include prefix(display,border-box); //Note there is no white space before border-box argument

在 Sass 中参考：

CSS 指定了两种字符串：带引号的字符串，例如“Lucida Grande”或“http://sass-lang.com”，以及不带引号的字符串，例如 sans-serif 或粗体。 SassScript 可以识别这两种类型，一般来说，如果在 Sass 文档中使用了一种字符串，那么在生成的 CSS 中将使用这种字符串。

Sass 占用了你在论证之前写的那个空白。以下也应该有效：

@include prefix(display, "border-box");

【讨论】：