13

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

在这种情况下，我想定位 class 的元素button，但在其中我想定位一个 anchor tag 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">

但是当它是一个锚时稍微改变它。我不想it's a bug in less!太早投入卡片，但如果我使用&.another-class它会按预期工作（已编译：.button.another-class，但在定位元素时不会

4

2 回答 2

17

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

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

生成：

a.button {
  height: 20px;
}
于 2013-01-05T09:34:04.070 回答
-1

@Allen Bargi 的答案是正确的，但仅适用于这种特定情况。我对你想要达到的目标有点困惑。

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

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

它生成：

a.button {
  height: 20px;
}

同时，下面将针对包含带有“按钮”类的元素的“a”元素。在我看来，这是您最初的目标。

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

它生成：

.button a {
    height:20px;
}

在这种情况下，两种解决方案都可以正常工作，因为您对父元素和子元素使用相同的“按钮”类，但它们的目标不是相同的元素。

我希望这有帮助。

于 2017-06-01T15:52:31.033 回答