.box-shadow 值前面的波浪号

问题描述

我正在查看 bootsrap mixins.less 并注意到 box-shadow 值前面有一个波浪号.它的目的是什么?如果我的网站支持 IE9 及更高版本，我应该使用它吗?

I was looking at bootsrap mixins.less and noticed a tilde in front of box-shadow value. What purpose does it serve? If my website supports IE9 and higher should I be using it?

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

推荐答案

这就是 波浪号引用 CSS 转义.

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

在">这个特定实例转义逗号 ,属于box-shadow多个值的字符串中的字符> 财产.

In this particular instance, it's used in order to escape the comma , character at the string which belongs to the multiple values of box-shadow property.

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

Because the comma is used to separate the arguments of less mixins. So they did:

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

或者，他们可以将值的列表传递到 .box-shadow() 混合中.

来自 doc:

From the doc:

如果编译器在 mixin 调用中看到至少一个分号或者声明，它假定参数用分号和所有逗号都属于 css 列表
...
使用虚拟 分号 来创建包含一个参数的 mixin 调用逗号分隔的 css list: .name(1, 2, 3;)

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

Hence, they could just use a semicolon at the end of the value to make the compiler treat that as a list:

.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);
}

这是上述方法的示例.

Here is an example of the above approaches.

这篇关于.box-shadow 值前面的波浪号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！