SASS/SCSS Preprocessor can be a great help to create and manage complex css structures. It boosts css with pro features like defining and executing Variables, Functions and Mixins.

1. SASS
(Syntactically Awesome Style Sheet)

2. 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.

3. 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)

4. 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.

5. Install Sass
•Open up your Terminal.app and type:
•Windows:
gem install compass
•Linux / OS X:
sudo gem install compass

6. Features
•Variables
•Nesting
•Partials
•Import
•Mixins
•Extend/Inheritance
•Operators

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

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

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

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

11. Extend/InheritanceSASS 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; }

12. OperatorsSASS 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%; }

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

14. Thank you!