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">

但是当它的锚点稍微改变它。我不想过早地使用it's a bug in less!卡，但如果我使用&.another-class它会按预期工作（已编译：{{1}}，但在定位元素时不会

Answer 1

您正在使用旧版本的less。下面的代码使用较少的1.3.3

生成正确的CSS

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

生成：

a.button {
  height: 20px;
}

Answer 2

@Allen Bargi的回答是正确的，但仅适用于此特定情况。我对你想要达到的目标感到有些困惑。

正如@Allen Bargi指出的那样，这将针对＆＃34; a＆＃34;使用＆＃34;按钮＆＃34; class并生成一个

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

它生成：

a.button {
  height: 20px;
}

同时，以下内容将针对＆＃34; a＆＃34;元素包含带有＆＃34;按钮的元素＆＃34;类。在我看来，这是你最初的目标。

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

它生成：

.button a {
    height:20px;
}

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

我希望这会有所帮助。

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

2 个答案: