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
Before start using Sass you need to install Ruby (is already install in OSX).
- 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: #3d3d3dbody
font: $font-stack
color: $primary-color
Nesting
Sass uses nested and visual hierarchy.
nav
ul
margin: 0
padding: 0
list-style: none li
display: inline-block a
display: block
padding: 6px 12px
text-decoration: none
Partials
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.
@import partials/reset
Mixins
Make groups of CSS declarations that you can reuse throughout your site.
=border-radius($radius)
-webkit-border-radius: $radius
-moz-border-radius: $radius
-ms-border-radius: $radius
border-radius: $radius.box
+border-radius(10px)
Extend / Inheritance
Lets you share a set of CSS properties from one selector to another
.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
Standard math operators to make calculations.
.container
width: 100%article[role="main"]
float: left
width: 600px / 960px * 100%aside[role="complimentary"]
float: right
width: 300px / 960px * 100%
Processing
- Open the terminal and locate your files
- 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.