If you have been learning web development and now are looking for more up-to-date solutions, you have certainly come across Sass. Note this name should not be mistaken for SaaS which stays for a programming concept known as “Software as service”.
Sass has all of the nifty things like functions, variables, loops and so on. With this, you can perform wonders for CSS while write less code and spending less time on the same amount of work in general. This short article will guide you through some of the useful features of Sass.
Creating functions with Sass
Sass function and all those features starts with „@” symbol before it. This is called „at-rule”. There are some rules that you have to declare „@” followed by the rule. For example a function you will declare as „@funcntion name{….}”.
You can virtually do any sort of calculations or operations you want to perform. You can return anything from the function itself. In other words, with Sass, you can apply a typical object-oriented approach to your web page styling, for instance, by creating functions and calling them anywhere you want to use them.
Mixin and include rules
Other most used features are „@mixin” and „@include” rule. These rules are global. You can use them anywhere in any .sCSS file.
„Mixin” is allows you to define a set of code or CSS property such as avalue pair and use it anywhere by using „@include”.
For instance, let”s say we want to have a little set of code which we want to use as a preset all over our app. We can do something like „@mixin flexCentered{…..}” inside the code block, we can set like display:flex; align-items: center; justify-content: center; now you have a centered item anywhere you use it.
Now how do we use it? Well, let’s say we have an HTML element called <div class =„navbar”>. We can simply target the div and class together to raise the CSS specifically and use it there. Like, div.navbar{ @include flexCetnered }. Now, all of the children of the div element with the class navbar will be horizontally and vertically aligned. With this, you can imagine the flexibility of using Sass.
Creating components of CSS files
Another major reason you should use Sass is the flexibility of breaking CSS files into multiple files or components like React, and use them the way you want. This helps you to keep your stylesheet organised in one place rather than as one CSS file with thousands of lines of codes.
You can do it by creating one main .sCSS file. A filename is absolutely up to you. There is just a single rule of naming requiring from any file name to have the following structure: „_filename.sCSS”.
Now you can use this file anywhere you want. One of the convenient ways to do so is to bundle all of the „_” files into the main.sCSS file. The way you can do it is by using „@import „pathname/file”. Although official Sass documentation discourages you from using import as this function will soon be deprecated due to some issues. Yet, you can still play around with it. Later you will have to use „@use „pathname/filename”.
Rendering a style with conditions
Another useful feature is Sass allows to conditionally render your style with „@if” and „@else”. This makes it super powerful to conditionally style your page. For instance, you can declare your check inside a mixin like „@mixin theme($dark-theme:true){ @if dark-theme {
Background-color: $dark-bg; color: $light-color; @else {Background-color:$light-bg; color:$dark-color; }}. $someone is a declaration of a variable which directly stores some values.
Now, you can go ahead and use it for any element you want to use it for. There are also loops available inside Sass which are applied with the same „@” rule. There are „@each”, „@for”, „@while” loops ready-to-use available for your style in actions.
As you can see, you have an immense power in your grip with Sass, which allows you to complete various tasks you could not have done with CSS alone. For further information, you can go to the official Sass documentation or watch videos on YouTube. There are also some good websites with hands-on tutorials. Go power up your style sheet!