SASS/SCSS特殊字符拼接问题：修正skew混合宏的输出格式

嘿，我一眼就看出问题出在哪了——你当前的混合宏用了错误的字符串拼接方式，导致角度参数没法被括号正确包裹。咱们直接来改好它：

@mixin skew($axis, $a) {
  transform: skew#{$axis}(#{$a});
  -o-transform: skew#{$axis}(#{$a});
  -moz-transform: skew#{$axis}(#{$a});
  -webkit-transform: skew#{$axis}(#{$a});
}

为什么这样改？ #

Sass里要把变量插入到CSS值或者选择器中，必须用#{}这个插值语法，而不是直接用+拼接字符串。原来的写法skew+$axis+($a)会把所有内容直接连在一起，自然就出现了skewY-4deg这种错误格式。

用skew#{$axis}能正确生成对应的skew函数名（比如skewY或skewX），再加上(#{$a})就会把你的角度参数（比如-4deg）完整包裹在括号里，完美符合你想要的输出格式。

测试一下 #

当你这样调用混合宏时：

.skewed-box {
  @include skew(Y, -4deg);
}

输出的CSS就会是：

.skewed-box {
  transform: skewY(-4deg);
  -o-transform: skewY(-4deg);
  -moz-transform: skewY(-4deg);
  -webkit-transform: skewY(-4deg);
}

内容的提问来源于stack exchange，提问作者user9695282