基于静态变量从 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*/

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

Creating multiple CSS files from Less based on static variables

css

direction

less

right-to-left