CSS-Less类使用伪类扩展类

前端之家收集整理的这篇文章主要介绍了CSS-Less类使用伪类扩展类前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想知道如何用更少的CSS来做如下的事情:
.btn {
  color : black;
}

.btn:hover {
  color : white;
}

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

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

谢谢

解决方法

更新:
如果您无法修改外部文件,只需重新定义选择器,并添加缺少的状态:
.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;
}

现在好多了?

猜你在找的CSS相关文章