What is Sass (SCSS) and Less? Sass and Less are pre-processors that extend CSS (Cascading Style Sheets). They add features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themeable and extendable.

They both have similar functions and syntax with minor differences. In Less, variables are called using @variable in Sass they are called using $variable. They both can work in node, in the browser and frameworks. I mainly started using sass and less using Drupal 8 and the Bootstrap framework. I started using Less with bootstrap 3 and really liked the mixins the variables and functions, it’s like CSS on steroids. Bootstrap 4 switched to Sass. Both of these pre-processors make it easy to get up and running quickly and simplify and extend writing CSS.

I use the Atom text editor to write and compile the styles. Atom has packages that will set up the compiling to work on your computer. I like compiling because you can separate the Sass/Less into different files and then pull them all into one file.  This also helps to limit the server requests. Both Sass and Less use compiling as part of the workflow.

With the bootstrap sub-theme I can pull in all the bootstrap styles, and overwrite the variables and have a really good base theme very quickly.  You can change, the colors, text, fonts etc., just by changing the variables. Then I detail everything further using CSS .

Sass and Less take time and work to set up and configure. But once they are set up it will help speed up your workflow . I am starting to use Sass more personally because that is what bootstrap is using. But they both are great pre-processors, give them a shot!