Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Sass: Syntactically Awesome Style Sheets

http://sass-lang.com

What is Sass?

Why Sass?

CSS Pre-Processing

What's Wrong With Vanilla CSS?

Sass Features

Indent (shorthand) syntax

Sass offers two syntaxes:

#main {
    color: blue;
    font-size: 0.3em;
}

SCSS

#main
    color: blue
    font-size: 0.3em

Indented

Variables

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

body {
    font: 100% $font-stack;
    color: $primary-color;
}

Selector Nesting

Instead of:

.stuff #content {
    border-color: #beefed
}

.stuff #content button a,
.stuff #content .menu a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

You can do this:

.stuff {
   #content {
      border-color: #c0ffee;
      button, .menu {
         a {
            display: block;
            padding: 6px 12px;
            text-decoration: none;
         }
      }
   }
}

Partials and Importing

Mixins

Mixins are reusable bits of programmable styles. Here is a simple example:

@mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    -ms-border-radius: $radius;
    border-radius: $radius;
}
.box {
    @include border-radius(10px);
}
.box {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

Selector Inheritance

Use the @extend directive to use styles from another selector:

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

Inline Math Operations

Sass offers operators +, -, *, /, and % for calculating values:

.container { width: 100%; }

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complimentary"] {
  float: right;
  width: 300px / 960px * 100%;
}
.container {
  width: 100%;
}
article[role="main"] {
  float: left;
  width: 62.5%;
}
aside[role="complimentary"] {
  float: right;
  width: 31.25%;
}

Installing Sass

Or use a GUI like Koala: http://koala-app.com

Install Ruby

Windows:

http://www.rubyinstaller.org

OS X:

Ruby is already installed!

Linux:

$ sudo apt-get install ruby

Install Sass

Install using Ruby Gems:

$ gem install sass

Verify installation:

$ sass -v

Using Sass WIth PHP Projects

SCSSPHP

SCSSPHP is a SCSS compiler written in PHP. More information at http://leafo.net/scssphp.

Add to Composer

{
    "require": {
      "leafo/scssphp": "0.0.9"
    }
}

Using SCSSPHP

Compiling CSS using the command line:

$ vendor/bin/pscss < input.scss > output.css

Setting up on-the fly interpreting in your code:

<?php
require "vendor/autoload.php";
use scss_server;

$directory = "stylesheets";
scss_server::serveFrom($directory);