SASS(Syntactically Awesome Style Sheet)

Introduction

● Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.

● Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”). SCSS files use the extension .scss.

Install Sass(Applications)

There are a good many applications that will get you up and running with Sass in a few minutes for Mac, Windows, and Linux. You can download most of the applications for free but a few of them are paid apps.

CodeKit (Paid) Compass.app (Paid, Open Source) Hammer (Paid) Koala (Open Source) LiveReload (Paid, Open Source) Mixture (Free) Prepros (Paid) Scout (Open Source)

Install Sass and Compass

•Sass and Compass get installed as Ruby gems so you'll need to have Ruby on your machine.

•If you're on Windows, you can run the Ruby Installer. On Linux, Rails Ready provides several Ruby essentials. On OS X, Ruby is already installed by default so Ruby just works.

Install Sass

•Open up your Terminal.app and type:

•Windows: gem install compass

•Linux / OS X: sudo gem install compass

Features

•Variables•Nesting•Partials•Import•Mixins•Extend/Inheritance•Operators

Variables SASS SCSS

$font-stack: Helvetica, sans-serif $primary-color: #333

body font: 100% $font-stack

color : $primary-color

$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }

CSS

body { font: 100% Helvetica, sans-serif; color: #333; }

Nesting SASS SCSS

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

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

CSS

nav ul { margin: 0; padding: 0; list-style: none; }

nav li { display: inline-block; }

nav a { display: block; padding: 6px 12px; text-decoration: none; }

Import SASS SCSS

// _reset.sass html, body, ul, ol margin: 0 padding: 0

// base.sass

@import reset

body font: 100% Helvetica, sans-serif background-color: #efefef

// _reset.scss html, body, ul, ol { margin: 0; padding: 0; }

/* base.scss */

@import 'reset';

body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

CSS

html, body, ul, ol { margin: 0; padding: 0; } body { font: 100% Helvetica, sans-serif; background-color: #efefef; }

Mixins SASS SCSS

=border-radius($radius) -webkit-border-radius: $radius -moz-border-radius: $radius -ms-border-radius: $radius border-radius: $radius

.box +border-radius(10px)

@mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; }

.box { @include border-radius(10px); }

CSS

.box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; }

Extend/Inheritance SASS SCSS

.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

.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; }

CSS

.message, .success, .error, .warning { border: 1px solid #cccccc; padding: 10px; color: #333; } .success { border-color: green; } .error { border-color: red; } .warning { border-color: yellow; }

Operators SASS SCSS

.container width: 100%

article float: left width: 600px / 960px * 100%

aside float: right width: 300px / 960px * 100%

.container { width: 100%; }

article { float: left; width: 600px / 960px * 100%; }

aside { float: right; width: 300px / 960px * 100%; }

CSS

.container { width: 100%; } article { float: left; width: 62.5%; }

aside { float: right; width: 31.25%; }

Breakpoints

@mixin breakpoint($query) { @media #{$query} { @content; }}

$small-phone-and-down: "screen and (max-width: " + pxToEm(319) + ")";$large-phone-and-up: "screen and (min-width: " + pxToEm(400) + ")";$large-desktop-and-down: "screen and (max-width: #{$width-frame-max})";

body { @include breakpoint($large-phone-and-up) { font-size: 1.1em; }}@include breakpoint($small-phone-and-down) { .main-menu { background-color: $color-menu-background; a { color: $color-menu-link; } }}

Thank you!