Introduction

The goal of this tutorial is to introduce you to the concept of nesting selectors in SASS/SCSS. By the end of this tutorial, you will be able to nest selectors to create hierarchical relationships that mirror your HTML structure. This will result in cleaner and more organized code.

The only prerequisites for this tutorial are basic knowledge of HTML, CSS, and a general understanding of SASS/SCSS.

Step-by-Step Guide

Nesting selectors in SASS/SCSS means that you can nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that excessive nesting can lead to more complex and specific selectors, which can be harder to maintain and can lead to unintended results. So it's best to keep nesting to a maximum of three levels deep.

Here's an example of how to nest selectors:

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

This compiles into the following CSS:

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

nav li { display: inline-block; }

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Code Examples

Here are some practical examples to help you understand the concept better:

1. Nesting selectors with pseudo-classes:

.btn {
  padding: 5px 10px;
  text-decoration: none;

  &:hover {
    background: #f5f5f5;
  }
}

The & symbol refers to the parent selector. In this case, &:hover refers to .btn:hover.

This compiles to:

.btn {
  padding: 5px 10px;
  text-decoration: none;
}

.btn:hover {
  background: #f5f5f5;
}

1. Nesting selectors with media queries:

.container {
  width: 100%;

  @media (min-width: 768px) {
    width: 750px;
  }
}

This compiles to:

.container {
  width: 100%;
}

@media (min-width: 768px) {
  .container {
    width: 750px;
  }
}

Summary

In this tutorial, you've learned how to nest selectors in SASS/SCSS, how to use the & symbol to refer to the parent selector, and how to nest media queries. These skills will help you write more organized and cleaner code.

To continue learning about SASS/SCSS, you could delve into topics like the use of variables, mixins, or functions. You can find more resources at the official SASS documentation.

Practice Exercises

1. Create a SASS/SCSS file with nested selectors for a simple webpage layout (header, main, and footer).

2. Write SASS/SCSS code that includes nested selectors with pseudo-classes for a navigation menu.

3. Create a responsive grid layout where the number of columns changes based on the viewport size using media queries and nested selectors.

Here's a solution for the first exercise:

body {
  margin: 0;
  padding: 0;

  header {
    height: 50px;
    background: #333;
  }

  main {
    padding: 20px;
  }

  footer {
    height: 50px;
    background: #333;
  }
}

This will create a webpage layout with a header and footer of fixed height with a background color, and a main content area with some padding. You can try the other exercises yourself, and if you get stuck, you can always refer to the examples in this tutorial. Happy coding!