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);
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!
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(...) }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With