Tilde before .box-shadow

Question

I looked at bootsrap mixins.less and noticed a tilde in front of the box-shadow value. What purpose does this serve? If my site supports IE9 and higher, should I use it?

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

Answer 1

This is a CSS tilde quote escaping .

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

In this particular instance, it was used to escape a comma in a string that belongs to the multiple values ​​of the box-shadow property.

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

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

---

In addition, they can pass a list of values ​​to the .box-shadow() .

From the doc :

if the compiler sees at least one semicolon inside a mixin call or declaration, it assumes that the arguments are separated by a semicolon and that all commas belong to CSS lists
...
use an empty semicolon to create a mixed call with one argument containing a ca list separated by commas : .name(1, 2, 3;)

Therefore, they could just use a semicolon at the end of the value so that the compiler treats this 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 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.