David Lohmeyer's Blog

Breakpoint Slicer and Bootstrap for SASS, two fine front end tools

As a front end design fan I like to constantly improve my toolsets.  Two of the tools I use on new projects these days include Bootstrap for SASS and Breakpoint Slicer.  Both can be added to your SASS project with a 'require' line in the config.rb file and then @imported into your scss file.

Here's how each helps you:

Bootstrap for SASS

This converts Twitter's awesome Bootstrap framework into SASS instead of the less-than-ideal LESS.  It just makes life easy.  It includes a large configuration scss file with tons of variables.

Breakpoint Slicer

This takes advantage of the Breakpoint SASS tool for media queries.  It makes the syntax even easier, so instead of:

p{
  @incude breakpoint($my-breakpoint-name){
    some: css;
  }
}

You would define a series of breakpoints in a SASS variable and then @include it via number. It uses simple ranges in English like to() and from():

$slicer-breakpoints: 0 430px 530px 767px 992px 1200px;

p{
  @include to(4){
    some: css;
  }
}

The above applies the CSS to anything below 767px in width.

Related Posts