在SASS参数面前散列

Question

我想知道之间的区别是什么:

@mixin transition($args...) {
  -webkit-transition: $args;
  -moz-transition: $args;
  -ms-transition: $args;
  -o-transition: $args;
  transition: $args;
}

和

@mixin transition($args...) {
  -webkit-transition: #{$args};
  -moz-transition: #{$args};
  -ms-transition: #{$args};
  -o-transition: #{$args};
  transition: #{$args};
}

在争论面前有#的目的是什么？

Answer 1

该#{}语法将在插在大括号中的值转换成字符串。这很有用，例如，在以下情况下，当您的变量仅构成字符串的一部分时。例如：

@mixin background-image($directory) {
    background-image: /#{$directory}image.jpg;
}

这样，SASS 解释器就知道变量在哪里$directory结束。

如果你这样做，编译器会感到困惑：

@mixin background-image($directory) {
    background-image: $directoryimage.jpg;
}

在您给定的示例中，不需要它。两个版本都会产生相同的结果。

您也可以在 mixin 之外执行此操作。考虑这个使用 for 循环的例子：

@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

这将产生：

.item-1 { width: 2em; }
.item-2 { width: 4em; }
.item-3 { width: 6em; }