twitter-bootstrap-3 – .box-shadow值前面的Tilde

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属性的多个值.

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

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

或者,他们可以将值列表传递给.box-shadow()mixin.

从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 8px @color-rgba;
                  //  They could append a semicolon here ^
  );
}

与以下内容相同：

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

这是上述方法的an example.