SCSS Nesting

Learn how SCSS nesting helps you write cleaner, structured component-based CSS.

What is SCSS Nesting?

SCSS nesting allows you to write selectors inside their parent selector. This keeps your stylesheet clean and follows the HTML structure naturally.

Example (SCSS):

.card {
  width: 300px;
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);

  h3 {
    font-size: 20px;
    color: #0077ff;
    margin-bottom: 10px;
  }

  p {
    font-size: 15px;
    color: #444;
  }

  .btn {
    margin-top: 15px;
    padding: 10px 16px;
    background: #0077ff;
    color: #fff;

    &:hover {
      background: #005fcc;
    }
  }
}

Output Card:

SCSS Nesting Card

This card is styled using SCSS nesting, making the CSS cleaner and easier to maintain.

Learn More

Why Nesting?

← Back to Index