在.box-shadow值前面的Tilde

Question

我正在看看bootsrap mixins.less并注意到盒子阴影值前面的波浪号.它有什么用途？如果我的网站支持IE9,我应该使用它吗？

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

Answer 1

这就是代字号 - 引用 CSS 转义.

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

在这种特定情况下,它以的二手逃避逗号 ,在属于串字符多个值的box-shadow属性.

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

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

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

来自doc:

如果编译器在mixin调用或声明中看到至少一个分号,则假定参数由分号分隔,并且所有逗号都属于css列表
...
使用dummy 分号创建mixin调用,其中一个参数包含逗号分隔的css 列表:.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);
}

以下是上述方法的示例.