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

例