What is Sass and how how do we use it?
Sass, which stands for Syntactically Awesome Style Sheet, is a CSS pre-processor or pre-compiler that is compatible with all versions of CSS. It is a CSS extension language that takes the power of CSS and magnifies it, allowing us to do more with less CSS. It greatly enhances the capability of CSS, and lets us do things more quickly and efficiently. Sass has cleverly marketed itself as “CSS with superpowers” and is widely used and actively supported.
While Sass is hugely powerful, I’d advise those new to web development to make sure they have a strong understanding of plain old CSS first. You will absolutely need to understand and be able to work with the foundational concepts and syntax of CSS in order to get acquainted with Sass.
The main challenges that working with CSS presents is that our stylesheets quickly become very long and hard to understand and manage. While we are usually able to go back into our stylesheets and find what we need to work on with some digging, doing the same thing with code that someone else has written is a whole different story. Sass gives us a solution for these problems and gives us a way to write code that is cleaner, more reusable, and easier to maintain. Ultimately, Sass is powerful because it allows us to write CSS in a more dynamic manner.
Now that we understand why Sass is so awesome, let’s jump into learning how to work with Sass. To get started, we can install Sass globally by running
npm install -g sass . If you prefer to install using Homebrew, you can run
brew install sass/sass/sass.
Sass is written in SCSS (Sassy CSS) or Sass, with SCSS being preferred since it uses the same syntax as normal CSS. Sass is not understood by the browser, and instead, it must be compiled into normal CSS before the browser can read and interpret it (hence the reason Sass is known as a CSS pre-compiler). We can compile SCSS files into CSS files by running the
sass command from the terminal. In our command, we’ll have to let Sass know which file to build from as well as where we want the resulting CSS file to go. As an example, running the following command
sass input.scss output.css tells Sass to build from a SCSS file with the name “input.scss” and compile that into a CSS file with the name “output.css”.
Sass uses variables, which as you can probably deduce, allows us to store information that can then be easily reused throughout our application. We declare variables in Sass by using the $ symbol within our SCSS file, like so:
We can then use these variables as CSS property values in our SCSS files. See below for an example:
Sass variables allows us to reuse values throughout our application, lending itself to greater consistency and more concise code. This makes it easy for a us to apply a consistent color palette throughout our projects, and makes it easier for us to change our code if we decide we want to update a value.
Another great feature of Sass is the ability to use partials — partial Sass files that contain chunks of CSS code that can then be imported into other Sass files. This allows us to easily separate our styling into smaller, more manageable units, which ultimately makes it easier for us to understand and mantain our code. Partials are named with an underscore, like so:
_partial.scss. This tells Sass not to compile our partials into plain CSS files.
Partials are extremely useful — they allow us to do things like create files containing all our Sass variables and then import them into other files, making our code much more clean and readable. Let’s take the variables we set up previously and use them as partials. We can then import our partials into our working SCSS file using the
@importkeyword, like so:
Functions are another extremely useful and efficient feature of Sass. We can use functions to write dynamic CSS, such as dynamically setting font color based on the darkness of the background. Functions are written using the
@function keyword. I won’t cover Sass functions here just for the sake of being concise, but the Sass documentation is extremely helpful in understanding functions and how to use them.
Sass makes it easy for us to write shareable properties that can then be extended and inherited. If we have a set of shared properties, we can use the
% symbol to let Sass know that we want to be able to extend this set of properties throughout our code. Let’s imagine that we have two buttons that share a bunch of properties, but differ in a few aspects. We can declare the shared properties like so:
Now to extend our shared properties to specific element, we can use the
@extend keyword within the styling for the elements so that they can inherit from the shared properties.
As you can see, this allows us to keep our code nice and dry, which is always what we want to aim for.
While we’ve covered some of the features of Sass and what makes it so useful, there is a lot more to explore. I encourage you to go through the Sass documentation and look at some of the many valuable resources available online. Sass is a very convenient technology that is worthwhile taking the time to learn.