CSS-减类伪类扩展类

Question

我不知道我怎么会做这样的事情用更少的CSS如下：

.btn { 
    color : black; 
} 

.btn:hover { 
    color : white; 
} 

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

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

感谢

Answer 1

UPDATE： 如果您不能修改外部文件只是重新定义选择，并添加缺少的状态：

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

每个元素创建将继承任何定义，包括悬停状态。我认为这是LESS的主要惊人功能之一。

希望这会有所帮助。

Answer 2

在更短的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行为。