CSS-Less类使用伪类扩展类

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行为.