Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Less - How to insert an @variable into property (as opposed to the value)

Tags:

css

less

In less.js, I'm able to replace values with variables with no problems.

@gutter: 20px;
margin-left:e(%("-%d"), @gutter);

When trying to replace properties with variables, I get errors. How would I perform the following in Less?

@gutter: 20px;
@direction: left;
e(%("margin-%d"), @direction):e(%("-%d"), @gutter);
like image 329
tester Avatar asked Feb 25 '11 19:02

tester


2 Answers

Thanks to Alvivi for the solution and research (you get the reward for that). I decided to add the following as the actual answer since this is a real way to set it up instead of looking at .blah() pseudo code..

Here's a real strategy for setting it up:

@gutter: 20px;
@dir: left;
@dirOp: right;

then create mixins to enhance margin and padding like so:

.margin(left, @dist:@gutter) {
    margin-left:@dist;
}
.margin(right, @dist:@gutter) {
    margin-right:@dist;
}
.padding(left, @dist:@gutter) {
    padding-left:@dist;
}
.padding(right, @dist:@gutter) {
    padding-right:@dist;
}
.lr(left, @dist: 0) {
    left: @dist;
}
.lr(right, @dist: 0) {
    right: @dist;
}

.. then you can just

#selector {
    .margin(@dir);
} 

or

#selector {
    .margin(@dirOp, 10px);
}

all together:

#selector {
    .margin(@dir);
    .margin(@dirOp, 50px);
    .padding(@dir, 10px);
    .padding(@dirOp);
    float:@dir;
    text-align:@dirOp;
    position:absolute;
    .lr(@dir);
}

Easy breezy LTR/RTL with LESS! Woot!

like image 181
tester Avatar answered Sep 22 '22 06:09

tester


Escaping, as says the documentation, is used to create CSS values (not properties).

There is a discussion with some workarounds here. One would be using parametric mixins. For example:

.g ()       { /* Common properties */ }
.g (right)  { margin-right: e(...) } 
.g (left)   { margin-left: e(...) }
like image 36
Alvivi Avatar answered Sep 23 '22 06:09

Alvivi