It’s all in the SASS

When we left off, we just downloaded our SASS extension and are finally able to write some code. I also discussed how SASS is very similar to JS and Python in the fact that you can use variables, create mixins (aka functions), and even separate your code into multiple files. I know… AWESOME!!!

To start, let’s talk variables! We are starting with creating a variable in SASS because it is super easy and simple. In order to create the variable, all you have to do is use the “$”. These variables can store information that you want to reuse throughout your stylesheet. What can you store, you ask? Well, these variables can store things like colors, font stacks, or any CSS value you think you’ll want to reuse. Below you will find an example:

Mixins —

Mixins are very similar to functions to where you can make a group of CSS declarations and reuse them throughout your program. To create a mixin, you write @include nameOfMixinName(){ ...code...} . Mixins are also super neat because they can pass in multiple properties. To pass in these custom parameters, you would set a value equal to a variable, and then pass that variable in as a parameter.

Then when you use the mixin later on in your code, you would just need to @include nameOFMixin(value) in the value of the property you want to change. Below is an example:

Lastly, to separate your code to into multiple files, you need to first begin the name of the file with an underscore. This allows SASS to know that the file is only a partial file and that it should not be generated into a CSS file.

You can use the code you make in one file in another by importing it. For example, if you have a mixin in a file name _header.scss and want to use it in your style.scss, you would need to do @import "./header" given that it is in the same folder.

Next week, we will talk a little bit about nesting and inheritance!