css - Less - How to insert an @variable into property (as opposed to the value) -
in less.js, i'm able replace values variables no problems.
@gutter: 20px; margin-left:e(%("-%d"), @gutter);
when trying replace properties variables, errors. how perform following in less?
@gutter: 20px; @direction: left; e(%("margin-%d"), @direction):e(%("-%d"), @gutter);
thanks alvivi solution , research (you reward that). decided add following actual answer since real way set instead of looking @ .blah() pseudo code..
here's real strategy setting up:
@gutter: 20px; @dir: left; @dirop: right;
then create mixins enhance margin , padding 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; }
.. 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 less! woot!
Comments
Post a Comment