Sass has established itself as a powerful preprocessor installed locally, forming the backbone of my projects for over a decade. It enabled me to efficiently organize scalable and stable CSS packages. Even today, I still consider Sass to be an extraordinarily powerful tool. Yet, as we step into the year 2024, it’s undeniable that CSS has undergone rapid development. Features that were once unique to Sass are now natively integrated into CSS, including variables and the latest highlight: CSS Nesting.

:root {
  --button-padding: 10px 20px;
  --button-bg-color: #007bff;
  --button-text-color: #ffffff;
  --button-border-radius: 8px;
}

.button {
  padding: var(--button-padding);
  background-color: var(--button-bg-color);
  color: var(--button-text-color);
  border-radius: var(--button-border-radius);
  border: none;
  cursor: pointer;
  transition: background-color 0.3s;
}

Defining variables was long seen as a unique strength of SCSS, allowing for the centralized management of many properties, a feature sorely missed in CSS for a long time. Today, however, variables can also be defined in CSS in a manner similar to Sass. A significant difference, however, is that Sass variables exist exclusively within the preprocessor context, while CSS variables can be used in the browser and even dynamically overwritten via JavaScript.

CSS Nesting

blog {
  position: relative;
  padding: 1rem;
  background: var(--neutral-100);

    .blog-item {
      border: 1px solid var(--neutral-200);

      & span {
        font-size: 1rem;
      }
  }
}

The ability to define the style rules of one element within another significantly simplifies writing CSS. Instead of repeatedly using the same selector for subordinate elements or pseudo-selectors, nesting allows grouping these within a parent selector. This technique leads to a clear, hierarchically structured, and thus more efficient codebase.

With browser support of over 84% for CSS Nesting and 86% for the Nesting Selector, this technique is becoming increasingly accessible.