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

Popular posts from this blog

c# - How to set Z index when using WPF DrawingContext? -

razor - Is this a bug in WebMatrix PageData? -

visual c++ - Using relative values in array sorting ( asm ) -