A presentation at Florida Drupal Camp in in Orlando, FL, USA by Aubrey Sambor
Presented at Florida Drupal Camp 2026 by Aubrey Sambor, Lead Front End Developer
Aubrey Sambor
Lead Front End Developer
Loves CSS, knitting, beer, and coffee
Looking for work!
Yes, CSS has the ability to do math!
DO YOU STILL NEED SASS? FLDC 2026 Color functions
DO YOU STILL NEED SASS? FLDC 2026 color-mix() Supported in all major browsers, color-mix() can be used in place of Sass’s mix() function. Percentage of the mix can be added to both values in color-mix() , while Sass mix() only takes one percentage value color-mix(in srgb, pink 85%, white) Can’t use a CSS custom property in Sass color functions, as Sass variables compile at runtime while CSS custom properties compile when used Let’s take a look at how this works in native CSS vs Sass!
DO YOU STILL NEED SASS? Relative color syntax Allows colors to be changed relative to another color Takes an origin color and splits it into 3 color channels background-color: oklch(from purple l c h); You can manipulate each of these channels to create a new color! FLDC 2026
DO YOU STILL NEED SASS? Nesting Supported in all major browsers since 2024 Works identical to Sass, except: Sass and CSS interpret nested code in different ways Concatenation is not possible like it is in Sass You can’t use a variable to hold onto the & selector to use later FLDC 2026
DO YOU STILL NEED SASS? Nesting in Sass and native CSS .header, .footer { h2 { … } } /* In Sass… / .header h2, .footer h2 { … } / In native CSS… */ :is(.header, .footer) h2 { … } FLDC 2026
DO YOU STILL NEED SASS? Concatenation in Sass // This is not possible in native CSS! .main-content { &__header { … } &__footer { … } } FLDC 2026
DO YOU STILL NEED SASS? Saving the ampersand for later // This is not possible in native CSS! .main-content { $self: &; &—narrow { … ${self}__header { … } } } // Compiles to .main-content {…} .main-content—narrow {…} .main-content—narrow .main-content__header {…} FLDC 2026
DO YOU STILL NEED SASS? CSS if() and @function, the new kids on the block! FLDC 2026
DO YOU STILL NEED SASS? if() Finally, the ability to add if statements to CSS! Only supported in Chromium browsers (Chrome, Edge, Opera, and others) Currently only supports 3 queries: Media queries ( media() ) Feature queries ( supports() ) Style queries ( style() ) FLDC 2026
DO YOU STILL NEED SASS? if() example .container { display: grid; grid-template-columns: if( media(width > 1440px): repeat(4, 1fr); media(width > 1024px): repeat(3, 1fr); media(width > 768px): repeat(2, 1fr); else: 1fr; ); } FLDC 2026
DO YOU STILL NEED SASS? @function Now you can add basic functions to CSS! Also only supported in Chromium browsers currently You can specify data types and return types No early return like in PHP and JavaScript functions FLDC 2026
DO YOU STILL NEED SASS? Pixels to REMs using @function @function —rem(—px <number>) returns <length> { result: calc(var(—px) / 16)rem; } … h2 { /* renders as 1.5rem */ font-size: —rem(24); } FLDC 2026
DO YOU STILL NEED SASS? FLDC 2026 What if I want Sass-like fuctionality on my site?
DO YOU STILL NEED SASS? FLDC 2026 Enter PostCSS!
DO YOU STILL NEED SASS? FLDC 2026 What is PostCSS? A NodeJS tool to transpile CSS using various plugins Some plugins replicate what is coming from the CSSWG (CSS Working Group), acting as a polyfill of sorts until all browsers support the feature Other plugins replicate Sass features or other features that may never be added to the CSS specification Others add nice to haves to CSS
DO YOU STILL NEED SASS? FLDC 2026 PostCSS plugins with future CSS syntax postcss-custom-media: defines @custom-media following the Custom Media specification postcss-if-function: Transforms the CSS if() function into native CSS when the browser doesn’t support it Only works with media() and supports() , style() not yet supported postcss-contrast-color-function: follows the CSS Color Module Level 5 specification postcss-preset-env: collection of plugins all with future CSS syntax!
DO YOU STILL NEED SASS? PostCSS plugins that replicate Sass functionality postcss-mixins: plugin that replicates mixin functionality in Sass postcss-map-get: replicates Sass’s map-get functionality postcss-for: Adds for loops to code List of PostCSS plugins from the PostCSS website FLDC 2026
DO YOU STILL NEED SASS? PostCSS plugins with useful functionality cssnano: CSS minifier built on top of PostCSS postcss-pxtorem: converts px units to rem units postcss-import: transforms import rules by inlining styles, similar to Sass partials FLDC 2026
DO YOU STILL NEED SASS? FLDC 2026 PostCSS in action!
DO YOU STILL NEED SASS? FLDC 2026 PostCSS downsides You might get used to plugins that don’t follow CSS specifications, and once those specs get added to CSS, you’ll have to update your code to follow the ‘real’ specification. Having too many plugins might affect performance Setup can be confusing depending on the technology you use You might not want any tooling at all on your site
DO YOU STILL NEED SASS? Okay, this is great. What if I still want to use Sass, though? FLDC 2026
DO YOU STILL NEED SASS? FLDC 2026 You can use Sass AND native CSS together!
DO YOU STILL NEED SASS? FLDC 2026 Using Sass and native CSS You can use custom properties with Sass variables You might want to use CSS custom properties for most of your code, but need to switch to Sass to use mixins and maps Sass has its own version of calc() which works with Sass variables As of dart-sass 1.40.0, you don’t need to interpolate your Sass variables to use within calc() ! You can use calc() in Sass to get around having to use math.div for the division operator
DO YOU STILL NEED SASS? So, SHOULD you still use Sass? FLDC 2026
DO YOU STILL NEED SASS? FLDC 2026 It depends!
DO YOU STILL NEED SASS? Reasons to still use Sass today Sass isn’t going away anytime soon, so use it as much as you like! You don’t feel like native CSS has quite caught up to Sass yet You make use of complex mixins, functions, and maps You still need to support legacy browser versions Updating your codebase to remove Sass would be too time consuming If you want to! FLDC 2026
DO YOU STILL NEED SASS? FLDC 2026 Wrapping up…
DO YOU STILL NEED SASS? FLDC 2026 Wrapping up… It’s a great time to be a front end developer with so many new additions to CSS: Custom properties, math functions, color functions, nesting, if(), @function PostCSS can enhance native CSS by: Adding CSS that might not be supported by all modern browsers Adding functionality Sass supports today, such as mixins and functions Adding useful functionality such as converting px to rem and CSS minification You can use Sass with CSS if you want to gradually switch your codebase from one to the other, but… You should still use Sass… if you want to!
DO YOU STILL NEED SASS? Further reading Is it time to drop Sass? Do not drop Sass for CSS Going back to CSS-only after years of SCSS Sass Features in CSS How to Use PostCSS as a Configurable Alternative to Sass The gotchas of CSS Nesting Mixing Colors with CSS CSS Nesting, the :is() pseudo-class, and a guide to panicking about Sass CSS @function: Dynamic logic without Sass or JavaScript What You Need to Know about Modern CSS (2025 Edition) Collection of my examples on CodePen FLDC 2026
DO YOU STILL NEED SASS? FLDC 2026 A little about me Mastodon https://labyrinth.social/@starshaped Website https://aubreysambor.com Aubrey Sambor Lead Front End Developer Loves CSS, knitting, beer, and coffee Looking for work! LinkedIn https://www.linkedin.com/in/aubreysambor Drupal.org https://drupal.org/u/starshaped
DO YOU STILL NEED SASS? FLDC 2026 Thank you!
With so many new features added to CSS in the past couple years, is Sass still needed in your projects? Is it time to remove Sass from your build process? What can native CSS and PostCSS do that can replace Sass functionality and how do you implement PostCSS in a Drupal 11 theme?
In this session, I will discuss an overview of current CSS features that replace functionality in Sass, and bleeding edge features that will replace Sass functionality in the future.
I will also give an overview of PostCSS, what functionality it can add to your project, and how to set up PostCSS in your Drupal 11 theme.
Lastly, I will discuss when you might not want to replace Sass just yet and how you can use Sass AND native CSS together to take advantage of your existing build process.
It’s an exciting time to be a CSS developer and the perfect time to learn more about what CSS can do natively without using Sass.
Here’s what was said about this presentation on social media.
for free. You
can too.