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


i looking @ bootsrap mixins.less , noticed tilde in front of box-shadow value. purpose serve? if website supports ie9 , higher should using it?

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

that tilde-quote css escaping.

in less, tilde ~ before string "" literal outputs string as-is, because may syntax error in pure less.

in this particular instance, it's used in order escape comma , character @ string belongs multiple values of box-shadow property.

because comma used separate arguments of less mixins. did:

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

alternatively, pass list of values .box-shadow() mixin.

from doc:

if compiler sees @ least 1 semicolon inside mixin call or declaration, assumes arguments separated semicolons , commas belong css lists
...
use dummy semicolon create mixin call 1 argument containing comma separated css list: .name(1, 2, 3;)

hence, use semicolon @ end of value make compiler treat list:

.bar {   .box-shadow(     inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba;                   //  append semicolon here ^   ); } 

which same as:

.bar {   @list: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px @color-rgba;   .box-shadow(@list); } 

here an example of above approaches.


Comments

Popular posts from this blog

php - SPIP: From Tag directly to an article -

jquery - isAjaxRequest always return false -

ruby on rails - In a controller spec, how to find a specific tag in the generated view? -