SASS Processing in Azure Devops Pipeline

Well, I would start with a short story which happened few months ago. My organization then was trying to switch their project management tool from an old and trended out Team Foundation Server to the new and sophisticated Azure Devops suit, deciding to use almost all the features it offers from version control to boards. What to say; I was in charge of the technical aspects of that migration, like devising branch and merge strategies to design and develop CI/CD pipelines.

So here is what happened. We had a couple of front-end applications which extensively use SCSS as the primary style keeping format and they needed to be processed and compiled to CSS(because browsers only understand CSS) while the build pipeline triggers. It caught me by surprise that there were no Azure DevOps extensions built to do this task which I desperately wanted back then.

So I made one which can compile sass files to CSS and also add vendor prefixes to the resultant css😊. PS: It is now available in the visual studio market place for free.

Process Sass Files

To use this extension you first have to install it in your organization, probably with the help of your organization administrator, since installing extensions needs special permissions. Once it is installed, this extension will be available to be used among the other pre-installed tasks.

Once installed, you can configure the task of your needs. In order for this extension to work, the bare minimum parameters you need to configure are:

• inputFile: which SCSS/sass file in your repository need to be compiled to CSS
• outputFile: Where exactly does the compiled CSS file need to generate

Other than the above two configurations, there are additional three features this extension provides you with:

• style: You can either select Normal or Minified. If selected Minified, the resultant CSS will be compressed
• enableVendorPrefixing: You can opt-in for vendor prefixing. Learn vendor prefixing here. If you enable vendor prefixing, the process-sass-files task will add vendor prefixes to the generated CSS file
• Tool Versions: The process-sass-files extension uses two cli-s for it’s entire operations. The sass compiler and autoprefixer-cli. By default, it uses the latest versions of these tools. However, you can configure the task in such a way that the process-sass-files task always uses the exact versions of sass and autoprefixer you use in your dev environment

At last, your pipeline might look something like the above and be able to form a proper CSS file once the pipeline is run.

Happy coding!