我正在为双向网站编写一个较少的样式表,我需要编写一个较少的文件并生成两个不同的样式表,一个用于从左到右的布局(ltr),另一个用于从右到左的布局(rtl) )
所以当我为rtl布局设计样式时,我想将每个左边的值转换为正确的,它是漂浮,填充或边距,
为此,我在less文件的顶部定义了所需的变量,如下所示：
@left: right; @right: left;
简单地说,我可以像这样动态浮动元素
float: @left; // this will be floated to left in ltr layout while it will be right in rtl layout.
但我的问题是我希望能够使用这些变量来产生动态属性,例如绝对或相对地定位元素时,我希望能够根据@left的值动态写入左或右属性变量如下
position: relative; @left: 10px;
但这会给编译带来错误,任何线索如何做到这一点,请注意我使用SASS完成了这个,但到现在为止我无法使用LESS？
解决方法
下面的解决方案允许您使用LESS编写样式一次,然后将它们编译为两个不同的css样式表,用于rtl和ltr布局.
基本上我们将有三个LESS文件(它们可以更多！)：
style-ltr.less // this where we hold the rtl variables style-rtl.less // rtl variables main.less // here we'll write our styles
在style-ltr.less中定义以下变量：
@left: left; @right: right; @import "main.less";
而在style-rtl.less中,它们将具有以下值：
// reflect variables @left: right; @right: left; @import "main.less";
现在在main.less中,我们将定义以下mixins
.left(@distance) when (@left = left) {
left: @distance;
}
.left(@distance) when (@left = right) {
right: @distance;
}
.right(@distance) when (@right = right) {
right: @distance;
}
.right(@distance) when (@right = left) {
left: @distance;
}
// now we can style our elements using these mixins
div.something {
position: relative;
.left(10px);
float: @left;
}
现在我们所要做的就是在rtl页面include(或编译的css版本)中包含style-rtl.less,
以及在ltr页面中包含style-ltr.less,div.something将在ltr页面上浮动到左侧,而它将在rtl页面上浮动到右侧
请注意,您可以定义填充,边距,边界半径等.在这里使用相同的方式.
UPDATE
我在github上创建了两个项目来帮助构建双向应用程序
积分：
灵感来自我亲爱的朋友Victor Zamfir
