Description
You can nest the directives such as
media and
keyframe
in the same manner, how you nest the selectors. You can place the
directive on top and its relative elements will not be changed inside
its rule set. This is known as bubbling process.
Example
The below example demonstrates use of nested directives and bubbling in the LESS file:
<html>
<head>
<title>Nested Directives</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<h1>Example using Nested Directives</h1>
<p class="myclass">LESS enables customizable, manageable and reusable style sheet for web site.</p>
</body>
</html>
Next, create file
style.less.
style.less
.myclass {
@media screen {
color: blue;
@media (min-width: 1024px) {
color: green;
}
}
@media mytext {
color: black;
}
}
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
@media screen {
.myclass {
color: blue;
}
}
@media screen and (min-width: 1024px) {
.myclass {
color: green;
}
}
@media mytext {
.myclass {
color: black;
}
}
Output
Let's carry out the following steps to see how above code works:
- Save the above html code in nested_directives_bubbling.html file.
- Open this HTML file in a browser, an output as below gets displayed.
No comments:
Post a Comment