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
Post a Comment