LESS中的动态CSS属性？

我正在为双向网站编写一个较少的样式表,我需要编写一个较少的文件并生成两个不同的样式表,一个用于从左到右的布局(ltr),另一个用于从右到左的布局(rtl) )

所以当我为rtl布局设计样式时,我想将每个左边的值转换为正确的,它是漂浮,填充或边距,@H_301_3@

为此,我在less文件的顶部定义了所需的变量,如下所示：@H_301_3@

@left: right;
@right: left;

简单地说,我可以像这样动态浮动元素@H_301_3@

float: @left; // this will be floated to left in ltr layout while it will be right in rtl layout.

但我的问题是我希望能够使用这些变量来产生动态属性,例如绝对或相对地定位元素时,我希望能够根据@left的值动态写入左或右属性变量如下@H_301_3@

position: relative;
@left: 10px;

但这会给编译带来错误,任何线索如何做到这一点,请注意我使用SASS完成了这个,但到现在为止我无法使用LESS？@H_301_3@

解决方法

下面的解决方案允许您使用LESS编写样式一次,然后将它们编译为两个不同的css样式表,用于rtl和ltr布局.

基本上我们将有三个LESS文件(它们可以更多！)：@H_301_3@

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中定义以下变量：@H_301_3@

@left: left;
@right: right;

@import "main.less";

而在style-rtl.less中,它们将具有以下值：@H_301_3@

// reflect variables
@left: right;
@right: left;

@import "main.less";

现在在main.less中,我们将定义以下mixins@H_301_3@

.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页面上浮动到右侧@H_301_3@

请注意,您可以定义填充,边距,边界半径等.在这里使用相同的方式.@H_301_3@

UPDATE@H_301_3@

我在github上创建了两个项目来帮助构建双向应用程序@H_301_3@

> bi-app-less
> bi-app-sass@H_301_3@

积分：@H_301_3@

灵感来自我亲爱的朋友Victor Zamfir@H_301_3@

LESS中的动态CSS属性？

解决方法

猜你在找的CSS相关文章