CSS in this year - Is that the end of SASS?

In the not-so-distant past, SASS was hailed as a revolutionary tool for the CSS world, introducing features like variables, mixins, functions, and many others that made developers' lives easier. However, advances in the CSS specification have begun to outpace SASS, possibly heralding the end of an era. Let's take a closer look.

Variables

SASS made it easy to define and use variables. A SASS variable might look like this

$primary-color: #3bbfce;

body {
  background-color: $primary-color;
}

Now, CSS has embraced this functionality with CSS variables (also known as CSS custom properties) that operate quite similar to SASS variables:

:root {
  --primary-color: #3bbfce;
}

body {
  background-color: var(--primary-color);
}

CSS Nesting

Another cornerstone of SASS was its ability to nest CSS selectors. Here's a SASS example:

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 0 10px;
    text-decoration: none;
  }
}

CSS finally adopted this feature, making it possible to accomplish the same thing without SASS:

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

  & li { display: inline-block; }

  & a {
    display: block;
    padding: 0 10px;
    text-decoration: none;
  }
}

The :is, the :has, the :not, and the :where pseudo-classes

SASS provides more specific control over selectors, something CSS has long lacked. However, CSS recently introduced the :is() , :where(), and :has() pseudo-classes, which provide a similar level of precision. The :is pseudo-class allows for more concise and flexible code, and the :has pseudo-class allows you to style an element if it contains a particular other element. The :where pseudo-class is scanning properties and will set some CSS when statements are met. You can use :not to scan elements that don't have specific attributes - such as alt attributes.

.btn--destroy {
  --btn-background: var(--color-destroy);
}

.btn:is(.btn--ghost) {
  --btn-border-color: var(--color-border-reversed);
}

.btn:has(.btn--destroy) {
  background-color: var(--accent-50);
}

.image-circle {
  &:where(:has(.inline):has(img)) {
    display: block;
  }
}

img:not([alt]) {
  /* add border to images without alt text */
  border: 5px solid orange;
}

Container Queries - aka SCSS mixin

The introduction of container queries in CSS represents another leap forward, providing a feature that was beyond the capabilities of SASS. It allows the styling of an element to be adjusted based on the size of its parent container, rather than the viewport. This is a huge advantage for component-based design and layout.

.component {
  --theme: dark;
  container-name: superme;
}

@container superme style(--theme: dark) {
  .superme {
    /* if container superme has theme==dark then add following CSS */
  }
}


@container style(--linkHovered) {
  a {
    background: green;
  }
}

.site-navbar {
  > ul {
    > li {
      &:has(> a:hover, > a:focus) {
        /* if .site-navbar has hovered link, then apply green in the background */
        --linkHovered: true;
      }
    }
  }
}

Cascading layers

Another exciting feature of CSS is the concept of cascading layers. This allows developers to create layers of styles that can affect how styles are applied and overridden. This is another area where CSS has surpassed SASS.

@layer reset, components, utilities;

/* Contains the base styles and resets */
@layer reset {
  body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
  }
}

/* Contains the component styles */
@layer components {
  .button {
    background-color: blue;
    color: white;
    border: none;
    padding: 5px 10px;
  }
}

/* Contains the utility styles */
@layer utilities {
  .hidden {
    display: none !important;
  }
  .red {
    color: red !important;
  }
}

In the example above, styles defined in the components layer will override any styles with the same selector in the reset layer. Similarly, styles in the utilities layer will override any styles with the same selector in components or reset.

Conclusion - So is this the end of SASS?

No technology is ever really dead, as long as there are developers to maintain and use it. However, as CSS evolves and adopts features that were once unique to SASS, fewer developers may feel the need to rely on SASS. The end may not be now, but the future of SASS seems more uncertain than ever.

Happy styling!