SASS-y

Syntactically Awesome Style Sheets

Photo by Maik Jonietz on Unsplash

I’ve recently started working with Sass, or Syntactically Awesome Style Sheets. They are a great what to style your sites, that goes beyond what basic CSS can do. In this post, I’m going to go into what Sass is, why you should use it, and some examples of what it can do.

So first, what is Sass or syntactically awesome style sheets. Sass is a preprocessor scripting language that is compiled into CSS. Sass offers features like nesting, mixins, inheritance, and variables. It makes it easier to handle and style larger work with ease. As stated Sass is a preprocessor so you will have to compile it to CSS. There are a few ways to do this. The one I’m going to show you is just with npm.

So for the sass watch, you will need to have Node.js installed on your computer, that way you have access to npm or node package manager. First, you will need to install sass.

sass-learn % sudo npm i -g sass
   // This installs sass globally on your machine
sass-learn % sass --watch scss/style.scss css/style.css
   // This watches the folder that you sass is in and creates a css   
      folder with those stylings

With each time you save your sass file the changes will be saved into the CSS file that will style your site. Now let's get into some of the things that sass has that CSS doesn’t.

VARIABLES

Like in other languages variables allow you to save a value to be used in multiple spots. That way you only have to make changes in one spot. Sass variables start with ‘$’, similar to PHP. Below I will show the difference between Sass and CSS.

CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

SCSS

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

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

NESTING

Nesting is very useful and probably one of my favorite features in Sass. It allows you to nest selectors, similar to how HTML divs would be nested. Be careful with over nesting, resulting in over-qualified CSS that could prove hard to maintain and is generally considered bad practice. Here are some examples.

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

SCSS

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

  li { display: inline-block; }

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

EXTEND/INHERITANCE

For this example, I’m going to use buttons as a way to show you how to use these features. We will have two buttons, they will both be the same except for the background color will be different. This way the buttons look exactly the same, you only had to write it once.

%btn {
   display: inline-block;
   border-radius: 5px;
   margin: 3px;
   padding: 8px 20px;
}

.btn-one {
    @extend $btn;
    background-color: $primary-color;
}
.btn-two {
    @extend $btn;
    background-color: $secondary-color;
}

PARTIALS

Like in other languages partials allow you to separate out concerns. This can make it easier to edit code when the time comes. The partial path always starts with an underscore (_). So in the case of our buttons, it would be something like this _buttons.scss. Then you would just need to import them into the main file.

style.scss
@import 'buttons'
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

These are just some of the features that make Sass so great to work with, and I’m sure I’ll find more as I go deeper into the documentation and usage. I will link to that sass website, so you can start working with sass.

RESOURCES

Documentation