.box-shadow 值前面的波浪号 [英] Tilde in front of .box-shadow value

问题描述

我正在查看 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 中的语法错误.

In LESS, a tilde ~ before a string "" literal outputs the string as-is, because it may be a syntax error in pure 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;)

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

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

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 值前面的波浪号的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！