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

Posted 2023-02-22

【中文标题】SASS 无法正常工作。尝试为 css 属性的值设置前缀

【英文标题】：SASS is not working properly. Trying to set prefixes for values of css property

【发布时间】：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 值之间有烦人的空格。如何摆脱它？ 提前谢谢！

【问题讨论】：

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

【参考方案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");