CSS-Less类扩展类与伪类 [英] CSS-Less class extend class with pseudo class

问题描述

我想知道如何使用较少的css来做类似下面的操作：

I was wondering how I could do something like the following with less css:

.btn {
  color : black;
}

.btn:hover {
  color : white;
}

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

当然这只是一个例子，指向是否有任何方法来扩展伪类，以避免重新键入：hover 伪类的所有地方我需要它们的属性。我知道我可以创建一个混合，但我想知道，如果我可以避免它。

Of-course this is just an example, what need to point is if there is any way to extend the pseudo-class in order to avoid re-type the properties of :hover pseudo class everywhere I need them. I know I could create a mixin for that but I'm wondering if I could avoid it.

感谢

推荐答案

更新：
不修改外部文件只重新定义选择器，并添加缺少的状态：

UPDATE: If you can't modify external files just redefine the selectors, and add missing states:

.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;
}

现在更好？ ：）

您不需要伪类。它只会工作）

You don't need pseudo class. It will just work :)

尝试：

.btn {
  background: yellow;

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

button {
  .btn;
}

每个< button class ='btn'> ; 元素将继承任何定义，包括hover状态。我认为这是LESS的主要惊人的功能之一。

Each <button class='btn'> element you create will inherit whatever was defined, including hover state. I think it's one of the main amazing features of LESS.

希望这有助于。

这篇关于CSS-Less类扩展类与伪类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！