防止Sass将引号引起来的值[重复]

您可以尝试＃。我在混入和列表中遇到了类似的问题

@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});

As you can see i use #-sign with {} and + it not necessary any more. The very interesting here is that this only appear with lists/append as you can see in my outer else. You could find it at the sass reference page Division and slash If you want to use variables along with a plain CSS /, you can use #{} to insert them. For example: p { $font-size: 12px; $line-height: 30px; font: #{$font-size}/#{$line-height}; }

Hope it helps

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

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

在萨斯： 13 * 1% = 13%

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

但这px*px不是有效的CSS单位，因此您必须通过除以来将其取消1px

30px*px / 1px = 30px

希望这对您最初的问题有所帮助。

unquote（“％”）可以解决问题。