Смешанный сценарий, пытаясь конвертировать CSS

Question

У меня проблема при преобразовании CSS в LESS CSS в следующем сценарии.

В приведенном ниже CSS у меня есть те же свойства для :hover а также .active классы.

CSS:

.sideNav ul li:hover,
.sideNav ul li.active {background-color:#fff;border:1px solid #d0d0d0;border-right:none;border-bottom:1px solid transparent;margin-right:-1px}

Вот как использовать миксин в li.active от &:hover

Меньше CSS:

    .sideNav{
        width:201px;
        margin-bottom:50px;
        float:@left;
        position:fixed;
        ul{
            margin-top:-1px;
            li{
                padding:10px 5px 10px 6px;
                margin:0 0 0 6px;
                border:1px solid transparent;
                border-right:none;
                cursor:pointer;
                border-top:1px solid #d0d0d0;
                overflow:hidden;
                &:hover{
                    background-color:#fff;
                    border:1px solid #d0d0d0;
                    border-right:none;
                    border-bottom:1px solid transparent;
                    margin-right:-1px;
                }
                li.active{

                    /* How to call "&:hover" mixin here */

                }
            }
        }
    }

Спасибо

Answer 1

Нет необходимости использовать миксины в вашем случае, просто сделайте то же самое, что и с обычным CSS:

&:hover,
&.active{
    background-color:#fff;
    border:1px solid #d0d0d0;
    border-right:none;
    border-bottom:1px solid transparent;
    margin-right:-1px;
}

Если вы действительно хотите использовать миксин, вам нужно определить миксин, а не использовать объявление CSS:

/* Mixin definition, notice the () */
.myhover() {
    background-color:#fff;
    border:1px solid #d0d0d0;
    border-right:none;
    border-bottom:1px solid transparent;
    margin-right:-1px;
}
.sideNav{
    width:201px;
    margin-bottom:50px;
    float:@left;
    position:fixed;
    ul{
        margin-top:-1px;
        li{
            padding:10px 5px 10px 6px;
            margin:0 0 0 6px;
            border:1px solid transparent;
            border-right:none;
            cursor:pointer;
            border-top:1px solid #d0d0d0;
            overflow:hidden;
            &:hover{
                /* Call the mixin */
                .myhover();
            }
            &.active{
                .myhover();
            }
        }
    }
}