Learn Sass

What we'll cover:

1. What is sass?
2. Why use sass over plain CSS?
3. How to use Sass?
4. Features.

Let's get started! 😄

What is sass?

Sass, short for Syntactically Awesome Style Sheets is a CSS preprocessor which adds upon normal CSS and allows you to have features like variables, nested properties, and mixins. We will explore all these and more in a moment.

But wait, what is a preprocessor to begin with?

A preprocessor is a scripting language that simply allows you to write your code in one language then, compile/translate your code to another language.

In this case, you write Sass code then compile it to normal CSS then use that complied CSS in your website NOT the Sass code.

You're probably asking, why even bother with this process? That brings us to the next question...

Why use sass over plain css?

The reason is simple, more features. Sass gives you the ability to use all the features of CSS + some more great stuff which will at times make your life easier, help you write DRY code and make your app more scalable and easier to maintain.

How to use Sass?

Since sass is a preprocessor, you'll need a sass compiler installed which will take your sass file, compile it to CSS and write that CSS into a CSS file. Some of the ways you can achieve this are by installing an extension in your text editor such as vscode's Live Sass Compiler or by installing the Sass npm package.

Syntax

There are 2 ways of writing sass code and each has its own file extension. one .sass and the other is .scss.

let's explore those...

The .sass or "The Indented Syntax" is written like so:

nav
    width: 100%
    padding: 10px
    border: 1px solid

No semicolons nor brackets and uses indentation instead.

The other is .scss and it's written like so:

nav {
  width: 100%;
  padding: 10px;
  border: 1px solid;
}

With this syntax, you'll feel right at home since it's so similar to the way you write CSS.

The .css way is more commonly used and it'll be the one we'll be exploring.

All the following also applies for .sass but just with the differences mentioned above. 😊

Features

Let's now go through the most used features of sass.

Variables:

Variables are simply key-value pares that you can declare once, then apply them anywhere throughout your styles.

They help you stay consistent, write dry code, scale and maintain your styles easier.

You declare a variable in sass by writing a \$ followed by name: value

Example:

// Declaration
$primary-color: #afef9f;
$secondary-color: #aaa;
$accent-color: #efee7f;

// Usage
nav {
  background-color: $primary-color;
  box-shadow: 10px 10px 23px -9px $secondary-color;
}

.btn {
  background-color: $accent-color;
}

Now if you decide you wanna go with different colors, instead of changing the colors one by one, you just change the variable's value and the change will be applied anywhere you applied the variable.

Nesting:

With nesting, you can nest many CSS selectors inside each other, let's see an example...

Example:

nav {
  width: 100%; // Will be applied to all nav elements

  .logo {
    height: 30px; // Will be applied to any .logo class in a nav element
  }

  ul {
    margin: 10px; // Will be applied to any ul element in a nav element

    li {
      font-size: 14px; // Will be applied to li in a ul in a nav
    }
  }
}

Output:

nav {
  width: 100%;
}

nav .logo {
  height: 30px;
}

nav ul {
  margin: 10px;
}

nav ul li {
  font-size: 14px;
}

You can also use pseudo-selectors like :hover with the symbol & like so:

nav {
  width: 100%;

  .logo {
    height: 30px;

    &:hover {
      // Whatever you put in here will be applied when you hover on the logo
    }
  }
}

Also, you can use & followed by any name and sass will join them like so:

.logo {
  height: 30px;

  &_small {
    height: 20px; // Will be added to .logo_small
  }
}

Output:

.logo {
  height: 30px;
}

.logo_small {
  height: 20px;
}

This feature allows you to write less code and make your styles more organized and easier to group.

Imports:

Imports allow you to separate your scss code into other .scss files and then import them in any other .scss file and they'll be applied to that file.

Let's say you have one .scss file which has some variables and some header styles like so:

index.scss

$primary-color: #e32453;
$secondary-color: #fff91f;
$white-color: #eee;
$black-color: #002222;

header {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

You can put them each in a separate file then import them in a single file, the naming convention of reusable scss files or "Partials" is adding a "_" before the name.

Let's separate this file into two:

_variables.scss

$primary-color: #e32453;
$secondary-color: #fff91f;
$white-color: #eee;
$black-color: #002222;

_header.scss

header {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

Now we can import these two files into the index.scss by writing @import followed by the path of the file we want to import:

index.scss

@import "./header";
@import "./variables";

Notice that we didn't include the "_" nor the ".scss" extension because sass already knows that these files are partials.

This will apply whatever is in _header.scss and _variables.scss in index.scss.

Mixins:

Mixins allow you to have code snippets that can take arguments, each mixin has a name and contains some styles which could be reused within other selectors.

The way you can decalre a mixin is by writing: @mixin name { ... } OR @mixin name( arguments.. ) { ... }, then, @include name() to use it.

let's explore an example.

Example: Without arguments

@mixin centerAlign {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.header {
  @include centerAlign(); // Will add all the properties in centerAlign

  font-size: 30px;
  text-decoration: underline;
  font-weight: 500;
}

Example: With arguments

@mixin centerAlign($direction) {
  display: flex;
  flex-direction: $direction;
  justify-content: center;
  align-items: center;
}

.header {
  @include centerAlign(row); // Will set flex-direction to row

  font-size: 30px;
  text-decoration: underline;
  font-weight: 500;
}

.header_second {
  @include centerAlign(column); // Will set flex-direction to column

  font-size: 30px;
  text-decoration: underline;
  font-weight: 500;
}

You can also use @content in case you want to add on to the code...

Example: With @content

@mixin custom($screen) {
  @media (max-width: $screen+"px") {
    @content; // the content you add will be placed here
  }
}

.header {
  font-size: 30px;
  text-decoration: underline;
  font-weight: 500;

  @include custom(700) {
    font-size: 20px; // will decrease your font-size when you hit 700px screen width and down
  }
}

Output:

.header {
  font-size: 30px;
  text-decoration: underline;
  font-weight: 500;
}

@media (max-width: 700px) {
  .header {
    font-size: 20px;
  }
}

Extend/Inheritance

You can inherit properties from another place by writing @extend, followed by what you want to inherit like so:

Example:

.item {
  margin: 20px 10px;
  padding: 10px 8px;
  font-size: 12px;
}

ul {
  li {
    @extend .item; // Will inherit all the properties in .item

    font-weight: 300;
    line-height: 10px;
  }
}

Operators

The last commonly used feature we're going to explore is mathematical operators. When using sass, you can use basic math operators such as: + , - , * , / and %.

Let's see those in action...

Example:

.item {
  margin: 20px % 3; // The remainder of how many times 3 can go into 20
  font-size: 6px * 3;
  width: 100% - 20%;
}

Output:

.item {
  margin: 2px;
  font-size: 18px;
  width: 80%;
}

Now you're familiar with what is sass, how it's used and all the most used featured of sass. To learn more, visit the official sass documentation.

Learned something new?

Share this post with a person whom you think can benefit from too and consider following us to get informed every time we publish a new post. 😊

Have a great day! 😄