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

Answer 2

为了正确生成:hover个样式，您需要通过.shadow运算符连接.shadow:hover和&，以便它们属于一起：

.shadow {
    /*normal styles*/
    &:hover{
       /* hover styles */
    }
}

其余的可以保持不变，因为

#t1{
  .shadow;
}

现在将自动生成正常规则和悬停规则。

您可以在此处试用：Online-Less-Converter

您通过.shadow运算符添加到&的其他每个块也会自动应用于#t1，因此如果您添加另一个：

.shadow{
    &:hover{}   
    &.foo{
       /* another set of rules*/
    }
}
#t1{
    .shadow; /* this will now generate 3 ruleblocks for #t1*/
}

还会为.foo生成#t1 ruleblock：

#t1{...}
#t1:hover{...}
#t1.foo{/* another set of rules*/}

在lesscss中继承，不继承子类

2 个答案: