Creating multiple CSS files from Less based on static variables - css

Question

I'm looking to create an internationalised application which will support Right To Left content.
Therefore standard (LTR) would be:
div{
padding-left:10px;
}
Whereas RTL would be:
div{
padding-right:10px;
}
Using Less I could do:
#left:right;
.div{
padding-#{left}:10px;
}
Which would produce:
.div {
padding-right: 10px;
}
Is there a way of producing two CSS files for when #left = right and #left = left?
For example I could have:
Styles.less
Which produces:
Styles.css
Styles.rtl.css

Answer 1

this file name will be styles-rtl.less
#import "styles.less";
/*override variables */
#direction :ltr;
#oposite-direction :rtl;
#start-direction :left;
#end-direction :right;
#tr-direction :-1;/*for manipulation transform*/
Example for using:
/*positions*/
position:absolute;
right:0;
/*will be*/
#{start-direction}:0;
/**************/
float:right;
/*will be*/
float:#start-direction;
/**************/
direction:rtl;
/*will be*/
direction:#direction;
/*************/
transform:translateX(180px);
/*will be*/
transform:translateX(180px*#tr-direction);/*multiple by minus*/