variables - LESS CSS Escape entire CSS rule with different prefixes? -

variables - LESS CSS Escape entire CSS rule with different prefixes? -

how escape following:

.prefix(@rule, @prop) { -webkit-@{rule}: @{prop}; -moz-@{rule}: @{prop}; -o-@{rule}: @{prop}; -ms-@{rule}: @{prop}; @{rule}: @{prop}; }

i've tried bunch of different ways, wrapping in ~"stuff", wrapping variables in @{var}, backslashing -'s... no success!

edit: there's pull req on github: https://github.com/cloudhead/less.js/pull/698

update less 1.6+

your original plan works the less 1.6 update. syntax needed:

less

.prefix(@rule, @prop) { -webkit-@{rule}: @prop; -moz-@{rule}: @prop; -o-@{rule}: @prop; -ms-@{rule}: @prop; @{rule}: @prop; } .test { .prefix(box-sizing, border-box); }

css output

.test { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }

nevertheless original reply other preprocessing of property values still holds.

original reply (pre 1.6)

less not allow dynamic properties (and yes, believe sass does).

however, not exclusively bad thing pattern matching needs used less instead, forces 1 think through differences might needed pattern matching, , accommodating differences in code.

take next example. requires 2 variables, , (at present) allows 2 others (here, gradients background image). expanded allow more variables if needed.

note how each nested mixin expects different types of things passed sec , later variables, , each 1 can preprocess variables in different ways. illustration below allows opacity passed either decimal value or numeric integer (though value of 1 assume decimal value of 1.0 (i.e. 100%) not 0.01. allows padding in box-sizing property, filters out non-mozilla browsers (which according page not supported in other browsers). can see "thinking" through each property may need beneficial, , having set different pattern matched mixins each can valuable.

less

.prefix(@prop, @v1, @v2:~'', @v3:~'') { .prop(opacity) { @decvalue: `(@{v1} > 1 ? @{v1}/100 : @{v1})`; @intvalue: `(@{v1} <= 1 ? @{v1}*100 : @{v1})`; filter: alpha(opacity=@intvalue); -webkit-opacity: @decvalue; -moz-opacity: @decvalue; opacity: @decvalue; } .prop(boxsize) { @filteredsupport: ~`("@{v1}" == "padding" ? "border" : "@{v1}")`; -webkit-box-sizing: (~"@{filteredsupport}-box"); -moz-box-sizing: (~"@{v1}-box"); box-sizing: (~"@{filteredsupport}-box"); } .prop(bkggradient) { .filterfirsttwoargs(@type, @color, @gradient) { background-color: @color; background-image: ~"-webkit-@{type}-gradient(@{gradient})"; background-image: ~" -moz-@{type}-gradient(@{gradient})"; background-image: ~" -ms-@{type}-gradient(@{gradient})"; background-image: ~" -o-@{type}-gradient(@{gradient})"; background-image: ~" @{type}-gradient(@{gradient})"; } .filterfirsttwoargs(@v1, @v2, @v3); } .prop(@prop); }

use it:

.myclass { .prefix(opacity, 10); .prefix(boxsize, padding); .prefix(bkggradient, linear, #f07575, "top, hsl(0, 80%, 70%), #bada55"); }

css output

.myclass { filter: alpha(opacity=10); -webkit-opacity: 0.1; -moz-opacity: 0.1; opacity: 0.1; -webkit-box-sizing: border-box; -moz-box-sizing: padding-box; box-sizing: border-box; background-color: #f07575; background-image: -webkit-linear-gradient(top, hsl(0, 80%, 70%), #bada55); background-image: -moz-linear-gradient(top, hsl(0, 80%, 70%), #bada55); background-image: -ms-linear-gradient(top, hsl(0, 80%, 70%), #bada55); background-image: -o-linear-gradient(top, hsl(0, 80%, 70%), #bada55); background-image: linear-gradient(top, hsl(0, 80%, 70%), #bada55); }

gradient output illustration taken illustration found here.

css variables escaping less