Question

我对Sass很安静...我想用百分比值创建一些css，如：

width : 13%;

该值是sass编号操作的结果。写这个

width : $main-width + "%"

scss代码生成这个：

width : "13%";

css，实际上什么不起作用，因为它应该是：

width : 13%;

写

width : $main-width %;

结果

width : 13 "%"

什么也导致了非工作的CSS规则。有没有办法让Sass打印13％，没有引号？

Answer 1

将Sass中的单位想象为代数中的变量而不是仅仅连接字符串。

在代数中： 2x * 3 = 6x

在萨斯： 13 * 1% = 13%

使用此方法进行更高级的数学运算。 10px * 3px = 30px*px

但是px*px不是有效的CSS单元，因此您必须通过除以1px来取消一个

30px*px / 1px = 30px

希望这有助于超越原来的问题。

Answer 2

unquote("%")可以解决问题。

Answer 3

你可以试试＃。我有一个类似的问题与mixin和列表

@mixin p($value, $position: a, $unit: $rhythm-unit){
  $vallist: ();
  @if length($value) > 1 {
    @each $sval in $value {
      $sval: 0 !default;
      $vallist: append($vallist, #{$sval}#{$unit});
    }
    padding: $vallist;
  } @else{
    @if $position == t {
      padding-top: $value+$unit;
    } @else if $position == r {
      padding-right: $value+$unit;
    } @else if $position == b {
      padding-bottom: $value+$unit;
    } @else if $position == l {
      padding-left: $value+$unit;
    } @else {
      padding: $value+$unit;
    }
  }
}

问题是

append($vallist, $sval+$unit);

它总是在这些值附近添加引号，例如“1rem”“1.25rem”这不是正确的css语法。

我将其替换为：

append($vallist, #{$sval}#{$unit});

正如你所看到我使用＃-sign与{}和+它不再需要了。这里非常有趣的是，这只会出现在list / append中，你可以在我的外部其他地方看到。您可以在sass参考页Division and slash找到它 如果要将变量与纯CSS /一起使用，可以使用＃{}插入它们。例如： p { $ font-size：12px; $ line-height：30px; font：＃{$ font-size} /＃{$ line-height}; }

希望有所帮助

阻止Sass围绕价值做出报价

3 个答案: