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!

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.

Nesting

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

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

li { display: inline-block; }

a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}
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

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.


%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;
}