twitter-bootstrap-3 - .box-shadow 值前面的波浪号

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 .

In LESS, a tilde ~ before a string "" literal outputs the string as-is, because it may be a syntax error in pure LESS.

在 this particular instance , 用于 转义逗号 ,属于 的字符串中的字符多个值 的 box-shadow属性(property)。

因为逗号是用来 的分隔参数 更少的mixin。于是他们做了:

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

或者，他们可以通过 列表值进入 .box-shadow()混合。

来自 doc :

if the compiler sees at least one semicolon inside mixin call or declaration, it assumes that arguments are separated by semicolons and all commas belong to css lists
...
use dummy semicolon to create mixin call with one argument containing comma separated css list: .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 ^
  );
}

这与以下内容相同:

.bar {
  @list: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba;
  .box-shadow(@list);
}

这是 an example 以上方法。