A Beginner’s Guide to Sass
What is Sass?
Sass (syntactically awesome style sheets) is a scripting language that is completely compatible with all versions of CSS. It is a CSS preprocessor that allows you to add functionality, efficiency, and usability to standard CSS.
Why should I use it?
If you’re already familiar with CSS, Sass is easy to learn and enables you to make use of variables, functions, mix-ins, and other built-in features that make it easier to design a web page or web app.
What will I learn if I read this guide?
I’m not going to try to teach you everything there is to know about Sass or all the things you can do with it. Instead, I’m going to introduce you to the basic concepts so you can get started right away!
Before we get started, here are a few things you should know:
Browsers can’t read Sass, so your Sass files have to be compiled into plain CSS. This can be done with Node.js as a compiler or with Gulp. You can also use the Live Sass Compiler extension for Visual Studio Code.
Sass supports two different syntax formats:
- Sass: Sometimes called ‘indented syntax’ because it uses indentation instead of brackets. If you’re writing Sass, use the .sass file extension. Here’s what it looks like:
- Scss (Sassy CSS): If you’re writing scss, use the .scss file extension. I will be using Scss for this guide. Here’s the same code written in scss:
Let’s get started!
Variables
Sass variables compile into the actual value, not into CSS variables. Here’s a quick example of how you can use variables to save time. This makes it really simple to change the colors across the whole site all at once.
Maps
Maps in Sass hold key-value pairs. Sass provides several functions that can be used in conjunction with maps to access values, do something for each value, create a new key-value pair, etc.
Accessing a value in a map
Doing something for each value in a map
Nesting
In standard CSS, it can sometimes be inefficient to access child elements. Sass makes that easier too!
Functions
Functions allow you to build complex operations and reuse them throughout your code. To define a function, use@function
followed by the name of your function and any variables. A function must also contain an indication of the return value for the function call.
Mix-ins
Mix-ins allow us to group CSS values together for ease and efficiency. Here’s an example of creating and using a mix-in:
Mix-ins can be passed an argument
If you want to reuse the code written in your mix-in but pass different values to create different styles, you can pass an argument to the mix-in.
There are a lot of other cool and interesting ways to use Sass, so I hope this sparked your interest! Give it a shot; it’s easy and fun to use!
Amanda Treutler