Moving from Sass to PostCss

Now that I tend to use TailwindCss for most of my projects I’ve noticed that I don’t really use Sass anymore. I was and still a huge fan of Sass/Scss and I still do use it on legacy projects. When I first started using Sass, I used to use loads of the features sass offers such as writing functions to build grids, convert px to rems and create colour palettes. But now CSS is getting increased features this isn’t the case much anymore.

The three primary areas where I find benefits using Sass are Variables, Nested selectors and importing stylesheet. I’m going to list all the alternative which I use and how I run them using PostCss Cli

Variables

When I first started using Sass, this is the number one feature why I started using it. Being able to declare variables for values like colours was a game changer for me. But I found myself using CSS variables now that there is increased browsers support it out the box.

Nested

In the past I was a huge fan of BEM. I found it useful in structuring out my class names. So, having the ability to nest classes helped me when writing maintainable code. The postcss-nested plugin behaves the same as far as I can tell as how Sass handles nested selectors.

Importing stylesheets

Another notable feature for Sass which I found useful was being able to import in stylesheet. This helps loads in how to structure code by making it clean and manageable. The PostCss plugin is called postcss-import. Again, like the nested plugin it has all the features which are in the sass version.

How to use it

To keep this example easy to explain. We be using PostCss Cli rather than using something like Webpack or Gulp. I’m going to assume that you have Node, NPM on your machine and already have a package.json file. For this example, to make it more like my current workflow. I’ve also included Css Nano which I also use to minify my code and Autoprefixer to add any vendor prefixes on. In the command line write the following command

npm install postcss postcss-cli postcss-nested postcss-import autoprefixer cssnano --save-dev

Once the modules have been installed. We need to create our config file. Create a new file called postcss.config.js in the root of the site directory. Inside that file add the following below. The code below is doing is importing all the PostCss plugins. Which we installed in the previous step.

module.exports = {
    plugins: [
        require('postcss-import'),
        require('postcss-nested'),
        require('autoprefixer'),
        require('cssnano')({
            preset: 'default'
        })
    ]
} 

Now on your command line enter the following below. A bit about the command the first part is the path of where your existing stylesheet is, the -o flag is where to put the output stylesheet.

postcss css/dev/main.css -o css/live/main.css

Thats a quick overview of how I have replaced Sass with just using PostCss.