css - Mixin 场景，尝试转换 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}

这里是如何在 &:hover 的 li.active 中使用 mixins

更少的 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

在你的情况下不需要使用 mixins，就像你使用常规 CSS 一样:

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

如果你真的想使用 mixin，你需要定义一个 mixin，而不是使用 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();
            }
        }
    }
}