Nesting Techniques in SCSS

Understanding the Basics (Part 3)

Published in

UX Planet

10 min readJun 24, 2023

Welcome back, As promised let’s delve into the SCSS Part 3 article. In our previous article, “Beginner’s Guide to Harnessing the Power of SCSS, (Part 01) and Variables in Scss (Par02)” we explored the fundamentals of SCSS, including its superpowers, advantages over traditional CSS, differences between SCSS and CSS and variables of Scss. In this article, we’ll focus on One of the essential aspects of SCSS: Nesting

Throughout this article, we’ll provide practical examples and demonstrate how nesting enhances our styling capabilities. Nesting in SCSS is the ability to combine different logical structures and nest CSS rules within one another, creating a more organized and hierarchical structure for our stylesheets.

But before we dive into nesting, let’s quickly recap the concept of variables in SCSS. Variables allow us to store reusable values, such as colors, font sizes, or any other CSS property, and reference them throughout our stylesheets. They provide flexibility and make it easier to maintain consistency and make global changes to our styles.

Now that we have a brief introduction to nesting, we can explore nesting in SCSS. Throughout this article, we’ll provide practical examples to illustrate the power of nesting in SCSS. By the end, you’ll have a solid understanding of how to leverage nesting to enhance your SCSS styling capabilities.

This article divided in to few Sections as follows

What Are Nesting?
Basic Nesting Syntax in Scss
Declaring And Using Nesting In Scss
Nesting Selectors and Properties
Explore Parent Selector
Best Practices and Tips
Benefits Of Using Nesting In Scss

Without further a do let’s dive in and explore the world of Nesting in SCSS!!

What is Nesting?

Challenge 015–Fylo Dark Theme Landing Page🚀

Nesting refers to the ability to nest CSS selectors inside one another, providing a more organized and hierarchical structure to the stylesheets. It allows you to define styles for specific elements based on their parent-child relationships.

By using nesting, we can avoid repetition and improve the readability of our code. It allows us to define styles for specific elements within their parent containers, making our stylesheets more modular and easier to manage. We can create complex selectors with ease and maintain a clear visual hierarchy of our styles.

For Examples:

Example 01

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nesting in SCSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Welcome to the Nesting in SCSS Article</h1>
    <p class="special-paragraph">This is a paragraph inside the container.</p>
    <a href="#" class="link">Click me!</a>
  </div>
</body>
</html>

In this example, the paragraph (p) element inside the container div has a special class special-paragraph applied to it in the HTML file. Similarly, the link (a) element also has a class link applied to it.

.container {
  width: 100%;

  h1 {
    color: blue;
    font-size: 24px;
  }

  p {
    color: red;
    font-size: 16px;

    &.special-paragraph {
      font-weight: bold;
    }
  }

  a {
    text-decoration: none;

    &.link {
      color: green;

      &:hover {
        color: purple;
      }
    }
  }
}

In the SCSS file, we use the & symbol to reference the parent selector and combine it with the class selectors to create nested styles.

The paragraph element with the class special-paragraph will have a font weight of bold.
The link element with the class link will have a color of green.
When the link is hovered over, it will change its color to purple.

Example 02

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Nesting in SCSS</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>Welcome to the Nesting in SCSS Article</h1>
    <div class="content">
      <p>This is a paragraph inside the container.</p>
      <ul>
        <li>Item 1</li>
        <li class="highlight">Item 2</li>
        <li>Item 3</li>
      </ul>
    </div>
    <footer class="footer">
      <a href="#" class="link">Click me!</a>
    </footer>
  </div>
</body>
</html>

In this example, the HTML file has a more complex structure with multiple nested elements. The container div contains a heading (h1), a content div with a paragraph (p) and an unordered list (ul), and a footer with a link (a).

.container {
  width: 100%;

  h1 {
    color: blue;
    font-size: 24px;
  }

  .content {
    background-color: lightgray;

    p {
      color: red;
      font-size: 16px;
    }

    ul {
      list-style: none;
      padding: 0;

      li {
        margin-bottom: 10px;

        &.highlight {
          color: green;
          font-weight: bold;
        }
      }
    }
  }

  .footer {
    background-color: darkgray;
    padding: 10px;

    a {
      text-decoration: none;
      color: white;

      &:hover {
        color: yellow;
      }
    }
  }
}

In the SCSS file, nesting is used to target specific elements within their parent containers.

h1 inside the .container will have a blue color and a font size of 24 pixels.
The paragraph inside the .content div will have a red color and a font size of 16 pixels.
The list items (li) inside the unordered list will have a margin bottom of 10 pixels, and if an li has a class of .highlight, it will have a green color and a bold font weight.
Similarly, the link inside the .footer will have a white color, and when hovered over, it will change its color to yellow.

Basic Nesting Syntax in Scss

The basic nesting syntax in SCSS involves placing a nested selector inside its parent selector, separated by a space.

Here’s a the steps to help you understand it clearly:

Start with the parent selector.
Open curly braces {} to define the styles for the parent selector.
Inside the parent selector block, indent further.
Write the nested selector followed by curly braces {} to define its styles.
Repeat steps 3 and 4 for additional levels of nesting.

.parent-selector {
  // Styles for parent selector

  .child-selector {
    // Styles for child selector
  }
}

.child-selector is nested inside the .parent-selector. Any styles defined within the .child-selector block will only apply to elements that have both the .parent-selector and .child-selector classes.

Declaring And Using Nesting In Scss

Nesting in SCSS provides a way to visually represent the relationship between selectors and their parent elements, improving readability and maintaining a clear hierarchy.

By enclosing nested selectors within curly braces {}, we can define specific styles for those selectors. This approach helps us avoid repetition, keep our code organized, and create a structured and maintainable codebase.

For Example:

In this example, we are nesting the h1 selector inside the .container selector.

.container {
  width: 100%;

  h1 {
    color: blue;
    font-size: 24px;
  }
}

This means that the styles defined within the h1 block will only apply to h1 elements that are nested inside an element with the class .container.

Inside the h1 block, we set the color property to blue and the font-size property to 24px. These styles will only be applied to h1 elements within the .container element.

Continue nesting further within each nested block.

.container {
  width: 100%;

  h1 {
    color: blue;
    font-size: 24px;

    span {
      font-weight: bold;
    }
  }

  p {
    color: red;
    font-size: 16px;

    a {
      text-decoration: none;

      &:hover {
        color: purple;
      }
    }
  }
}

In this example, we have nested a span selector inside the h1 selector.

The font-weight property defined within the span block will only apply to span elements that are nested inside h1 elements within the .container element.

Similarly, we have nested an a selector inside the p selector.

The color property defined within the a block will only apply to a elements that are nested inside p elements within the .container element.
Additionally, the &:hover selector refers to the a element itself and applies the styles when the a element is hovered over.

Nesting Selectors And Properties

Nesting selectors and properties in SCSS allows for a hierarchical structure and targeted styling of nested elements

Nesting Selectors

Nesting selectors in SCSS enables you to style elements that are nested inside other elements.

This enhances readability, organizes your styles, and visually represents the HTML structure. To achieve this, place the nested selectors inside their parent selectors, separated by a space.

For Example

<div class="container">
  <h1>Title</h1>
  <p>Paragraph with <span>bold</span> text.</p>
</div>

.container {
  padding: 20px;
  background-color: lightgray;

  h1 {
    font-size: 24px;
    color: blue;
  }

  p {
    font-size: 16px;
    color: red;

    span {
      font-weight: bold;
    }
  }
}

.container selector: This is the parent selector that applies styles to the container element. It sets padding to 20 pixels and a background color of light gray.
h1 selector: This is a nested selector inside .container. It sets the font size to 24 pixels and the color to blue for the h1 elements within the container.
p selector: Another nested selector inside .container. It sets the font size to 16 pixels and the color to red for the p elements within the container.
span selector: This is a nested selector inside p. It sets the font weight to bold for the span elements within p. This means any span elements within p will have bold text.

Nesting Properties

By nesting properties, you can group related properties together, establishing a clear hierarchy and minimizing repetition.

This approach assists in organizing your styles and enhances their maintainability.

<div class="element">
  Content goes here
</div>

.element {
  font: {
    weight: bold;
    size: 16px;
    family: Arial, sans-serif;
  }
  margin: {
    top: 10px;
    bottom: 20px;
  }
}

font property: This property is nested within the .element selector. It groups together related font-related sub-properties.

weight sub-property: Sets the font weight to bold.
size sub-property: Sets the font size to 16 pixels.
family sub-property: Sets the font family to Arial, sans-serif.

margin property: Another property nested within the .element selector. It groups together margin-related sub-properties.

top sub-property: Sets the top margin to 10 pixels.
bottom sub-property: Sets the bottom margin to 20 pixels.

Combines Both Selector And Property Nesting In Scss

<div class="container">
  <h1>Title</h1>
  <p>Paragraph with <span>bold</span> text.</p>
  <button class="button">Click me</button>
</div>

.container {
  background-color: lightgray;
  
  h1 {
    font-size: 24px;
    color: blue;
  }

  p {
    font-size: 16px;
    color: red;

    span {
      font-weight: bold;
    }
  }

  .button {
    padding: 10px;
    background-color: green;
    color: white;
    
    &:hover {
      background-color: purple;
    }
  }
}

.container selector: This applies styles to the container element. It sets the background color to light gray.
h1 selector: This targets h1 elements within the container and sets the font size to 24 pixels and the color to blue.
p selector: This targets p elements within the container and sets the font size to 16 pixels and the color to red.
span selector: This targets span elements within p elements and sets the font weight to bold.
.button selector: This targets elements with the class "button" within the container. It sets the padding, background color, and text color for those elements. Additionally, it uses the &:hover syntax to define styles when the button is hovered over. In this case, it changes the background color to purple.

Explore Parent Selector

In SCSS, the parent selector “&” is used to refer to the parent element within nested styles. It enables you to target and apply styles specifically to the parent element, resulting in more concise code and a well-defined hierarchy.

<div class="container">
  <h1 class="title">Title</h1>
  <p class="content">Regular content</p>
  <p class="content highlighted">Highlighted content</p>
</div>

In this example, we have a .container selector that applies styles to a container element.
Inside the container, there are two nested selectors: .title and .content.

.container {
  border: 1px solid black;
  padding: 10px;

  .title {
    font-weight: bold;
    margin-bottom: 5px;
  }

  .content {
    color: blue;

    &.highlighted {
      background-color: yellow;
    }

    &:hover {
      text-decoration: underline;
    }
  }
}

.title selector: It targets the <h1> element within the container and sets the font weight to bold and margin bottom to 5 pixels.
.content selector: It targets the <p> elements within the container and sets the color to blue.

&.highlighted targets the .content element when it also has the class "highlighted" applied to it. It sets the background color to yellow. This demonstrates how the parent selector "&" allows you to target and apply styles based on the parent element's additional class.
&:hover targets the .content element when it is being hovered over. It sets the text decoration to underline. This showcases how the parent selector "&" allows you to target and style the parent element based on its state (in this case, when it is being hovered over).

Best Practices and Tips

Keeping Nesting Levels Shallow

It’s recommended to limit nesting to a few levels (typically no more than three) to avoid excessive complexity. This keeps your code easier to understand and maintain.

// Good
.parent {
  .child {
    ...
  }
}

// Avoid
.parent {
  .child {
    .grandchild {
      ...
    }
  }
}

Use Nesting Selectively

Consider the specific elements or components that require nested styles for better organization.

// Good
.parent {
  ...
}

.child {
  ...
}

// Avoid
.parent {
  .child {
    ...
  }
}

Maintain Code Readability

Use proper indentation and spacing within nested blocks to maintain a clear hierarchy. This helps others (and yourself) to easily navigate and comprehend the code.

// Good
.parent {
  .child {
    ...
  }
}

// Avoid
.parent {
.child {
...
}
}

Separate Unrelated Styles

If you have styles that are unrelated to a specific parent element, avoid nesting them. Keep them at the same level as the parent selector for better organization and clarity.

// Good
.parent {
  ...
}

.unrelated-style {
  ...
}

// Avoid
.parent {
  .unrelated-style {
    ...
  }
}

Here are the few tips that I follow, if there are any additional practices that you follow, please feel free to add them as comments. I’m eager to learn from your insights and expand my knowledge in SCSS.

Finally, Let’s Talk About The Benefits Of Using Nesting In Scss

Improved Readability: Nesting allows for a more intuitive and organized code structure, making it easier to read and understand your styles.
Reduced Repetition: With nesting, you can avoid repetitive code by referencing parent elements directly, saving you time and effort.
Code Efficiency: Nesting in SCSS leads to cleaner and more concise code, improving development speed and reducing the chances of errors.
Enhanced Control: Nesting allows for precise targeting of specific elements or their descendants, giving you greater control over the scope of your styles.

Final Thought

Having guided you through the variables of SCSS, I would like to wrap up this article with the hope that you have gained valuable knowledge and insights. Thank you for taking the time to explore this content.

If you have any questions or need further clarification, please don’t hesitate to leave a comment below. I appreciate your engagement and feedback.

Until next time!

Don’t Miss Out on the Following Articles.👇🧠

A Beginner’s Guide to Harnessing the Power of Scss

Understanding the Basics (Part 1)

uxplanet.org

Exploring the Variables in SCSS.

Understanding the Basics (Part 2)

uxplanet.org

Harnessing Mixins in SCSS

Let’s Start With What Is @mixin.

uxplanet.org

Feel free to explore the following challenges and attempt them independently..👇🧠

Challenge 013 , Challenge 014 , Challenge 015

If you like this give one or more claps and feel free to leave your thoughts and feedback in the comment section.
Thank you for checking this out and feel free to checkout my other articles by clicking the following link 👇
Check It Out