csslesslesscss-resources

Mixin scenario, trying to converting css


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


Solution

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