twitter bootstrap 3 - Tilde in front of .box-shadow value

Question

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

Answer 1

That is the tilde-quote CSS escaping.

In LESS, a tilde ~ before a string "" literal outputs the string as-is, because it may be a syntax error in pure LESS.

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

---

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

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

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

Which is as the same as:

.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.