0

以下のシナリオで 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 */

                }
            }
        }
    }

ありがとう

4

1 に答える 1

2

あなたのケースでは mixin を使用する必要はありません。通常の CSS と同じように行うだけです:

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

本当に mixin を使用したい場合は、CSS 宣言を使用するのではなく、mixin を定義する必要があります。

/* 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();
            }
        }
    }
}
于 2014-07-29T13:35:55.777 に答える