Zach Cochran
by Zach Cochran
2 min read

Categories

Tags

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:

  1. Creating variables
  2. Creating functions/mixins
  3. Importing from other sass files

Creating Variables

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 #EAF to dog, I’d do the following:

$dog: #EAF

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:

h1 {
   color: $dog;
}

Creating Functions/Mixins

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:

@mixin myDog {
   color: $dog
}

To use this function call from within your scss blocks, you’d then use @include <mixin> to call in:

h1 {
   @include myDog()[]
}

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 .scss ending.

For example, a partial file names _myfile.scss would be imported like so:

@import myfile

💚