在.box-shadow值前面的Tilde

Question

我正在看bootstrap mixins.less并注意到box-shadow值前面的波浪号。它有什么用途？如果我的网站支持IE9，我应该使用它吗？

.box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}");

Answer 1

这是代字号 CSS escaping。

  

在LESS中，字符串~文字前面的波浪号""输出字符串   原样，因为纯LESS可能是语法错误。

在this particular instance中，它用于转义逗号 ,字符，该字符串属于{{>多个值 {{ 1}}属性。

因为逗号用于分隔较少mixins的参数。所以他们做了：

box-shadow

---

或者，他们可以将列表值传递到.foo { .box-shadow(~"inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @{color-rgba}"); } mixin。

来自 doc ：

  

如果编译器在mixin调用中看到至少一个分号或   声明，它假定参数由分号和。分隔   所有逗号都属于css列表
  ...
  使用虚拟分号创建一个包含一个参数的mixin调用   逗号分隔的css 列表：.box-shadow()

因此，他们可以在值的末尾使用分号，以使编译器将其视为列表：

.name(1, 2, 3;)

与...相同：

.bar {
  .box-shadow(
    inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba;
                  //  They could append a semicolon here ^
  );
}

以上方法的 an example 。