Getting Started with SASS

Installation

  1. Open the terminal.
$ ruby -v
$ gem install sass
$ 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. Open the terminal and locate your files
  2. Generate CSS file:
$ sass main.sass main.css

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

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
Ignacio Anaya

Ignacio Anaya

212 Followers

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