Sass Nested

Sass (Syntactically Awesome Style Sheets) introduces powerful features that streamline and enhance your CSS, including nested rules and properties. These features enable a more intuitive and organized way to write CSS, reflecting the structure of HTML directly within your stylesheets. This guide explores how to use nested rules and properties in Sass to create clean, modular, and maintainable stylesheets.

What Are Nested Rules and Properties in Sass?

In plain CSS, selectors must be written separately, often leading to repetitive code. Sass allows nesting of selectors and properties, mirroring the HTML structure, which simplifies the development and maintenance of CSS.

Example Without Nesting:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
}

Example With Nesting:

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    li {
      display: inline-block;
      a {
        text-decoration: none;
      }
    }
  }
}

Compiled CSS:

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  display: inline-block;
}

nav ul li a {
  text-decoration: none;
}

Benefits of Nested Rules and Properties:

1. Reflect HTML Structure: Write CSS that mirrors your HTML, making stylesheets easier to understand and maintain.
2. Reduce Redundancy: Eliminate the repetition of selectors, keeping your code DRY (Don’t Repeat Yourself).
3. Enhance Readability: Group related styles together, improving the readability and organization of your stylesheets.

Using Nested Rules in Sass:

Basic Nesting:

Nesting allows you to place child selectors inside parent selectors, reflecting the hierarchy of HTML elements.

Example:

article {
  h1 {
    color: #3498db;
  }
  p {
    font-size: 16px;
  }
}

Compiled CSS:

article h1 {
  color: #3498db;
}

article p {
  font-size: 16px;
}

Nesting Pseudo-classes and Pseudo-elements:

You can nest pseudo-classes and pseudo-elements inside their parent selectors.

Example:

button {
  &:hover {
    background-color: #2ecc71;
  }
  &::after {
    content: ' →';
  }
}

Compiled CSS:

button:hover {
  background-color: #2ecc71;
}

button::after {
  content: ' →';
}

Referencing Parent Selectors with &:

The & symbol represents the parent selector, allowing you to nest and modify the parent context.

Example:

nav {
  &.active {
    background-color: #2ecc71;
  }
  a {
    &:hover {
      color: #e74c3c;
    }
  }
}

Compiled CSS:

nav.active {
  background-color: #2ecc71;
}

nav a:hover {
  color: #e74c3c;
}

Using Nested Properties in Sass:

Nested properties let you group related properties under a common prefix, reducing redundancy and improving clarity.

Nested Properties for Vendor Prefixes:

You can nest properties to apply vendor-specific prefixes more cleanly.

Example:

button {
  border {
    style: solid;
    width: 2px;
    color: #3498db;
  }
}

Compiled CSS:

button {
  border-style: solid;
  border-width: 2px;
  border-color: #3498db;
}

Nested Shorthand Properties:

Use nested properties to simplify shorthand properties that share a common prefix.

Example:

.box {
  margin: {
    top: 10px;
    right: 15px;
    bottom: 10px;
    left: 15px;
  }
}

Compiled CSS:

.box {
  margin-top: 10px;
  margin-right: 15px;
  margin-bottom: 10px;
  margin-left: 15px;
}

Nested Properties for Border and Padding:

Group border and padding properties under a common prefix.

Example:

.card {
  border {
    width: 1px;
    color: #e74c3c;
  }
  padding: {
    top: 10px;
    bottom: 10px;
  }
}

Compiled CSS:

.card {
  border-width: 1px;
  border-color: #e74c3c;
  padding-top: 10px;
  padding-bottom: 10px;
}

Best Practices for Using Nested Rules and Properties:

1. Avoid Deep Nesting: Excessive nesting can lead to overly specific selectors and potential maintenance challenges. Limit nesting to 3 levels deep to keep your code manageable.
2. Use & Judiciously: The parent selector & is powerful but can lead to complex selectors if overused. Keep its use clear and simple.
3. Combine with Mixins: Use mixins alongside nesting to create reusable patterns and avoid code duplication.

Conclusion:

Sass nested rules and properties provide a more intuitive and structured way to write CSS, reflecting the hierarchy of your HTML directly in your stylesheets. By organizing styles in this manner, you can create cleaner, more maintainable, and more readable CSS. Embrace nesting in Sass to enhance your development workflow and build more efficient stylesheets.