Sass, or Syntactically Awesome StyleSheets, is a scripting language extension of CSS. It gives you new features that aren’t found in standard CSS that make creating your page easier. Let’s go through some of the basic features…

Sass, unlike CSS, uses variables to store data. We create variables using ‘$’ here are some examples:

$header-color: black;
$body-font: Arial;

Mixins are a feature of Sass that make CSS declarations reuseable. Let’s use the example of a mixin from the Sass website and explain it:

@mixin reset-list {
margin: 0;
padding: 0;
list-style: none;
}

@mixin horizontal-list {
@include reset-list;

li {
display: inline-block;
margin: {
left: -2px;
right: 2em;
}
}
}

nav ul {
@include horizontal-list;
}

You start a mixin with ‘@mixin’ followed by a name. Whenever ‘reset-list’ is needed, you will call it with ‘@include’ followed by the name of the mixin. Now, we don’t have to continuously re-write the same rules for all of the elements that are applied to reset-lists.

@if and @else are used to add some complex logic to your CSS stylesheet. To keep this simple, @if is similar to using an ‘if statement’ in JavaScript, and @else is used to add more conditions.

@for adds styles in loops, similar to ‘for-loops’ in JavaScript. It is used in 2 ways: start through end and start to end. As its name suggests, ‘start to end’ excludes the end of the loop and ‘start through end’ includes the entire loop. This makes it easy to apply written CSS styles to different elements.

Software Engineering Student @ Flatiron Denver. Located in Austin, TX