Question

我正在使用LESS建立一个网站，并希望布局根据方向切换，“ltr”或“rtl”（direction:rtl）

我将@direction设置在顶部。然后有一些我希望浮动的元素左侧为ltr ，右侧为rtl 。我还想定位绝对，并根据@direction应用 padding-left / right 。

我没有为float，pos和padding写出单独的mixins，而是试图做这样的事情：

.mixin (@direction) when (@direction = ltr) {
    @lr:left;
}
.mixin (@direction) when (@direction = rtl) {
    @lr:right;
}

然后这样称呼：

ol li {
    float:@lr;
}

和/或

ol li span.date {
    position:absolute;
    @lr:0;
}

这是个主意，但任何帮助都会受到赞赏。我看过警卫和参数混合，但似乎无法指出它。

Answer 1

我对您解决RTL问题的案例有所了解。在每个类中，我们在其中定义2个mixin用于方向样式表属性。这样的原型：

// @direction variable should be put by somehow
@direction: rlt;

.foo {
  // common properties;
  .dir(@direction);
  .dir(rtl) {
    // RTL properties;
  }
  .dir(ltr) {
    // LTR properties;
  }
}

例如：

// @direction variable should be put by somehow
@direction: rlt;

.foo {
  color: #000000;
  .dir(@direction);
  .dir(rtl) {
    float: left;
    padding-left: 5px;
    background: "rtl.png";
  }
  .dir(ltr) {
    float: right;
    padding-right: 5px;
    background: "ltr.png";
  }
}

Answer 2

行。经过一些游戏和一些思考，这就是我想出来的。如果我不能将变量用作属性，那么我将使用@direction和@directionOpp（与rtl，ltr相反）来用作布局助手。

我有两个变量。

@direction:     ltr; // Change to 'rtl' for arabic, hebrew, etc.
@directionOpp:  rtl; // Make this opposite of @direction, for easier mixins

这是我用于水平定位的mixin。

  #dir {
    .dir(ltr,@dist:0) {left: @dist;}
    .dir(rtl,@dist:0) {right: @dist;}
    .float(ltr){float:left; }
    .float(rtl){float:right;}
    .margin(ltr, @dist:@a){margin-left:@dist;}
    .margin(rtl, @dist:@a){margin-right:@dist;}
    .padding(ltr, @dist:@a){padding-left:@dist;}
    .padding(rtl, @dist:@a){padding-right:@dist;}
  }

这就是我如何称呼它。

ol li {
    #dir.float(@direction);
    #dir.padding(@direction);
}

如果我需要撤销任何内容，那么我可以将@direction替换为@directionOpp。

我还可以指定@dist我需要多少参数mixin，因为它们都是独立的，我可以使用margin，float，padding等任意组合，我需要没有带有硬编码属性的多个mixin。

好的解决方案？戴夫

Answer 3

你的第一个问题是变量实际上是LESS中的常量。所以一旦你设置它，它就不能被覆盖。当您将@lr设置为“left”时，即使您尝试重置变量，它也始终将“left”作为其值。你的第一个想法是哪个问题。

就你的第二个想法而言，LESS不支持使用变量作为属性，只支持使用值。但是你可以像这样破解它：

.mixin(@prop, @value) {
    Ignore: ~"a;@{prop}:@{value}";
}

这不是很干净，但如果你绝对需要这个功能，那就可以了。 Word就是1.4版本。

此外，您正在错误地调用mixin。尝试这样的事情：

.mixin (@direction) when (@direction = ltr) {
    float: left;
}
.mixin (@direction) when (@direction = rtl) {
    float: right;
}

然后这样称呼：

ol li {
    .mixin(ltr);
}

哪个应吐出来：

ol li {
    float: left;
}

Answer 4

我在dotless中实现了一个rtl扩展。在github上找到它。该扩展程序将 float：left 重新置于 float：right 和margin-left:5px转换为margin-right:5px。

它还支持前缀属性以控制它们的反转方式。

dotless wiki for the plugin上提供了更多信息。

您可以找到generic information on how to use dotless and plugins also on the wiki。

Answer 5

在 LESS 文件

中尝试使用此Mixins

@rtl:        rtl;
@ltr:        ltr;
@direction:  @rtl;

然后像这样使用它们

html {
    direction: @direction;
}

body{
    direction: @direction;
}

对于左和正确命令，您应该使用这些mixins

.DockItem(@location, @value) when (@location = "left") and (@direction = @ltr){
    left: @value;
}

.DockItem(@location, @value) when (@location = "right") and (@direction = @ltr){
    right: @value;
}

.DockItem(@location, @value) when (@location = "left") and (@direction = @rtl){
    right: @value;
}

.DockItem(@location, @value) when (@location = "right") and (@direction = @rtl){
    left: @value;
}

然后在你的less文件中你应该像这样调用这个mixins

.TestClass{
    .DockItem('left', '100%');
}

请注意，我将 @direct 设置为 RTL ，因此上面的样式会产生这样的结果

.TestClass{
    right: 100%;
}

如果您将页面的方向性设置为 LTR ，则会产生这样的结果

.TestClass{
    left: 100%;
}

让我知道它是否对您有所帮助

LESS CSS基于变量的变量

5 个答案: