防止 Sass 在值周围加上引号 [重复]

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

在 Sass 中： 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 与 {} 和 + 一起使用，不再需要。 这里非常有趣的是，这仅出现在列表/附加中，正如您在我的外部 else 中看到的那样。 您可以在 sass 参考页面 Division and slash 找到它 如果您想将变量与纯 CSS / 一起使用，您可以使用 #{} 插入它们。例如： p { $字体大小：12px； $行高：30px； 字体：#{$font-size}/#{$line-height}; }

希望对你有帮助