Overview Of SCSS/SASS
In this tutorial, we shall briefly take an overview of what SASS is and how to get it up and running in your local
machine so you can start using it in your projects. We all get a little frustrated/overwhelmed when styling large scale applications, especially using plain CSS. Things do get very messy easily. Things can get a lot easier using SASS :-D. Before delving in, let's start with what SASS actually means.
SASS - Meaning
SASS stands for Syntactically Awesome Stylesheets. It is a CSS superset which gives you programming type features and
pre-compiles into CSS. It is essentially a CSS pre-processor - an upgrade to what CSS is and what CSS offers. So it
makes it easier to work with CSS, it reduces the repetition and saves time which ultimately leads to you styling your
pages efficiently with fewer CSS lines.
Prerequisite
Before using or learning SASS, you should be conversant with:
- HTML fundamentals
- CSS properties
- Basic understanding of programming (if/else, loops)
Under the hood - SASS
SASS works like our regular CSS, but the browser does not understand SASS - that is why we will need a SASS
pre-processor to convert SASS code into CSS.
Setting up SASS
Before you can use SASS, you need to set it up on your project. There are basically many ways to set SASS up. From the
SASS official documentation, you can install SASS using two methods. These
are:
- either downloading and installing different applications that will get you up and running with SASS in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps (and totally worth it).
- or using the command line to install SASS. This will enable you to run the SASS executable to compile `.sass` and `.scss` files to `.css` files. For example: ```sass source/stylesheets/index.scss build/stylesheets/index.css```
Another straight forward way of using SASS is install an extension in VSCode (a text editor). For you to use this
method, it means that you must be using VSCode as your text editor. Thi extension is called “Live SASS Compiler”, it
does all the job for you, you just need to install it from your VsCode and you are good to go.
After successful installation, a button “Watch SASS” will show up at the bottom of your editor just click on it
then it will start compiling your SCSS to regular CSS. One thing you should make sure to do is that you link your Scss
file with HTML, but you need to link it the way you do with CSS. if your SASS file name will be “style” and it is placed
in a folder named “SCSS”, then you have to link it like this:
<link rel="stylesheet" href="scss/style.css">
After linking it, Now you can compile your SCSS file (SASS) just by clicking the “Watch SASS” button like this:
SASS features
As we have discussed earlier in the introductory part of this tutorial, SASS gives you superpowers to use over your regular CSS. Below are the some of the features we can use to give us that superpowers:
Variables
You can use the variables feature in SASS to avoid writing and modifying repetitive style properties. Variables are useful when you want to preserve say a brand color consistent in the website. Let's say we have a brand color of
#9966ff
You can declare a variable in the following manner:
$brand-color: #9966ff
When the SASS is processed, it takes the variables we defined for the $brand-color and outputs normal CSS with our variable values placed in the CSS. This can be extremely powerful in keeping the colors consistent throughout the site.
SCSS file:
$brand-color: #9966ff;
body {
font: 100% $font-stack;
color: $brand-color;
}
This will translate to our CSS as:
CSS file:
body {
font: 100% Helvetica, sans-serif;
color: #9966ff;
}
Nesting
When writing HTML you know that it is nested; that is there is a visual hierarchy. CSS, on the other hand, doesn't have this visual hierarchy.
SASS will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML. Be aware that overly nested rules will result in over-qualified CSS that could prove hard to maintain and is generally considered bad practice according to the
SASS official documentation.
With that in mind, here's an example of some typical styles for a site's navigation:
SCSS file:
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
CSS file:
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
Partials
You can create partial SASS files that contain little snippets of CSS that you can include in other SASS files. This is a great way to modularize your CSS (just like in JAvaScript) and help keep things easier to maintain. A partial is a SASS file named with a leading underscore. You might name it something like _partial.scss. The underscore lets SASS know that the file is only a partial file and that it should not be generated into a CSS file. SASS partials are used with the @import rule.
SCSS file:
@import "variables"; $brand-color: #9966ff; $background-color: #f5f5f5; body { color: $brand-color; background-color: $background-color; * { box-sizing: border-box; padding: 0; margin: 0; } }
Note: We neither added the extension .scss or the underscore. But beware of not having two separate files of the same name: one with underscore and another without underscore. It is a good practice to save all your partials in a separate folder to avoid confusion.
Mixins
Mixins are very useful to declare reusable styles for your application. Some things in CSS are a bit tedious to write, especially with
CSS3 and the many vendor prefixes that exist. A mixin lets you make groups of CSS declarations that you want to reuse throughout your site. It helps keep your Sass very DRY. You can even pass in values to make your mixin more flexible. Here's an example for theme.
SCSS file:
@mixin theme($theme: DarkGray) {
background: $theme;
box-shadow: 0 0 1px rgba($theme, .25);
color: #fff;
}
.info {
@include theme;
}
.alert {
@include theme($theme: DarkRed);
}
.success {
@include theme($theme: DarkGreen);
}
CSS file:
.info {
background: DarkGray;
box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
color: #fff;
}
.alert {
background: DarkRed;
box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
color: #fff;
}
.success {
background: DarkGreen;
box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
color: #fff;
}
Inheritance in SASS or the ‘Extends’ keyword
You can inherit or extend the properties of any class or other selectors using the extends keyword in SASS.
SCSS file:
.general-container {
width: 98%;
max-width: 1440px;
}
.article-container {
@extend .general-container;
font-size: 16px;
}
In the above snippet, we defined some styles in our general-container class and using the extends keyword, we will be able to use the same styles in our article-container.
When compiled, he above code will result in the following CSS styles:
.general-container, .article-container {
width: 98%;
max-width: 1440px;
}
.article-container {
font-size: 16px;
}
Seems like magic :-D :-P
SASS - Built-in functions
SASS has many built in functions,we will just review a few of them.
For loops and Each loops:
You can use loops in SASS to write repetitive styles used in your applications like:
CSS file:
.col-1 {
width: 100%;
}
.col-2 {
width: 50%;
}
.col-3 {
width: 33.33%
}
.col-4 {
width: 25%
}
This above snippet can be converted to the following code using the SASS for loop feature:
SCSS file:
@for $width from 1 through 4 {
.col-#{$width} {
width: (100%/ $width );
}
}
Here, $width is the value of each iteration. Notice the use of the iterating value in the class-name. #{$variable} — you can use this syntax anywhere in your SASS code to combine variables with other strings.
Each loops in SASS can be used to iterate through Lists. Lists in SASS are basically arrays of some values. We can have a list of strings/names and traverse the same. The syntax of each loop is little different from for loop. It starts with @each keyword and used in instead of through.
Thanks for making it to the end of this article. I have included some links at the end of this post for your reading pleasure.
Top comments (0)