Your Program Needs a Little Sass

Sass (short for Syntactically Awesome Style Sheets), is an alternative option to style your programs. In simple terms, it’s a way to power up your CSS and make it feel more like a traditional programming language. There are two ways you could write syntax for sass. You can write it in indented form to use indentation to separate code blocks and newline characters to separate rules. If you use this syntax you will need to work on a file with a .sass file extension. The newer version is “SCSS” (Sassy CSS). SCSS uses blocks like CSS. It uses curly braces to denote code blocks and semicolons to separate rules within a block. SCSS with require your file to end with a .scss extention.

Some of the features that give sass a feel of familiarity to programmers are variables, nesting, mixins, and selector inheritance.

Variables

One of the most immediately intriguing things to me when I was told about sass was the fact it could store variables. This is something that has been a lifesaver in my most recent project, letting me save a specific gold color I wanted to use throughout the project. SassScript supports four data types: numbers, strings, colors, and booleans.

Variables are prefaced with a dollar sign ($) and end with a colon (:)

$primary-color: #3bbfce;

Nesting

Sass also allows you to nest logic. This lets you declare styling for a parent element, then if needed enter any styling for children within the same block. As you can see below you can style siblings in a neat and organized way.

#navigation-bar {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

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

Partials and Modules

To avoid repeated and tiresome CSS code you can write a chunk of code in another file and refer to it whenever it is needed. You can create a separate file with an underscore before its name and an .scss extension ( _partial.scss ). You can make the partial available as a module with “@use”.

//inside _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;
//inside your stylesheet
@use 'base';

.card {
  background-color: base.$primary-color;
  color: white;
}

After using sass for the first time in a project this week I have found it is really helpful to have a clean and logical stylesheet. There are more powerful things I’d like to learn more about in sass such as inheritance, and mixins, and a further look into how sass compiles css.