Getting Started with SASS

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.

Installation

  1. Open the terminal.

2. Check if Ruby is installed

$ ruby -v

3. Install Sass

$ gem install sass

4. Check if Sass is installed

$ sass -v

Variables

$font-stack: Helvetica, sans-serif
$primary-color: #3d3d3d
$font-stacl: Helvetica, sans-serif
$primary-color: #3d3d3d
body
font: $font-stack
color: $primary-color

Nesting

nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: none

Partials

@import partials/reset

Mixins

=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius
.box
+border-radius(10px)

Extend / Inheritance

.message
border: 1px solid #ccc
padding: 10px
color: #333
.success
@extend .message
border-color: green
.error
@extend .message
border-color: red
.warning
@extend .message
border-color: yellow

Operators

.container
width: 100%
article[role="main"]
float: left
width: 600px / 960px * 100%
aside[role="complimentary"]
float: right
width: 300px / 960px * 100%

Processing

  1. Generate CSS file:
$ sass main.sass main.css

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.

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

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