Introduction to Sass Nesting

Sass Nesting

You can nest selectors inside other selectors to create more specific CSS rules. In Sass, you can use the "&" character to reference the parent selector, which allows you to create complex nested selectors without having to repeat yourself.

As an example:

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

    li {
      display: inline-block;

      a {
        text-decoration: none;
        padding: 10px;
        color: #333;

        &:hover {
          background-color: #eee;
        }
      }
    }
  }
}

In this example:

• We are styling a navigation menu.
• We start with the "nav" selector, and then nest the "ul" selector inside it.
• Inside the "ul" selector, we nest the "li" selector, and then finally the "a" selector.

tip

We use the "&" character to reference the parent selector.

Sass Nested Properties

Sass nested properties allow you to group related CSS properties together within a nested block, making your code more organized and easier to read.

As an example:

.box {
  background: {
    color: #ccc;
    image: url('bg-pattern.png');
    repeat: repeat;
  }

  border: {
    color: #333;
    width: 2px;
    style: dashed;
  }

  font: {
    size: 16px;
    weight: bold;
    family: Arial, sans-serif;
  }
}

In this example:

• We are defining a box element with multiple related properties.
• We use the "background" nested property to group together the background color, image, and repeat properties.
• Similarly, we use the "border" nested property to group together the border color, width, and style properties, and the font nested property to group together the font size, weight, and family properties.