TIL: My First Intro to Sass: Variables and Mixins
I picked back up on the sample sass project I started a few nights back. This portion of the tutorial finally got into actually writing some sass and getting one of the first pages set up.
There were three main topics/concepts that were covered in this video:
- Creating variables
- Creating functions/mixins
- Importing from other sass files
Creating variables in Sass is pretty straight forward. In order to define your own customer property, you start off the variable name with a
$ sign inside the file. So if I wanted to set the color
dog, I’d do the following:
And that’s all there is to it.
If I then want to use that variable somewhere else in the scss file, I can reference it by the same variable name,
$ sign and all:
Sass uses the term
Mixins for what are essentially functions. If you want to handle some form of logic, you can put it in a mixin, and then reference it from within the various blocks of your scss file.
To define a
mixin, you simply define a new
@mixin <name>, where name is your function name:
To use this function call from within your scss blocks, you’d then use
@include <mixin> to call in:
You also have the ability to write conditional statements. The only one that was covered in this lesson was writing
@if statements to check against set boolean variables, but I imagine that it supports more than just that.
Importing From Other Sass Files
The final thing covered was how to break your scss files into smaller pieces. By the end of the video, the main scss file had already gotten very large.
To break things up and keep like pieces together, it’s possible to split the scss into smaller parts and import them when needed. These smaller parts are then referred to as
partials. Those files are typically named with a leading underscore to indicate that they contain helper code.
To import a scss file into another, all you need to do is use the
@import <file_name> command at the top of this file. You don’t need to include the leading underscore, nor do you need to include the
For example, a partial file names
_myfile.scss would be imported like so: