Using !default in Sass

Today I came across a cool keyword in a Sass file. It’s called ‘!default’. There was a variable declaration and then !default after it e.g.

$foo: 20px !default;

So, I decided to fine out what exactly it means. !default  means the variable will be set if it has not already been set. This way, you can declare project specific values of a variable first and then add the defaults after it.


  1. A Sass `!default` use case.

A Cool Way to Clear Floats When using Compass

There are a variety of ways to clear floats with working with html, one way being to create a div with style: clear: both after the last floated element. A more elegant way, when working with Compass, is to use clearfix. Here’s how to go about it.

@import "compass/utilities/general/clearfix"
.some-element-to-clear-floats-for {
  @include clearfix();


Compass Clearfix | Compass Documentation. 9/1/2017.