1

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

我设置@direction在顶部。然后，我希望某些元素向左浮动 ltr，向右浮动 rtl。我还想定位absolute，并基于.@direction

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

.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;
}

这就是想法，但任何帮助将不胜感激。我看过守卫和参数混合，但似乎无法确定它。

4

5 回答 5

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";
  }
}
于 2012-05-24T04:13:01.207 回答
1

好的。经过一番演奏和一些思考，这就是我想出的。如果我不能将变量用作属性，那么我将使用@direction 和@directionOpp（与 rtl、ltr 相对）用作布局助手。

我有 2 个变量。

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

这是我的水平定位混合。

  #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，因为它是参数混合，并且由于它们都是独立的，我可以有任何我需要的边距、浮动、填充等组合，而无需具有硬编码属性的多个混合。

好的解决方案？戴夫

于 2012-05-24T12:05:15.603 回答
0

您的第一个问题是变量实际上是 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;
}
于 2012-05-23T17:01:47.983 回答
0

我在 dotless 中实现了一个 rtl 扩展。在 github 上找到它。该扩展名将float:left反转为float:right和margin-left:5pxto margin-right:5px。

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

插件的 dotless wiki上提供了更多信息。

您还可以在 wiki 上找到有关如何使用 dotless 和插件的一般信息。

于 2012-05-23T18:56:55.110 回答
0

在你的LESS文件中试试这个 Mixins

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

然后像这样使用它们

html {
    direction: @direction;
}

body{
    direction: @direction;
}

对于Left和Right命令，您应该使用这些 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%');
}

请注意，我将@direction设置为RTL，所以上面的样式会像这样

.TestClass{
    right: 100%;
}

如果您将页面的方向性设置为LTR，则结果如下

.TestClass{
    left: 100%;
}

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

于 2013-06-22T12:37:52.220 回答