基于静态变量从Less创建多个CSS文件

Question

我正在寻找一个支持从右到左内容的国际化应用程序。

因此标准（LTR）将是：

div{
   padding-left:10px;
}

而RTL将是：

div{
   padding-right:10px;
}

使用Less我可以做：

@left:right;

.div{
    padding-@{left}:10px;
}

哪会产生：

.div {
  padding-right: 10px;
}

有没有办法为@left = right和@left = left生成两个CSS文件？

例如我可以：

  

Styles.less

产生：

  

Styles.css中

     

Styles.rtl.css

Answer 1

此文件名将为 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*/

使用示例：

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