Getting Started with SASS

Image for post
Image for post

Sass is a CSS preprocessor that adds power and elegance to the basic language. It allows you to use variables, nested rules, mixins, inline imports, and more, all with a fully CSS-compatible syntax.

Sass helps keep large stylesheets well organised, and get small stylesheets up and running quickly, particularly with the help of the Compass style library. Here you will find all you need to start with Sass.


Before start using Sass you need to install Ruby (is already install in OSX).

  1. Open the terminal.

2. Check if Ruby is installed

3. Install Sass

4. Check if Sass is installed



Sass uses nested and visual hierarchy.


Files that contain little snippets of CSS that you can include in other Sass files (a way tod do modularization). Partials can be use with the @import clause.


Make groups of CSS declarations that you can reuse throughout your site.

Extend / Inheritance

Lets you share a set of CSS properties from one selector to another


Standard math operators to make calculations.


  1. Open the terminal and locate your files
  2. Generate CSS file:

That’s is all you need to start learning Sass. Now you can begin to write CSS as ninja style.

More info, examples and demos here.

Written by

Full Stack Developer, Speaker and Auth0 Ambassador. Passionate about code, teach and field hockey. Mostly working with JavaScript, Vue.js and Node.js. 🚀

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store