Sass Intro

What is Sass?

Sass stands for Syntactically Awesome Style Sheets. CSS can get ugly and long these days. Sass is there to help clean up our CSS code, and allow us to include some pretty cool features in our CSS like variables, nesting, and inheritance. Sass is a CSS preprocessor: a scripting language that extends CSS so developers can write code in one language and it will compile that code into CSS. Essentially, it allows us to write better looking CSS faster, and more efficient(syntactic sugar). As I continue through my job search, Sass pops up time and time again on job descriptions. In this post I will cover a few examples and how to get started!

Before you start with Sass an awesome extension to download is the Live Sass Compiler extension in VSCode. This extension will transpile all your .scss files into css with live browser updates.

In a project, I recommend creating a “styles” folder within your project directory which will include all your .scss and .css files. Create a main styles.scss file and make sure to import that into your code as the main stylesheet. To create a sass file, all you have to is replace “.css” with “.scss” when naming your stylesheet. After creating your main .scss file and writing a little css in it, you want to hit the “Watch Sass” tab from the extension.

This will tell the extension to watch your sass files and it will automatically take your sass file, compile it, and create a matching css file so the browser can read it. Now that we have a little background on getting it set up we can check out some features that make sass so great.

Basic Features

Variables

Variables are great for creating themes that will be used throughout your application. If you want all the buttons to have the same color, font, or padding this is where you can great a global variable pointing to that css attribute.

Example:

Sass:
$primary-color: #333; // Variables are declared with '$'

button {
background-color: $primary-color;
}

Css:

button {
color: #333;
}

Here we assign our primary color attribute to our $primary-color variable, which we can reuse throughout our application so we don’t have to remember HEX or rgba values, which can get annoying.

Nesting

Nesting child elements in Sass is very easy and much more visually sound than standard CSS.

Example:

Sass

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

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

CSS

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

Sass allows us to nest our child elements within our parent selector, keeping our files shorter and cleaner.

Partials

Partials a great way to keep your Sass file from getting way too long. You can create partial Sass files and import them into your main file. Say you had a form you were styling, you can create a new Sass file containing just the styles for your form, and import it into your main file as a module. You name a partial file with an “_”(_form.scss). To import this partial we use the @import keyword

*Main file*
@import "form"

Extend/Inheritance

Inheritance can be used when you have multiple elements that hold the same properties, but require slight tweaks to each one.

Example:

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

In this example we are using a special kind of class %message-shared. This a placeholder class, meaning that it will only print when it is @extended by another class. If it is never selected then it will not print. Classes .message, .success, .error, and .warning will all contain the attributes in %message-shared and are differentiated with their border color. This helps our code to be DRY(Don’t Repeat Yourself). Using placeholder classes is considered best practice, but you also use @extends on normal selectors as well.

All examples were taken from the official Sass documentation. Furthermore, this a video by Dev Ed on youtube that entails setting up Sass and some examples, very useful! These aren’t all the cool features that come with Sass so make sure to dive further and explore in more detail.

Cheers!