September 28, 2017Posted by Hifyre Admin

What is SASS?

SASS is a scripting language that gets compiled into Cascading Style Sheets (CSS) by either an application or the command line. Known as CSS with superpowers, SASS is able to significantly speed up stylesheet development by reducing redundant written code. It does this by using variables, nesting, calculations, and functions similar to Javascript. The end result after getting compiled is the same as writing the code out manually with regular CSS.

Moving from CSS to SASS

It’s easy to get started with SASS because SASS is completely compatible with all versions of CSS. This means you can still write regular CSS in a SASS file, plus you have the option of using all the benefits of SASS. The only difference is the file extension of your working file changes from CSS to SASS, and you need to compile the file. The compiled SASS file is the CSS file you would include in your HTML.

Efficient code with SASS

SASS eliminates the need to manually write out vendor prefixes on CSS properties

  • Some SASS compiler applications have a built in AutoPrefix CSS option
  • Another option is to use a mixin library such as Compass or Bourbon
  • Or handle your own CSS vendor prefixing by creating your own mixin

The SASS @import directive is very useful for creating maintainable code

  • Separate your stylesheets into relevant separate files, for example typography, buttons, header, footer etc.
  • Create one master stylesheet and use the @import directive to include the separate stylesheets
  • After compiling the master stylesheet, you will have one CSS file to include in your HTML

Variables allow you to set constants that you can reuse

  • Set a colour palette in one place, and use those colour variables throughout your stylesheets. If you need to change a colour, you only need to update it in one place and it will be reflected in the entire stylesheet. There’s no need for finding and replacing the value multiple times.
  • Variables can also be lists or arrays that can be looped through with functions and mixins

Nesting CSS selectors reduces the amount of code you need to write

  • Instead of repeating the same CSS selector multiple times, you can nest selectors so that they inherit the parent selector

Loop through list or array variables to condense redundant code and allow for easily updating selectors

  • You can use mixins to create reusable blocks of code

Built in SASS functions make manipulating colours very easy

  • Lighten, darken, saturate, desaturate, invert are just a few of the useful functions available

Helpful Links