paint-brush
SASS Processing in Azure Devops Pipelineby@beingnin
2,399 reads
2,399 reads

SASS Processing in Azure Devops Pipeline

by BeingninMay 18th, 2022
Read on Terminal Reader
Read this story w/o Javascript
tldt arrow

Too Long; Didn't Read

This article is actually not meant to be a tutorial, but to shout out to the world that there exists an azure devops extension for compiling sass files. However official documentation of this extension is enough alone for you to integrate it in your pipelines.

Companies Mentioned

Mention Thumbnail
Mention Thumbnail
featured image - SASS Processing in Azure Devops Pipeline
Beingnin HackerNoon profile picture

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.


This article is actually not meant to be a tutorial, but to shout out to the world that there exists an Azure DevOps extension for compiling sass files. However official documentation of this extension is enough alone for you to integrate it into your pipelines.

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.


Use task assistant pane to view the installed task


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!