SASS - An Overview
Tags: sass, css, tutorial, beginners
Published: 2021-10-30 20:15:18

<h1>Overview Of SCSS/SASS</h1>
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.

<br>
<h1>SASS - Meaning</h1>
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.

<br>
<h1>Prerequisite</h1>
Before using or learning SASS, you should be conversant with:
<ul>
	<li>
		HTML fundamentals
	</li>
	<li>
		CSS properties
	</li>
	<li>
		Basic understanding of programming (if/else, loops)
	</li>
</ul>

<br>
<h1>Under the hood - SASS</h1>
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.

<br>
<h1>Setting up SASS</h1>
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 <a href="https://sass-lang.com/install">install SASS</a> using two methods. These
are:

<ul>
	<li>
		either downloading and installing different <b>applications</b> 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).
	</li>

	<li>
		or using the <b>command line</b> 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```
	</li>
</ul>

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.

![Live SASS compiler](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iptebl1i6lfw3p73qton.png)

After successful installation, a button “<b>Watch SASS</b>” 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 “<b>Watch SASS</b>” button like this:

![Compiling SASS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y0oe80jyaao4qfzevdnr.png)

<br>
<h1>SASS features</h1>
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:

<br><h2>Variables</h2>
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:<br>


```
$brand-color: #9966ff;

body {
  font: 100% $font-stack;
  color: $brand-color;
}
```


This will translate to our CSS as:


<br>
`CSS` file:<br>


```
body {
  font: 100% Helvetica, sans-serif;
  color: #9966ff;
}
```

<h2>Nesting</h2>
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 <a href="https://sass-lang.com/">official documentation</a>.

With that in mind, here's an example of some typical styles for a site's navigation:

<br>

`SCSS` file:<br>


<pre>
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
		display: inline-block;
	}

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
</pre>


`CSS` file:<br>


<pre>
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
</pre>


<h2>Partials</h2>
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 <b>underscore</b>. 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.

<br>
`SCSS` file:

<pre>
@import "variables";

$brand-color: #9966ff;
$background-color: #f5f5f5;

body {
	color: $brand-color;
	background-color: $background-color;
	* {
		box-sizing: border-box;
		padding: 0;
		margin: 0;
	}
}
</pre>

<b>Note</b>: 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.


<br><h2>Mixins</h2>
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.


<br>
`SCSS` file:


<pre>
@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);
}
</pre>


<br>
`CSS` file:

<pre>
.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;
}
</pre>


<h2></h2>Inheritance in SASS or the ‘Extends’ keyword</h2>
You can inherit or extend the properties of any class or other selectors using the `extends` keyword in SASS.

<br>
`SCSS` file:


<pre>
.general-container {
	width: 98%;
	max-width: 1440px;
}

.article-container {
	@extend .general-container;
	font-size: 16px;
}
</pre>

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:





<pre>.general-container, .article-container {
	width: 98%;
	max-width: 1440px;
}

.article-container {
	font-size: 16px;
}
</pre>


Seems like magic :-D :-P




<h1>SASS - Built-in functions</h1>
SASS has many built in functions,we will just review a few of them.

<h2>For loops and Each loops:</h2>

You can use loops in SASS to write repetitive styles used in your applications like:


<br>
`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:

<br>
`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.
<h1>Continue Reading:</h1>
<ul>
	<li>
		<a href="https://sass-lang.com/guide">
		Sass Basics 
		</a>
	</li>

	<li>
		<a href="https://sass-lang.com/install">
			Install SASS
		</a>
	</li>

	<li>
		<a href="https://thoughtbot.com/upcase/sass-fundamentals">
		SASS Fundamentals
		</a>
	</li>

	<li>
		<a href="https://teamtreehouse.com/library/sass-basics-2">
		SASS basics
		</a>
	</li>

	<li>
		<a href="https://levelup.gitconnected.com/the-useful-sass-features-in-a-nutshell-sass-cheatsheet-c5767340d43b">
		The Useful SASS Features in a Nutshell — SASS Cheatsheet
		</a>
	</li>

	<li>
		<a href="https://frontendmasters.com/courses/sass/">
		SASS Fundamentals
		</a>
	</li>
</ul>