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

Question

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

因此标准(LTR)将是:

div{
   padding-left:10px;
}

而 RTL 是:

div{
   padding-right:10px;
}

我能做的就是少用:

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