SASS in 15 minutes
If you write a lot of CSS, preprocessor like SASS can significantly ease the amount of your work and your stress levels. Things like Sass, Less, Stylus or PostCSS make your CSS files more readable and improve maintainability. Thanks to variables and functions the code will become cleaner, better structured and as a result help developers to work faster and make less errors.
Start
The browser on its own doesn't understand Sass files, so it needs to compile them in the normal plain old CSS. Hence, we'll need something to convert .scss files to .css. And there are several options here:
- The easiest way - is a browser converter for compilation Sass on the spot — SassMeister.
- Usage of apps: there are both paid and free ones available. Read more here.
- If you a command line - lover, you can install Sass on your machine and compile it manually.
If you choose the command line at then end - you can install Sass in its original wrapper, developed on Ruby or you can try Node.js port.
You can compile .scss file using the command line like this:
node-sass input.scss output.css
Also, it is now a good time to mention that Sass offers 2 different types of syntax: Sass and SCSS. Both do the same thing, but developed differently. SCSS is a bit newer and normally considered to be a better option, so we will be using that. If you want to read about the differences on the two - have a read here.
Variables
Variables work in exactly the same way you saw in every other programming language. When declaring, we store a specific value in it, which we usually see in CSS like color, font or any other property like box-shadow.
Below are the examples of such variables in SCSS and CSS.
After compilation, the above will look like this in CSS:
The idea is that it can simplify the process of repetitive usage of variables and also we can quickly change the value of a specific variable where we declare it instead of surfing through your code.
Mixin
Mixin can also be used as a class-constructor in the programming language: you use several properties from the CSS creating a separate object, which later can be used wherever you want assigning different values to its properties.
Have a look at the example below:
Thats what we will see in CSS:
One more way to simplify you work with mixin is to use it with prefixes for browser adaption.
CSS:
Extend
Next nuance that we will look at is @extend. It allows us to inherit CSS properties to one selector from the other one. The principle is somewhat similar to Mixin, but Extend is mostly used to create logical connection between the page elements.
E.g. Extend is used when we need 2 similar elements that has slight differences. For example, let's take 2 buttons: Confirm and Cancel.
CSS:
If you have a look at the CSS code, you will see that Sass combines selectors instead of repeating the same ones several times in the code.
Nested constructions
As you would know, in HTML the developer write code following the 'nesting' principle. In other words, blocks of code are located in other blocks. CSS on the other hand normally looks chaotic in this sense. If that is a problem for you Sass can help you to organise and structure it.
An example of code in SCSS:
And the same in CSS:
Operations
You can do different mathematical operations right inside the code, which massively improve the workflow.
CSS:
Although right now you can do the same thing in CSS by using calc(), the Sass alternative method is faster to write and has mod (%) operation and also can be used in a wider spectre of types.
Functions
Sass provide a huge list of functions. For example, functions for operations on lines, colours or different mathematical operations like random() or round().
To make it a bit more visual let's have a function darken ($color, $amount), which (as you probably guessed) will darken or attach hover effect.
SCSS code:
CSS:
In addition to a huge list of functions, you can also declare your own.
Some parts of the above will eventually get to the normal CSS, but till then preprocessors are a great way to make your life easier and Sass here is a very decent choice.
*Translated from WebDev.
*Join @thefrontend channel for more🔥.