less - 在lesscss中继承，不继承子类

Question

这是我的 style.less 代码:

.transition {
    -ms-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.shadow {
    padding: 10px 10px 10px 10px;
    margin: 10px 10px 10px 10px;
    -moz-box-shadow: 0px 0px 10px #808080;
    -o-box-shadow: 0px 0px 10px #808080;
    -webkit-box-shadow: 0px 0px 10px #808080;
    box-shadow: 0px 0px 10px #808080;
}

    .shadow:hover {
        -moz-box-shadow: 0px 0px 10px #a5a5a5;
        -o-box-shadow: 0px 0px 10px #a5a5a5;
        -webkit-box-shadow: 0px 0px 10px #a5a5a5;
        box-shadow: 0px 0px 10px #a5a5a5;
    }


.radius {
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

#t1 {
    .shadow;
    .transition;
    .radius;
}

但是当我将鼠标悬停在 #t1 时，阴影不会改变。我想知道为什么它不起作用并期望添加 #t1:hover 并继承样式还有其他方法吗？

Answer 1

您需要更改 .hover 类以将 :hover 状态作为类定义的一部分:

.hover {
    ...styles...

    &:hover {
        ...hover state styles...
    }
}
.someOtherClass {
    .hover;
}

Example