Creating multiple CSS files from Less based on static variables

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*/