Question

I’m new to LESS CSS.

In my mide LESS CSS Code. Just example.

@block : body;
@name  : color;
@value : #99CC00;

@block
{
    @name : @value
}

I want this output

body
{
    color : #99CC00
}

Is it posible or not ? If posible please give me the LESS CSS code.

This is my problem

.browser-fix(@key,@value)
{
    -webkit-@key: @value;
    -moz-@key: @value;
    -ms-@key: @value;
    -o-@key: @value;
    @key: @value;
}

p
{
    .browser-fix(box-shadow,1px 1px 5px rgba(0,0,0,0.2) inset);
    .browser-fix(transform,rotate(30deg));
}

Answer 1

I am pretty sure that using a variable to define left-hand side of an assignment is not possible in LESS.

But you could use a parametric mixin and a selector interpolation to accomplish at least half what you are trying to do.

@block: body;

.color-mixin(@value) {
    color: @value;
}

@{block} {
    .color-mixin(#99CC00);
}

Edit:

To address your problem, I would personally do separate mixins for each browser specific attribute because browser specific attributes do not always match the pattern you specified e.g. setting opacity. Separate mixins are also easier to read.

.box-shadow(@shadow) {
    -webkit-box-shadow: @shadow;
    -moz-box-shadow: @shadow;
    box-shadow: @shadow;
}

.rotate(@degrees) {
    -webkit-transform: rotate(@degrees);
    -moz-transform: rotate(@degrees);
    -ms-transform: rotate(@degrees);
    -o-transform: rotate(@degrees);
    transform: rotate(@degrees);
}

// Example of an attribute that does not match the pattern.
.opacity(@opacity) {
    opacity: @opacity / 100;
    filter: ~"alpha(opacity=@{opacity})";
}

p {
    .box-shadow(1px 1px 5px rgba(0,0,0,0.2) inset);
    .rotate(30deg);
}