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

问题描述

我当时看着bootsrap mixins.less，发现盒子阴影值前面有波浪号.它有什么作用?如果我的网站支持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.

因为逗号用于较少混合的参数分开.因此他们做到了:

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() mixin.

---

Alternatively, they could pass a list of values into the .box-shadow() mixin.

来自 文档 :

From the doc:

如果编译器在mixin调用中看到至少一个分号或 声明，它假定参数用分号和 所有逗号都属于CSS列表
...
使用哑元分号创建带有一个包含以下参数的mixin调用 逗号分隔的CSS 列表:.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屋！