LESS 中的动态 CSS 属性？

Question

我正在为一个双向网站编写一个 less 样式表，我需要编写一个 less 文件并生成两个不同的样式表，一个用于从左到右布局 (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 或 right 属性关于@left变量的值如下

position: relative;
@left: 10px;

但这会在编译时出错，任何线索如何做到这一点，请注意我已经使用 SASS 完成了这项工作，但直到现在我无法让它与 LESS 一起工作？

Answer 1

下面的解决方案让您可以使用 LESS 编写一次样式，然后将它们编译为 rtl 和 ltr 布局的两个不同 css 样式表。

基本上我们将拥有三个 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 页面包含（或编译后的 css 版本）中包含style-rtl.less， 以及在ltr页面中包含style-ltr.less，div.something将在ltr页面上浮动到左侧，而在rtl页面上将浮动到右侧

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

更新

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

• bi-app-less
• bi-app-sass

学分：

受到我亲爱的朋友的启发 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 的范围扩大到父容器（如页眉/内容/侧边栏/页脚）然后从那里进行调整来使其更加有用。它们可能有很多共同点，例如背景、颜色、字体大小……您只需处理它们的 -ltr/-rtl 版本的差异即可。

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

希望这会有所帮助！