Question

我正在为双向网站编写一个较少的样式表，我需要编写一个较少的文件并生成两个不同的样式表，一个用于从左到右的布局（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或{{1}动态取决于right变量的值，如下所示

@left

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

Answer 1

下面的解决方案允许您使用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 pages include（或编译的css版本）中加入style-rtl.less，同时在ltr页面中包含style-ltr.less，div.something将在ltr页面上浮动到左侧，而它将在rtl页面上浮动到右侧

请注意，您可以在此处使用相同的方式定义padding, margin, border-radius ...etc.。

更新

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

现金：

受亲爱的朋友的启发 Victor Zamfir

Answer 2

如果你使用的是DotLess，可以使用更有趣的东西，而不是在这里定义有限数量的mixin。

它内置为RTL插件。

https://github.com/dotless/dotless/wiki/Plugins

dotless.Compiler.exe -p:Rtl:forceRtlTransform=true,onlyReversePrefixedRules=false file.less

Answer 3

您可以查看此库：https://github.com/DevelopmentIL/direction.less

它对许多css规则有很大的支持。例如：

@direction: rtl; // use `rtl` or `ltr`
@import "direction.less";

body {
  .direction();
}

.float {
  .float();
}

.box {
  display: inline-block;
  .margin-left(4px);
  .padding-right(1em);
}

将输出：

body {
  direction: rtl;
}

.float {
  float: right;
}

.box {
  display: inline-block;
  margin-right: 4px;
  padding-left: 1em;
}

Answer 4

更新：看看LESS中的Guard Expressions - 也许这可以帮助一点，你可以创建一些条件语句，但你必须使用mixins ..

我理解你的观点，但另一方面，我会以不同的方式解决这个问题。这是另一个简化的方法 - 您可以在两种情况下定义差异变量，然后根据需要导入 - 例如，放置在master-ltr / master-rtl中，然后导入其余的样式表：

// master-ltr.less
// LTR:
@sidebar-pos-left: 10px;
@sidebar-pos-right: 0px;
@content-float: left;
...
@import 'styles.less';

// your styles.less would have:
.content {
  float: @content-float;
  ...
}
.sidebar {
  position: relative;
  left: @sidebar-pos-left;
  right: @sidebar-pos-right;
  ...
}

..或者更有效 - 使用vars-ltr / rtl创建单独的文件，然后导入到master-ltr / rtl。

不确定布局有多复杂，但也许这会给你一些可以使用的东西？

我使用String Interpolation尝试了这一点，但看起来变量只能嵌入定义的“变量”一侧。我可能在这里错了，也许人们知道如何实现它。

我做的有点不同，不是因为LESS不可能，而是因为代码的组织和一般的更理智的方法（当有时它实际上是“正确的”时，将某些东西命名为“左”并不好“：）

对于position:relative的第二个问题，这是我的看法：

<div class="element element-ltr">...</div>

.element {
  position: relative;
  &.element-ltr {
    left: @element-side-position;
  }
  &.element-rtl {
    right: @element-side-position;
  }
}

这个解决方案有点好，但是如果你的样式表很大，那么你最终会得到很多额外的-ltr和-rtl类。通过将-ltr / -rtl的范围扩展到父容器（如header / content / sidebar / footer）然后从那里进行调整，实际上可以让它变得更加有用。它们可能有很多共同之处，比如背景，颜色，字体大小..你只会研究它们的-ltr / -rtl版本的差异。

另外，阅读LESS Namespaces，他们可以为您提供更多的组织权力。

希望这有帮助！

LESS中的动态CSS属性？

4 个答案: