Question

我想知道如何用更少的css做以下的事情：

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.btn-foo {
  .btn;
  &:hover {
    .btn:hover;
  }
}

当然这只是一个例子，需要指出的是，如果有任何方法可以扩展伪类，以避免在我需要的地方重新键入:hover伪类的属性。我知道我可以为此创建一个mixin，但我想知道我是否可以避免它。

由于

Answer 1

更新：如果您无法修改外部文件，只需重新定义选择器，并添加缺少的状态：

.btn {
  // not adding anything here, won't affect existing style
  &:hover {
    // adding my own hover state for .btn
    background: yellow;
    ...
  }
}

// this will make your foo button appear as in external style
// and have the :hover state just as you defined it above
.btn-foo {
  .btn;
}

现在好些？：）

您不需要伪类。它会起作用:)）

试试这个：

.btn {
  background: yellow;

  &:hover { // define hover state here
    background: green;
  }
}

button {
  .btn;
}

您创建的每个<button class='btn'>元素都将继承已定义的内容，包括悬停状态。我认为这是LESS的主要特色之一。

希望这有帮助。

Answer 2

在Less 1.4.0（1.4.1？）

中

此：

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.btn-foo:extend(.btn all) { 
}

扩展到：

.btn,
.btn-foo {
  color: black;
}
.btn:hover,
.btn-foo:hover {
  color: white;
}

虽然谨慎，但是：

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.abc .btn {
  margin: 2px;
}

.btn-foo:extend(.btn all) {

}

将输出：

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

.abc .btn {
  margin: 2px;
}

.btn-foo:extend(.btn all) {

}

我已经超过半小时未查看SASS，但我相信后一种情况是默认（或仅限）@extend行为。

CSS-Less类使用伪类扩展类

2 个答案: