Description
It is a group of CSS properties which allows using properties of one
class into another class and includes class name as its properties. In
LESS, you can declare mixin in the same way as CSS style using class or
id selector. It can store multiple values and can be reused in the code
whenever necessary.
Example
The below example demonstrates use of nested rules in the LESS file:
<html>
<head>
<title>Nested Rules</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="container">
<h1>First Heading</h1>
<p>LESS is a dynamic style sheet language that extends the capability of CSS.</p>
<div class="myclass">
<h1>Second Heading</h1>
<p>LESS enables customizable, manageable and reusable style sheet for web site.</p>
</div>
</div>
</body>
</html>
Next, create file
style.less.
style.less
.container{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
.myclass{
h1{
font-size: 25px;
color:#E45456;
}
p{
font-size: 25px;
color:#3C7949;
}
}
}
You can compile the
style.less file to
style.css by using the following command:
lessc style.less style.css
Next execute the above command, it will create
style.css file automatically with the below code:
style.css
.container h1 {
font-size: 25px;
color: #E45456;
}
.container p {
font-size: 25px;
color: #3C7949;
}
.container .myclass h1 {
font-size: 25px;
color: #E45456;
}
.container .myclass p {
font-size: 25px;
color: #3C7949;
}
Output
Let's carry out the following steps to see how above code works:
- Save the above html code in nested_rules.html file.
- Open this HTML file in a browser, an output as below gets displayed.
No comments:
Post a Comment