Example
Now, let's nest some CSS selectors and see how it works. In the previous blogs of Sass, we have seen the basic structure. Let's understand what the system is when we implement nesting. Below is the file saved while applying the sass nesting rules.
SCSS SYNTAX:
nav {
ul {
margin: 1;
padding: 1;
}
li {
display: outline-block;
}
a {
display: block;
padding: 8px, 12px;
text-decoration: none;
}
}
Here, in Sass, we use li, ul, and a selector under the nav selector. Such amazing features we can get with Sass nesting rules.
Whereas in CSS, we have seen that the rules are defined one by one and not nested.
Lets's see CSS syntax:
nav ul {
margin: 1;
padding: 1;
}
nav li {
display: outline-block;
}
nav a {
display: block;
padding: 8px, 12px;
text-decoration: none;
}
When we compare these two, we have found that it is easier and cleaner to write code in Sass than in standard CSS.
Let’s understand the nesting properties with a simple example. We have an HTML file codingninjas.html, and the following is an example of how nesting works.
codingninjas.html
<!DOCTYPE html>
<html>
<head>
<title>Nesting example of Sass</title>
<link rel="stylesheet" type="text/css" href="codingninjas.css" />
</head>
<body>
<h3>Available courses on CodingNinjas</h3>
<ul>
<li>Android</li>
<li>Web Development</li>
<li>
Java
<ul>
<li>Core Java</li>
<li>Advance Java</li>
</ul>
</li>
<li>HTML/CSS</li>
<li>Etc.</li>
</ul>
</body>
</html>
Now create an SCSS file and name it codingninjas.scss. This will have the following code.
codingninjas.scss
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
}
Execute this by using the following command
sass --watch codingninjas.scss:codingninjas.css
It will automatically create a normal CSS file named "codingninjas.css" in the same directory. The automatically created codingninjas.css file will have the following code.
codingninjas.css
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 8px 16px;
text-decoration: none;
}
When the above HTML file is executed, it will read the CSS value.
Output
Sass Nested Properties
While reading CSS, we have seen that CSS properties have the same prefix like font size, font-weight, text-align, text-transform, etc.
Here comes Sass, in the below example you will see them as nested properties.
Example
SCSS Syntax
font: {
family: Tahoma, sans-serif;
size: 10px;
weight: bold;
}
text: {
align: right;
transform: uppercase;
overflow: hidden;
}
The above code will be converted to standard CSS, and it will look like this.
CSS Output
font-family:Tahoma, sans-serif;
font-size: 10px;
font-weight: bold;
text-align: right;
text-transform: uppercase;
text-overflow: hidden;
How To Avoid Rewriting CSS Multiple Times
While avoiding writing CSS multiple times, we can use the nested properties. For example, we use the font as namespace, which uses font size, font-weight, and font-variant properties. When we talk about regular CSS, we need to write these properties every time with a namespace. While using SASS, we can nest the properties by writing the namespace only once. That's how with sass nesting rules it can be avoided.
EXAMPLE
Below is the example that shows how to use the nested properties in the SCSS file
index.html
<html>
<head>
<title>Nested Properties</title>
</head>
<body>
<div class="”container”">
<h1>Nested Properties Example</h1>
<p class="”A”">CSS stands for Cascading Style Sheets</p>
</div>
</body>
</html>
The next step is to create file style.scss.
style.scss
.A {
font : {
family: Times New Roman;
size: 30px;
weight: italic;
variant: large-caps;
}
}
We can tell SASS to watch the file and update the CSS whenever the SASS file changes, and for this, therefore with Sass Nesting Rules we can use the following command −
sass —-watch C:\s\lib\sass\style.scss:style.css
The style.css file will be created automatically when the above command is executed. Following will be the code.
style.css
A {
font-family: Times New Roman;
font-size : 30px;
font-weight : italic;
font-variant : large-caps;
}
Now save the HTML code and give it a name with a .html extension. After that, we can open the file in the browser. In the above code, we have used sass nesting rules well. The output will be displayed as below in the browser:
Output
FAQs
-
Is nesting easier with Sass?
Yes, because of the advanced features that it offers.
-
Why is nesting in Sass preferred over regular CSS?
Nesting in Sass is preferred over regular CSS as it makes the code more readable and cleaner.
-
Is there any disadvantage of using nesting in Sass?
Yes, overly nested rules may cause complexity and prove hard to maintain.
Key Takeaways
The blog depicted how easy nesting can be when used in Sass. Therefore, with the help of an example, you might have got a clear idea. This is just a tiny part of Sass. The Sass Nesting Rules is a very crucial topic hence, a basic understanding is highly required. There are lot more features that Sass offers to us. Therefore, check out other blogs like Sass operators and Sass variables and learn more exciting features and use them. Write codes and make it impressive.
Don't stop here. Keep on learning. If you are a beginner, please pay attention to minute details like variables, color, nesting, etc. This will help you to get a better grip on this topic Thank you for reading this blog till the end.
34+ registered 
