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!




Software Engineer

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

💡 How to get started with S-Wallet 💡

GraphQL in Scala with Caliban — Part 3

Nice project

Unitydefi Has Gone Mobile

Observations From an Engineer: Amazon Elasticsearch Service

Apache Spark — Multi-part Series: What is Apache Spark?

GCSIT- Guiding you Towards an Agile Infrastructure

Building a Serverless REST API on AWS in Python

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Thomas Muscarello

Thomas Muscarello

Software Engineer

More from Medium

How to Tame Your Frontend

Regular Function vs Arrow Function [en]

Basic things to know about “Application Framework”

Closing the Closure Confusion