如何使用Less定位类中的元素？

Question

我想使用less来针对类中的特定元素。

在这种情况下，我想针对类button中的一个锚点标签a。

目前我有：

.button {
    /* lots of bits and pieces go here, hence 
    the need to keep it at a class level
    */


    /* further down, but still in .button */
    /* Attempt 1 - fails: compiled = a .button (note the space)
    a& {
         height:20px;
    }

    /* Attempt 2 - fails: compiled = .buttona
    &a {
        height:20px;
    }
}

我基本上希望它可以编译成：

a.button

这样我就可以创建诸如：

<a class="button">
<button class="button">

但是当它是一个锚点时，稍微改变一下。我不想太早就扔出“这是Less中的一个bug！”的牌子，但如果我使用&.another-class，它会像预期的那样工作（编译后为.button.another-class），但是如果针对元素，则不起作用。

- Chris

Answer 1

您正在使用旧版本的less。下面的代码将使用less 1.3.3生成正确的CSS。

.button {
 a& {
    height:20px;
  }
}

生成：

a.button {
  height: 20px;
}

- Allen Bargi

---

你说得对，我在本地使用SimpLESS进行编译，但似乎它只使用了less v1.3.0（而不是1.3.3）。如果我直接使用库（1.3.3），该bug已经被修复。干杯！ - Chris

Answer 2

@Allen Bargi的答案是正确的，但仅适用于此特定情况。我有点困惑你想要实现什么。

正如@Allen Bargi所指出的那样，这将针对具有“button”类的“a”元素并生成一个

.button {
 a& {
    height:20px;
  }
}

它生成：

a.button {
  height: 20px;
}

同时，以下代码将针对包含“button”类的元素中的“a”元素进行操作。这似乎是您最初的目标。

.button {
 a {
    height:20px;
  }
}

它生成：

.button a {
    height:20px;
}

在这种情况下，两种解决方案都可能很好，因为您对父元素和子元素都使用了相同的“button”类，但它们并不针对相同的元素。

希望这可以帮到您。

- Leo