How Does Nesting Work in SASS
A Brief Introduction to the SASS Nesting Syntax
Passionate Software Engineer with three years of experience, dedicated to creating robust and scalable web applications. I have a strong foundation in JavaScript, React, Python, and Node.js, and enjoy working with modern tech stacks to build innovative solutions. I'm committed to writing clean and efficient code, following best practices, and staying updated with the latest industry trends.
Throughout my career, I've gained valuable experience in full-stack development, including frontend design, backend development, and database management. I love solving complex problems and implementing creative solutions that enhance user experiences. I believe in the power of collaboration and thrive in cross-functional teams where I can contribute my skills and learn from others.
Beyond coding, I am an avid learner and enjoy sharing my knowledge with the developer community. I regularly contribute to open-source projects, write technical blog posts, and engage in discussions on emerging technologies. I'm always seeking opportunities to expand my skill set and stay at the forefront of software engineering.
When you observe the structure of an HTML file, you’ll notice it has a very clear hierarchy:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
As you can see, HTML has a structure that makes it relatively easy to read.
CSS, on the other hand, lacks this visual structure. This is why it has a tendency to become disorganized quite quickly.
Enter Sass nesting!
Definition
Using nesting, we can nest child selectors inside of the parent selector.
This results in much cleaner and less repetitive code.
Example
Take the following HTML:
<nav class="navbar">
<ul>
<li>Home</li>
<li>Services</li>
<li>Contact Us</li>
</ul>
</nav>
Using regular CSS, we would write this like so:
.navbar {
background-color: red;
padding: 1rem;
}
.navbar ul {
list-style: none;
}
.navbar li {
text-align: center;
margin: 1rem;
}
There’s a lot of repetition here. Each time we want to style a child of navbar, we must repeat the class name.
With Sass nesting, we can write much cleaner code.
Like so:
.navbar {
background-color: red;
padding: 1rem;
ul {
list-style: none;
}
li {
text-align: center;
margin: 1rem;
}
}
Using indentation, you can now see the ul and li selectors are neatly nested inside the navbar selector.
We have a much less repetitive syntax, which is far easier to read!
Conclusion
If you liked this blog post, follow me on Twitter where I post daily about Tech related things!
