Level Up
Your Sass

Created by Jackie Keiser

Here's a collection of things I've learned
about Sass since I started using it.


Variable Types

  • Booleans
  • Numbers (with or without units)
  • Colors
  • Strings (with or without quotes)
  • Lists (comma or space seperated)
  • Null


                            $example: 'value' !default;

You can assign variables if they are not already assigned by using !default. You can see examples of this in the Foundation framework's components files.


Play with this gist on SassMeister.


$image-path: /templates/images;

.example-image {
    background-image: url('#{$image-path}/image.jpg');

Interpolation is where variables are replaced with their values within a string or expression


Play with this gist on SassMeister.



In CSS, @import is for linking to other stylesheets. In Sass, @import works with partials to actually take the the contents of a partial and insert them directly into the output CSS.


Partials are a special kind of Sass file. They must be imported into another stylesheet to be used and their filenames must start with an underscore.

Directory Structure

|-- partials/             # Partials
|   |-- _buttons.scss       # buttons
|   |-- _grids.scss         # grids
|   |-- _home.scss          # homepage styles
|   |-- _typography.scss    # typography
|   |-- _variables.scss     # variables
|   ...
|-- framework/            # Framework
|   ...
`-- styles.scss           # Primary Sass file that imports partials

Using a base file that imports partials helps organize files


The Inception Rule: don’t go more than four levels deep.

Check your output!

Nest Partials

@media #{$small-only} { // Mobile datepicker uses the popup theme
    @import "custom/pickadate-default";
    @import "custom/pickadate-default-date";
@media #{$medium-up} { // Tablet up datepicker uses the inline theme
    @import "custom/pickadate-classic";
    @import "custom/pickadate-classic-date";

I found nesting partials to be helpful when I had a plugin that needed different styles for different media queries.


The almighty ampersand

Play with this gist on SassMeister.

The ampersand is a way to reference parent selectors when nesting.

Mixins vs Functions


Play with this gist on SassMeister.

A mixin allows you to define reusable styles. They can take arguments to manipulate those styles.


Play with this gist on SassMeister.

A function can also take arguments but it is meant to return a value.



Placeholders are similar to mixins in that they are a group of reusable styles. The differences are that they do not accept arugments and instead of repeating the same block of styles, they group selectors together.


Play with this gist on SassMeister.

Loops and Lists


@for, @each, @while

Play with this gist on SassMeister.


$jackies-fav-colors: #9ECC16 #AA81FF #F92672;

Lists are like arrays. In Sass they can be comma or space seperated.

Loops and Lists

Play with this gist on SassMeister.

Loops and Lists

Play with this gist on SassMeister.

Command Line

Basic Sass Watch

sass --watch input:output

Other Sass Options

sass --check input:output

Only checks syntax, doesn't evaluate.

sass --line-numbers input:output

Adds comments to the generated CSS that indicates the line numbers in the Sass files.

Other Sass Options

sass --quiet input:output

Silence warnings and status messages while compiling.

sass --style NAME input:output

Changes the style of your output. The options are nested (default), compact, compressed, or expanded.

Can't remember the Sass commands?

sass --help
--help or -h works with a lot of things in the command line. Try it out!

Source Maps

Debugging with Sass partials got you down?

Use Source Maps

Add --sourcemap to your sass command

sass --watch --sourcemap sass/styles.scss:styles.css

Source maps allow you to see the original source CSS while debugging. When you run --sourcemap it adds a comment to the end of the css file that links to a .map file it created.

Enable source maps in your browser

Chrome, Firefox, and Safari supports source maps.
Check out Using source maps with Sass 3.3 on The Sass Way to find out how to enable them.



Sass is useful but with the addition of variables and partials, comments are more important than ever.

Using // will prevent your comments from showing up in your output. All comments are removed in compressed format.


//    **STOP**
// This project currently uses Grunt. The grunt files have not been commited.
// Please contact Jackie before you make changes.

// Watch example
// sass --watch styles.css:scss/styles.scss

// Sass partials got you down? Add source maps for chrome
// https://developer.chrome.com/devtools/docs/css-preprocessors
// sass --watch --sourcemap styles.css:scss/styles.scss

//    Contents

// Variables that can be used globally
@import "custom/variables";
@import "bourbon/bourbon";

// Makes browsers render all elements more consistently and in line with modern standards
@import "normalize";

// Foundation Settings
@import "foundation/settings";

// Foundation component calls. Comment out the ones that are not being used.
@import "foundation";

// All of the foundation overrides and additions
@import "custom";

//    General Notes on Eden Roc

// Eden Roc is responsive and built mobile first. If you make a change, remember to
// check on all screen sizes because it will cascade.

// 320px - 767px (Mobiles, Small Tablets)
// 768px - 1229px (Tablets, Netbooks)
// 1230px - 1680+ (Desktop, Full-width)

// - This is the only file you need to watch
// - Media queries are nested and should follow this order:
//      .element {
//          Small styles
//          @media #{$medium-up} { Medium up styles }
//          @media #{$large-up} { Large up styles }
//      }
// - CSS rules with one or two properties can be on one line. Rules with more than
//   two declarations should be on multiple lines.
//      .example { color: #999; font-size: 12px; }
//      .example-2 {
//          color: #999;
//          background-color: red;
//          font-size: 12px;
//      }
// - Try to comment your code like I've done here! Use // so that it gets removed
//   when sass compiles.
// - Add global variables to /custom/_variables.scss. Variables specific to a
//   certain section or partial can be declared at the top of that section or
//   partial.