CODEWITHSUNDEEP
less
Bharath
Bharath

Reputation: 581

How do I convert this nested selectors to LESS?

I am a novice in LESS CSS, but I have spent lot of time learning the CSS. Currently am migrating my CSS code to a LESS for learn and improve myself. I stumbled upon this when am doing the migration process,

Existing CSS Code 

#sidebar {
    -webkit-transition: background 1.2s ease, padding 1.8s linear;
    background: #3c3c3c;
}

#sidebar .actionMenuList {
    margin-bottom: 20%;
}

#sidebar .actionMenuList .topNavMenuList,
#sidebar .navigationMenuList .topNavMenuList {
    -webkit-transition: background 0.3s ease-in-out;
     border-bottom: .1em solid #FDF7F8;
}

Writing this LESS Code 

#sidebar {
   -webkit-transition: background 1.2s ease, padding 1.8s linear;
    background: #3c3c3c;

    .actionMenuList {
        margin-bottom: 20%;

        .topNavMenuList {
            -webkit-transition: background .3s ease-in-out;
            border-bottom: .1em solid #FDF7F8;
        }
    }
}

But am getting stuck in one place, how do I write the css prop for the navigationMenuList class selectors using the above hierarchy. Or do I need to fallback on the usual way of CSS for this

#sidebar .actionMenuList .topNavMenuList,
#sidebar .navigationMenuList .topNavMenuList {

Upvotes: 0

Views: 43

Answers (2)

Huangism
Huangism

Reputation: 16448

You just do

#sidebar {
    .navigationMenuList .topNavMenuList { }    
}

all together

#sidebar {       
    .actionMenuList {
        .topNavMenuList { ... }
    }
    .navigationMenuList {
        .topNavMenuList { .... }
    }
}

OR

assuming the rules are the same for both

#sidebar {
    .actionMenuList,
    .navigationMenuList {
        .topNavMenuList { 
            -webkit-transition: background 0.3s ease-in-out;
            border-bottom: .1em solid #FDF7F8;
        }
    }
}

you can even do

#sidebar {
    .actionMenuList .topNavMenuList,
    .navigationMenuList .topNavMenuList { 
        -webkit-transition: background 0.3s ease-in-out;
        border-bottom: .1em solid #FDF7F8;
    }
}

On a side note, if you ever get stuck at converting and need to make it work. Just leave the css in the less file and it will work like normal.

Upvotes: 2

Bharath
Bharath

Reputation: 581

This works for me, and does what I expected.

#sidebar {
    -webkit-transition: background 1.2s ease, padding 1.8s linear;
    background: #3c3c3c;

    .actionMenuList { margin-bottom: 20%; }

    .actionMenuList .menuItem, .navigationMenuList .menuItem {
        -webkit-transition: background .3s ease-in-out;
        border-bottom: .1em solid #FDF7F8;
    }
}

Upvotes: 0

Related Questions