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

【问题标题】：Creating multiple CSS files from Less based on static variables基于静态变量从 Less 创建多个 CSS 文件
【发布时间】：2015-09-24 14:55:12
【问题描述】：

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

因此标准 (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

产生：

样式.css

样式.rtl.css

【问题讨论】：

标签： css less right-to-left direction

【解决方案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*/

【讨论】：

谢谢，这如何产生多个 CSS 文件？您是否建议我需要有重复的 LESS 文件，其中一个导入 styles.less，另一个导入 styles-rtl.less？
其实我现在明白了——我们会有一个覆盖更少的文件来导入原始的更少文件，完美，干杯！