Mixin scenario, trying to converting css

Question

I've got a problem when i am converting CSS to LESS CSS in the below Scenario.

In the below CSS i have same properties for :hover and .active classes.

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}

Here how to use mixins in li.active from &:hover

LESS 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 */

                }
            }
        }
    }

Thanks

Residuum · Accepted Answer · 2014-07-29T13:47:53.000

No need to use mixins in your case, just do the same as you would with regular CSS:

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

If you really want to use a mixin, you will need to define a mixin, not use a CSS declaration:

/* 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();
            }
        }
    }
}

Its working. Nice idea. Thanks. But one more question regarding this parent li.active a{} how to write this now? — Pavan Kumar, Jul 29 '14 at 13:41
There is no point to split the hover and active, `&:hover, &.active { }` For `li.active a {}` you could write `&.active a {}` or you can put the anchor inside of the `&.active { a {} }` no difference — Huangism, Jul 29 '14 at 13:52

Mixin scenario, trying to converting css

1 Answers1