inheritance in lesscss, doesn't inherit sub classes

Question

this is my style.less code:

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

but when I hover #t1 the shadow doesn't change. I want to know why it doesn't work and expect add #t1:hover and inherit the style is there any other way?

Answer 1

You need to change the .hover class to include the :hover state as part of the class definition:

.hover {
    ...styles...

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

Example

Answer 2

In order to have the :hover styles generated correctly you need to connect .shadow and .shadow:hover via the & operator so they belong together:

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

The rest can stay the same, because

#t1{
  .shadow;
}

will now automatically generate both, the normal and the hover rules.

You can try it out here: Online-Less-Converter

Every additional block you add to .shadow via the & operator will automatically be applied to #t1 as well, so if you add another:

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

the .foo ruleblock will be generated for #t1 as well:

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