DEV Community

Cover image for 5 Sass features now available in CSS (2025)
Tom Grusz
Tom Grusz

Posted on • Originally published at blog.grusz.dev

5 Sass features now available in CSS (2025)

#css #webdev #sass

Sass is one of the most popular CSS extension language and pre-processors, with over 18 million downloads on npm. Sass has been actively developed since 2006 and boasts countless quality of life features, some of which have become an integral part of my own styling development.

Some of these features have become so popular that the developers and researchers behind vanilla CSS have taken notice and decided to adopt them in a standardized way, to be used by any frontend devs. Here’s a list of 5 Sass features that you can use in vanilla CSS in 2025:

1. Nesting

One of the best features of Sass has been the ability to nest selectors. This resulted in less selector duplicity with the outcome being more readable and manageable code.

Without nesting:

.profile-card {
    /* styles for profile card */
}

.profile-card .name {
    /* styles for profile name */
}

.profile-card .avatar {
    /* styles for profile avatar */
}
Enter fullscreen mode Exit fullscreen mode

With nesting:

.profile-card {
    /* styles for profile card */
    .name {
        /* styles for profile name */
    }
    .avatar {
        /* styles for profile avatar */
    }
}
Enter fullscreen mode Exit fullscreen mode

The nesting feature was previously only available only in Sass. However, as of December 2023, we can nest selectors in vanilla CSS too. The feature is now widely supported across all modern browsers.

That also includes the & selector for parent attributes:

.profile-card {
    /* styles for profile card */
    &.friend {
        /* styles for a friend's profile card */
    }
}
Enter fullscreen mode Exit fullscreen mode

2. Custom variables

Custom variables allow us to assign a value to a name and refer to the name elsewhere, without needing to specify the value again (similarly to any programming language).

Variables have actually been in CSS for a long time now, so it’s surprising to see them being one of the top reasons developers mention for why they switched to Sass.

This is how variables work in Sass:

$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);

.alert {
  border: 1px solid $border-dark;
}
Enter fullscreen mode Exit fullscreen mode

And this is how we can use variables in vanilla CSS:

:root {
  --base-color: #c6538c;
  --border-dark: rgba(var(--base-color), 0.88);
}

.alert {
  border: 1px solid var(--border-dark);
}
Enter fullscreen mode Exit fullscreen mode

This feature works across the latest devices and major browser versions since 2017.

3. Mixins/Layers

Mixins, defined in Sass, allow you to define styles that can be re-used throughout the stylesheets. This is a great and very popular Sass feature, as it allows us to reduce duplicate code or long selectors. Mixins are defined using the @mixin at-rule.

@mixin card {
    padding: 1rem;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.profile-card {
    @include card; // all styles from card applied here
    background: rgba(255, 255, 255, 0.15);
    /* other styles */
}
Enter fullscreen mode Exit fullscreen mode

Now unfortunately, we will have to wait for mixins support in vanilla CSS. As of October 2025, the idea is currently in the draft stage (see W3C’s draft), however it is great to see that it is in the works. Let’s stay tuned on the development updates, and hopefully, we’ll see major browsers adopting the new feature later in 2026.

4. Color-mixing

Despite the great suite that Sass offers, there’s also a bunch of built-in modules, which contain useful functions, and can be loaded with the @use rule. One of the modules is sass:color, which allows for manipulatin, adjusting, and mixing colors.

@use 'sass:color';
/* Increases or decreases one or more channels of $color by fixed amounts */
color.adjust($color,
  $red: null, $green: null, $blue: null,
  $hue: null, $saturation: null, $lightness: null,
  $whiteness: null, $blackness: null,
  $x: null, $y: null, $z: null,
  $chroma: null,
  $alpha: null,
  $space: null)

/* Mix two colors together */
color.mix(#036, #d2e1dd, $method: rgb); // #698aa2
Enter fullscreen mode Exit fullscreen mode

Fortunately, since September 2024, the “relative colors” feature in vanilla CSS has been baselined across major browsers. The feature works by allowing a color to be defined relative to another color using the from keyword and optionally calc() for any of the color values.

/* color is darkened by cutting its lightness in half */
--color: green;
--darker-accent: lch(from var(--color) calc(l / 2) c h);

/* opacity is set to 80% to make it slightly transparent */
.overlay {
  background:  rgb(from var(--color) r g b / 80%);
}

/* grayscaling a color */
--blue-into-gray: rgb(from var(--color)
                    calc(r * .3 + g * .59 + b * .11)
                    calc(r * .3 + g * .59 + b * .11)
                    calc(r * .3 + g * .59 + b * .11));
Enter fullscreen mode Exit fullscreen mode

5. Math functions

We as frontend devs use math functions in styles to calculate sizes, whitespace, and even animations and colors. Sass provides its own built-in module sass:math, which offers a variety of math functions and constants, such as abs() for getting the absolute value, round() for rounding numbers, or $pi for getting the Pi number.

@use 'sass:math';

.circle {
    width: (math.$pi)px; // 3.1415926536
    height: (math.$pi)px; // 3.1415926536
    margin: math.round(4.2)px + 3px; // 4
}
Enter fullscreen mode Exit fullscreen mode

Since 2015, CSS supports the calc() function which allows numerical operations, like additions, division, etc., which has been the standard for a long time.

.article-content {
    width: 100%;
    height: 42rem;
    margin: calc(42 * 0.1)rem;
    border: calc(0.25rem + 1px);
}
Enter fullscreen mode Exit fullscreen mode

Even though the sass:math module offers undeniably more capabilities, the developments in math calculations for vanilla CSS have been progressing. With baseline in May 2024, there are three newly available math functions - round() for rounding number, and mod() and rem() for working with the remainder of two number divisions.

.avatar {
    --size: calc(2.4rem + 2px);
    width: round(down, var(--size)); /* rounding down */
    height: round(up, var(--size)); /* rounding up */
    border: rem(--size, 2.4px) solid white;
}
Enter fullscreen mode Exit fullscreen mode

Summary

It is great to see that popular third-party features raise demand for standardization in vanilla CSS. I am looking forward to more features being adapted from popular CSS pre-processors as time goes on. Even though we see more styling libraries every year, it is important to continue developments at the default layer of CSS. Therefore, I am excited to see what innovations 2026 will bring forward in terms of styling.

Thanks for reading!

I’m Tom, a frontend architect & software engineer based in Prague, with years of experience from companies like Mastercard and Make. I write dev updates and tips about frontend, design, 3D, tech writing, & more.

I believe the bridge between designers and developers is crucial. I work to strengthen it, jumping into both worlds to create better products by applying 3D, visual art, and code - a skill not many embrace yet. 🎨

You can find more about me at 🔗 grusz.dev or find my projects on ✨ GitHub.

Top comments (0)