Beginner's guide to SASS
Let’s face it, writing CSS is messy, but it’s even messier when reviewing the code that other people have written. I find SASS is the answer to that – it helps you to write clean, readable code.
Let’s jump into it and create a simple HTML that has nested divs, hover, focus, repeated CSS properties etc; you know, the standard HTML we face in daily life.
Below is an example HTML markup:
<h1 class="header">I am Header</h1><div class="container"><div class="parent1"><a class="parent1__link1" href="/">link1</a></div><div class="parent2"><a class="parent2__link2" href="/">link2</a></div></div>
It’s important to understand why we’re are using classes
parent1_link1. It is a part of the BEM (Block Element Modifier) methodology whereparent1is the block andlink1is the element. BEM follows simple rules to name and organize your CSS and gives everyone on a project a declarative syntax that they can use so that they’re on the same page. You can read about it here.
Variables
Let’s start with writing CSS for header. It’s pretty simple stuff, background-color and color properties.
.header {background-color: #888888;color: #FFFFFF;}
Here, with the help of SASS, we can store color codes in variables so that they can be reused. Let’s create variables for our color codes (you can use this to come up with names for color variables).
The ＄ character must be used to create variables in SASS. Our new CSS for header would look like this.
$gray-color: #888888;$white-color: #FFFFFF;$red-color: red;$yellow-color: yellow;$blue-color: blue;.header{background-color: $gray-color;color: $white-color}
We can also use variables for many things padding, margins, color, basically anything you want to reuse.
Imports
To make CSS even more modular, SASS provides import functionality. We can put all the color names, mixins, and common styles in different files and import them. Let’s create a _color.scss file.
Note: The name of
_color.scssindicates that this is called a partial file meaning that this file contains little snippets of CSS that you can include in other SASS files. The underscore lets SASS know that the file is only a partial file and that it should not be generated into a CSS file.
$gray-color: #888888;$white-color: #FFFFFF;$red-color: red;$yellow-color: yellow;$blue-color: blue;
We can input this file into our main SASS file using the command:
@Import './_color.scss
and continue using color variables in the same way as depicted above.
Nesting
Next, we jump to parent1 (please refer to the HTML markup above) and its children.
Writing CSS for parent1 and parent1_link1
To do this, we will use & for the concatenation of parent1 and parent1_link1. Please refer to the code below (pay attention to the use of variables here as well).
.container {display: flex;.parent1 { /* Child of container ---> resulting class: .container.parent1 */display: flex;background: $red-color;flex: 1;&__link1 { /* Child of parent1 ---> resulting class: parent1_link1 */cursor: pointer;color: $white-color;}}}
Writing hover and after classes
For this, we will concatenate pseudo-classes and elements to parent1_link1 using &.
Note: pseudo-classes are concatenated using
&:and pseudo-elements are concatenated with&::.
A comprehensive list of pseudo-classes and pseudo-links is available here.
.container {display: flex;.parent1 { /* Child of container ---> resulting class: .container.parent1 */display: flex;background: $red-color;flex: 1;&__link1 { /* Child of parent1 ---> resulting class: parent1_link1 */cursor: pointer;color: $white-color;&:hover {color: $blue-color;}&::after {content: '...';}}}}
Mixins
As described above, we have written CSS for parent1. We will write same CSS for parent2 as well.
.container {display: flex;.parent1 { /* Child of container ---> resulting class: .container.parent1 */display: flex;background: $red-color;flex: 1;&__link1 { /* Child of parent1 ---> resulting class: parent1_link1 */cursor: pointer;color: $white-color;&:hover {color: $blue-color;}&::after {content: '...';}}}.parent2 { /* Child of container ---> resulting class: .container.parent2 */display: flex; /* Same property as parent1 */flex: 1; /* Same property as parent1 */background-color: $yellow-color;color: $white-color;&__link2 { /* Child of parent2 ---> resulting class: parent2_link2 */cursor: pointer; /* Same property as parent1 */color: $white-color; /* Same property as parent1 */&:hover {color: $blue-color;}&::after {content: '...';}}}}
As we can see in the file above, parent1 and parent2 share many common CSS properties. We could make this CSS cleaner, simpler, and more readable using mixins.
Here is how mixins work. We create a custom common style using @mixin keyword (as depicted in the code below). It contains all the properties that are common to both parent1 and parent2.
@mixin common-style {display: flex;flex: 1;}
Next, we include the mixin in our parent styles using @include.
@mixin common-style {display: flex;flex: 1;}@mixin link-common-style {cursor: pointer;color: $white-color;}.container {display: flex;.parent1 { /* Child of container ---> resulting class: .container.parent1 */@include common-style; /* include mixin like this */background: $red-color;&__link1 { /* Child of parent1 ---> resulting class: parent1_link1 */@include link-common-style; /* include mixin like this */&:hover {color: $blue-color;}&::after {content: '...';}}}.parent2 { /* Child of container ---> resulting class: .container.parent2 */@include common-style; /* include mixin like this */background-color: $yellow-color;color: $white-color;&__link2 { /* Child of parent2 ---> resulting class: parent2_link2 */@include link-common-style; /* include mixin like this */&:hover {color: $blue-color;}&::after {content: '...';}}}}
Here, I have created mixins for both link style and parent style. They make the code cleaner and more readable.
This was a basic guide to getting started with SASS. Of course, SASS provides a great variety of functionalities that can be used to make your life easier when writing CSS. You can refer to the full SASS guide here.
- undefined by undefined
