Sass Learning Series Part 1: Introduction to Sass
DRY (Don’t Repeat Yourself) is a basic Principle that every good Software Engineer should follow. But when it comes to styling your web application, we often make a lot of repetitive actions in our style.css file, and in the end, that file becomes hard to maintain. So whenever we need to update a particular style we need to make the changes in a lot of places in the file and that’s where CSS Preprocessors come into the picture.
A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax.
What is Sass?
Sass (Syntactically Awesome Style Sheet) is one of the CSS preprocessors which lets you write clean, reusable CSS code which is easy to maintain and it has features that don’t exist in CSS yet like nesting, mixins, inheritance, etc.
Let’s understand How Sass actually works?
Your Sass code gets converted into a normal CSS code with the help of the compiler. Sass compilers are built on top of Sass implementations. There are multiple Sass implementations and we will be using Dart Sass though-out this series.
If you want a GUI-based application to Compile your Sass, here is a list of SASS Compiler Tools.
Note: While installing any SASS Compiler tool , please note which Sass implementation they use. In the above list shared, there are many tools which uses ruby sass which is no longer supported.
For simplicity, we will use Dart Sass’s stand-alone command-line executable to compile our Sass code.
Dart Sass’s stand-alone command-line executable uses the blazing-fast Dart VM to compile your stylesheets.
Installation
For Windows:
You will need the Chocolatey package manager and you can install Dart Sass by running
choco install sassFor Mac OS X or Linux:
You will need the Homebrew package manager and you can install Dart Sass by running
brew install sass/sass/sassIf you use Node.js, you can also install Sass using npm by running
npm install -g sassNote: this will install the pure JavaScript implementation of Sass, which runs somewhat slower than the other options listed here. But it has the same interface, so it’ll be easy to swap in another implementation later if you need a bit more speed!
Now we are all set up and ready, we can run the Sass executable to compile .sass or .scss files to .css files.
sass [sass/scss file path] [.css file path] For example, considering the .scss file and .css file are in the same folder, we can use the -w flag to autorun the command if any changes are detected in the .scss file.
sass index.scss index.css -wDifference between SASS and SCSS
The working of SASS and SCSS(Sassy CSS) is the same, the only difference between them is Syntax. SASS uses Indented Syntax (older syntax) while SCSS Uses brackets and semicolons (newer syntax).
Conclusion
That was the complete introduction and installation process of Sass, in the next part we will be focusing on Sass features like Nested Rules, Helper functions, Inheritance, Mixins, Partials, etc. So stay tuned for that :).
