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:-
ul{
background-color: #03A9F4;
padding: 10px;
list-style: none;
li{
background-color: #fff;
border-radius: 3px;
margin: 10px 0;
}
}
In the above code we write css for "li" inside the curly bracket of "ul".
output:-
ul {
background-color: #03A9F4;
padding: 10px;
list-style: none;
}
ul li {
background-color: #fff;
border-radius: 3px;
margin: 10px 0;
}
In less whenever you have to do nesting, is to just put its child property into its parent backet.
0 Comment(s)