The End of SCSS, SASS, and LESS. CSS nesting in the browser.

With all of Google IO really being mostly about AI, and the features that are coming to bard. Some of the tiny update might get lost.

I’ve been writing SCSS since well 2015 or earlier its hard to remember, and finally as of March of 2023 it is now part of the CSS spec supported in Chrome and not yet Firefox I think mostly everywhere else will come soon.

It really is an exciting time for development, and there is also a new feature kind of like a WordPress Hook called :is but don’t get confused it really isn’t anything like the WordPress hook it just sort of mirrors the way to determine an if else without any javascript code.

/* grouped with :is() */
.demo :is(.triangle, .square) {
  opacity: .25;
  filter: blur(25px);
}

In this :is() example you can now just have a bunch of :is() statements and then in JavaScript or in the page elements you can change the elements based on function or design.

I won’t go into the nesting as it very closely mimics the scss of old, not really sass with the spacing, but if you have used scss or bem nesting you are going to love the new nesting in css going forward.