Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to do Nesting in Less

    @sunil.chatterji
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 221
    Comment on it

    Nesting is used to style your structure of the stylesheet that matches the HTML structure of the page to reduce the chance of conflicts.

    Example:-

    1. ul{
    2.   background-color: #03A9F4;
    3.   padding: 10px;
    4.   list-style: none;
    5.  
    6.   li{
    7.     background-color: #fff;
    8.     border-radius: 3px;
    9.     margin: 10px 0;
    10.   }
    11. }

    In the above code we write css for "li" inside the curly bracket of "ul".

    output:-

    1. ul {
    2.   background-color: #03A9F4;
    3.   padding: 10px;
    4.   list-style: none;
    5. }
    6. ul li {
    7.   background-color: #fff;
    8.   border-radius: 3px;
    9.   margin: 10px 0;
    10. }

    In less whenever you have to do nesting, is to just put its child property into its parent backet.

    less nesting Nesting in Less
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: