LESS中的动态CSS属性？ [英] Dynamic CSS properties in LESS?
问题描述
我为一个双向网站写了一个较少的样式表，我需要写一个较少的文件，并产生两个不同的样式表，一个用于从左到右布局（ltr），另一个用于右到左layouts（rtl）
所以当我为样式的rtl布局，我想转换每个左侧的值是正确的，它是一个浮点数，填充或边距， / p>
为此，我在我的less文件的顶部定义了所需的变量，如下所示：
@left：right;
@right：left;
简单来说，我可以像这样动态浮动元素
float：@left; //这将浮动到左边的ltr布局，而它将是正确的rtl布局。
但我的问题是我想要能够使用这些变量来产生动态属性，例如当定位元素绝对地或相对地，我想能够动态地写入左或属性，取决于 @left 变量的值如下
@left：10px;
但这给出编译错误，任何线索如何做，注意，
下面是解决方案，让你写你的样式一次使用LESS，然后将它们编译为rtl和ltr布局的两个不同的CSS样式表。
基本上我们有三个LESS文件更多！）：
style-ltr.less //这里我们持有rtl变量
style-rtl。 less // rtl variables
main.less //这里我们将写出我们的样式
style-ltr.less 中定义以下变量：
@left ： 剩下;
@right：right;
@importmain.less; $ style-rtl.less 时，
将具有以下值：
//反映变量
@left：right;
@right：left;
@importmain.less;
现在在 main.less 将定义以下mixin
.left（@distance）when（@left = left）{
left：@距离;
}
.left（@distance）when（@left = right）{
right：@distance;
}
.right（@distance）when（@right = right）{
right：@distance;
}
.right（@distance）when（@right = left）{
left：@distance;
}
//现在我们可以使用这些混合来设计我们的元素样式
div.something {
position：relative;
.left（10px）;
float：@left;
}
现在我们所要做的就是包含 style -rtl.less 在rtl页面中包含（或编译的css版本），
以及包含 style-ltr.less ltr页面， div.something 将浮动在ltr页面的左侧，而它将悬浮在rtl页面的右侧
请注意，您可以使用与此相同的方式定义 padding，margin，border-radius ...等。
UPDATE
我在github上创建了两个项目来帮助构建双向应用程序
- 双应用程式
- 双用途
/ strong>
I am writing a less stylesheet for a bi-directional website, and I need to write a single less file and produce two different stylesheets one for left-to-right layouts (ltr) and the other for right-to-lef layouts (rtl)
so when i am styling for rtl layouts, i want to convert every left value to be right, wither it is a float, padding or margin,
to do so, I have defined the required variables at the top of my less file as follows:
@left: right;
@right: left;
simply, i can float elements dynamically like this
float: @left; // this will be floated to left in ltr layout while it will be right in rtl layout.
but my problem is that I want be able also to use these variables to produce dynamic properties, for example when positioning elements absolutely, or relatively, i want to be able to write the left or right property dynamically depending on the value of the @left variable as follows
position: relative;
@left: 10px;
but this gives an error on compiling, any clue how to do that, Note that I have done this using SASS, but till now I couldn't get it to work with LESS ?
Below is the solution that lets you write your styles once using LESS, then compile them to be two different css stylesheets for both rtl, and ltr layouts.
basically we'll have three LESS files (they can be more!):
style-ltr.less // this where we hold the rtl variables
style-rtl.less // rtl variables
main.less // here we'll write our styles
in style-ltr.less define the following variables:
@left: left;
@right: right;
@import "main.less";
while in style-rtl.less they will have the following values:
// reflect variables
@left: right;
@right: left;
@import "main.less";
now in main.less, we'll define the following 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;
}
now all we have to do is to include style-rtl.less in rtl pages include (or the compiled css version),
as well to include style-ltr.less in ltr pages, and div.something will be floated to the left on ltr pages, while it will be floated to the right on the rtl pages
Note that you can define padding, margin, border-radius ...etc. using the same way here.
UPDATE
I created two projects on github to help building a bi-directional applications
Credits:
inspired by my dear friend Victor Zamfir
这篇关于LESS中的动态CSS属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
