Let's Get Sassy

An Introduction to Sass CSS

Created by Kianosh Pourian / @kianoshp

A little about me

User interface developer/designer/consultant

Co-author of "Sass in Depth"

For beginners

History behind Sass

  • 2006 Hampton Catlin introduced us to HAML. A lightweight markup pre-processor language that uses indentation (whitespace) to separate blocks

%article#main-author.primary-article{"data-author-id" => "999"}
  %h1 primary header title for paragraph below
    %a.external-link{:href => "#"} Example of body text link


  • Compiles to:
    <article id="main-author" class="primary-article" data-author-id="999">
    	<h1>primary header title for paragraph below</h1>
    	  <a href="#" class="external-link">Example of body text link</a>

    HAML for CSS === Sass

    • Indentation and whitespace based language
      width: 100%
        text-decoration: none
        background: #fff
        color: #333
          font-weight: bold

  • Compiles to:
    header {
    	width: 100%;
    header .nav {
    	text-decoration: none;
    	background: #fff;
    	color: #333;
    header .nav p {
    	font-weight: bold;

    Advantages of Sass

    • sass and scss
    • variables
    • mixins
    • functions

    Keep in mind


    • Commonly used values
    • Sizing
    • Color schemes
    • Base filesystem variables
    • _config file

    Data types

    • numbers (e.g. 1.2, 13, 10px)
    • strings of text, with and without quotes (e.g. "foo", 'bar', baz)
    • colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
    • booleans (e.g. true, false)
    • nulls (e.g. null)
    • lists of values, separated by spaces or commas (e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)

    Variable Scope

    All variables outside of a mixin or function will have a global scope. Any changes to the variable will set further references of the variable:

    $text-color: blue;
    .error {
      $text-color: red;
      color: $text-color;
    .normal-text {
      color: $text-color;

    !default flag

    • If the variable has an assignment, it will not be re-assigned
    • variables with null value will be considered unassigned and will be assigned with !default
    // !default values assigned mixin specified variables 
    $box-padding: 10px !default;
    $box-background-color: orange !default;
    // Mixin arguments set to specified variables as defaults
    @mixin the-box($padding: $box-padding, 
      $background-color: $box-background-color) {
      padding: $padding;
      background-color: $background-color;


    • Functions are simple processes that will perform a "function" and return a value
    • @return must be included
    $default-browser-size: 16px !default;
    @function responsive-size($fontSize: $default-browser-size) {
    	@return $fontSize/$default-browser-size * 1em;
    @function rs($fontSize: $default-browser-size) {
    	@return responsive-size($fontSize);

    More involved example

    @function linearGradientColors($stop-colors...) {
    	$full: false;	
    	@each $stop-color in $stop-colors{
    		@if $full {
    			$full: $full + ',' + $stop-color;
    		} @else {
    			$full: $stop-color;
    	$full: unquote($full);
    	@return $full;
    @function lgc($stop-colors...) {
    	@return linearGradientColors($stop-colors...);


    • Repeated CSS patterns
    • Establishment of DRY principle
    $border-position-all: "all";
    @mixin add-border($border-position: all, $border-size: 1px, 
      $border-pattern: solid, $border-color: black) {
      @if $border-position == $border-position-all {
        border: $border-size $border-pattern $border-color;
      @else {
        border-#{$border-position}: $border-size 
        $border- pattern $border-color;

    More involved mixins


    Thank you!

    Let's Get Sassy

    By Kianosh Pourian