Skip to content

Replacing sass with PostCSS

By Brian Sunter

Posted in Programming, Frontend, Css

PostCSS has all the features I need from sass for managing CSS. At this point sass feels like CoffeeScript and PostCSS feels like Babel.

I recently quickly and easily replaced the sass for this site with PostCSS plug-ins. I never liked sass because it was Ruby based and it was a full language that is non extensible. PostCSS allows you to write CSS extensions in JavaScript and only import the functionality you need. I've replaced all the features I liked from sass with PostCSS plug-ins.

Variables and Custom Properties

Custom properties can do everything preprocessor variables can do and more. They are override-able and inspectible by the Chrome dev tools.

:root {
--some-color: red;
}

.foo {
/* red */
color: var(--some-color);
}

Nesting

There is a plug-in for sass style nesting.

.article-card {
.featured-image-link {
&:hover {
.featured-image {
transform: scale(1.1);
}
}
}
.featured-image {
transition: transform 1.5s ease;
}
}

Imports

The PostCSS Imports Plug-in allows for code reuse and modularization.

@import "modules/_links.css";
@import "modules/_typography.css";
@import "modules/_article-card.css";
@import "modules/_typography.css";

Browser Support

The Autoprefixr Plug-in helps you automatically support additional browsers.

Special Plug-ins - TailwindCSS

The Tailwind CSS Framework includes a PostCSS Plug-in. This plug-in adds some additional keywords like (like @tailwind, @apply, theme() that make theming easier. It also generates a theme based on your configuration file.

  tailwindcss('./tailwind.config.js')
Brian Sunter
Brian Sunter

I've spent all my life on top of a mountain, learning the way of the Ninja Dev.