Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Sass boilerplate

Building a collection of my common use Sass mixins, functions and snippets. All written with SCSS syntax.


$ npm install sassboilerplate

Revision history

  • 2021-05-18 Another update to Retina media query evaluation method.
  • 2017-12-05 Update to Retina media query evaluation method.
  • 2017-03-15 Published initial npm package.
  • 2015-03-24 Major rewrite supporting Sass 3.4.0 and above only, along with dropping of IE8 support and various implementation changes.
  • 2014-10-02 Final release for Sass 3.2.0. Future revisions make strong use of features such as Sass maps and the @error directive. Release has been tagged as final3.2 if anyone is after it.
  • 2013-03-31 Initial release.



Provides the following:

  • box-sizing: border-box applied to all elements.
  • CSS "reset" to base page elements.
  • font-size reset so 1em = 10px.
  • The obligatory clearfix.
  • Element hide/off canvas.
  • Text overflow with ellipsis helper.
  • Responsive image helper (images to their maximum width or container, preserving aspect ratio/height).
  • Removal of the tap highlight color from Webkit based browsers on touch enabled devices, proves to be rather annoying at times (applies to iOS/Mobile Safari in particular).

Designed for use with all modern browsers and IE8+. The default background, color and font-family can be overridden via Sass variables:

$resetBase_baseBackground: #000;
$resetBase_baseColor: #fff;
$resetBase_baseFontFamily: Arial,'Helvetica Neue',Helvetica,sans-serif;

@import 'resetbase';

...which would generate:

body,button,input,select,td,textarea,th {
  color: #fff;
  font-family: Arial,'Helvetica Neue',Helvetica,sans-serif;

body {
  background: #000;
  font-size: 62.5%;
  line-height: 1;

The clearFix, hide, textOverflowEllipsis, responsiveImage and tapHighlightRemove definitions are implemented as Sass placeholders and used with the @extend directive, rather than littering HTML markup with things like class="clearfix" / class="hide":

.myclasswithclearfix {
  @extend %clearFix;
  border: 1px solid #000;
  color: #f00;

.mybutton {
  @extend %tapHighlightRemove;
  color: #f00;
  display: inline-block;
  font-weight: bold;
  height: 20px;


Mixins for CSS3 animation, @keyframes and transition defintions.

Includes -webkit- vendor prefix (Firefox went prefix free since version 16).


A series of @functions for fetching what I consider collection values, defined within Sass map data types.

Currently for colors, font sizes, spacing (margin/padding/etc.) and z-indexes:

@import 'collection';

$colorMap: (
  blue: #1d90e0,
  grey: #898b8d,
  orange: #da4300

$fontSizeMap: (
  base: 1.2em,
  title: 1.3em

$spacingMap: (
  base: 20px,
  double: 40px

$zIndexMap: (
  base: 1,
  modal: 200,
  ceiling: 1000

.firstclass {
  color: color(blue);
  font-size: fontSize();
  margin-left: sp();
  z-index: zIndex(ceiling);

.secondclass {
  color: color(orange);
  font-size: fontSize(title);
  margin-left: sp(double);
  z-index: zIndex();

.zindexadjust {
  z-index: zIndex(modal,-5);


.firstclass {
  color: #1d90e0;
  font-size: 1.2em;
  margin-left: 20px;
  z-index: 1000;

.secondclass {
  color: #da4300;
  font-size: 1.3em;
  margin-left: 40px;
  z-index: 1;

.zindexadjust {
  z-index: 195;


  • Omitting map key argument from fontSize(), sp() and zIndex() will return the first value in each Sass map.
  • Function sp($key[,$multiplier]) optional $multiplier float parameter allows for adjustment of the requested spacing map value.
  • Function zIndex($key[,$shift]) optional $shift integer parameter allows increment/decrement to returned z-index map value.
  • Invalid map keys given to any function will throw a fatal Sass error.


Cross browser compatible @font-face embedding of webfont files:

  • eot (Internet Explorer)
  • svg (iOS legacy)
  • ttf (Safari, Android, iOS) and;
  • woff (Standards)

Implemented @font-face definition credit to Chris Coyier.

The fontFace() function accepts optional font-style and font-weight arguments - both which default to normal:

@import 'fontface';
@include fontFace('MyFont','font/myfont');


@font-face {
  font-family: "MyFont";
  src: url("font/myfont.eot");
  src: url("font/myfont.eot?#iefix") format("embedded-opentype"),
    url("font/myfont.woff") format("woff"),
    url("font/myfont.ttf") format("truetype"),
    url("font/myfont.svg#MyFont") format("svg");
  font-style: normal;
  font-weight: normal;


Media query mixins to assist with responsive width page layouts.

Breakpoints are defined in a $respondWidthMap map variable. As an example, how I typically implement using common device breakpoints:

@import 'respondwidth';

// respond breakpoint
// 997px - Infin (960px suggested frame/row width)
// 769px - 996px (732px suggested frame/row width)
// 481px - 768px (444px suggested frame/row width)
// 0px   - 480px (300px suggested frame/row width)
$respondWidthMap: (
  centi: 996px,
  micro: 768px,
  nano: 480px

.pageframe {
  margin: 0 auto;
  width: respondWidthGet(centi,-36px);

  @include respondWidthFrom(centi) {
    padding: 0 50px;

  @include respondWidthFromUpTo(micro,centi) {
    width: respondWidthGet(micro,-36px);

  @include respondWidthFromUpTo(nano,micro) {
    width: respondWidthGet(nano,-36px);

  @include respondWidthUpTo(nano) {
    width: 300px;


.pageframe {
  margin: 0 auto;
  width: 960px;

@media screen and (min-width: 997px) {
  .pageframe {
    padding: 0 50px;

@media screen and (min-width: 769px) and (max-width: 996px) {
  .pageframe {
    width: 732px;

@media screen and (min-width: 481px) and (max-width: 768px) {
  .pageframe {
    width: 444px;

@media screen and (max-width: 480px) {
  .pageframe {
    width: 300px;


  • The generated @media query min-width is deliberately returned 1px greater than the $respondWidthMap map value defined to provide isolation between each breakpoint range.
  • Invalid breakpoint map keys given to any of these functions; or a from breakpoint greater than upTo given to respondWidthFromUpTo() will throw a fatal Sass error.
  • Function respondWidthGet($key[,$shift]) returns the defined width for a given $key, useful for dependent calculations. An optional $shift integer parameter allows for increment/decrement to map value.


Allows for creation of styles (typically images) which are targeted to "retina" high pixel density displays.

Implemented @media query credit to Chris Coyier.

An example using retinaImage():

@import 'retina';
$logoWidth: 200px;

.companylogo {
  background: url(companylogo.png) no-repeat 0 0;
  height: 200px;
  width: $logoWidth;

  @include retinaImage('companylogo2x.png',$logoWidth);


.companylogo {
  background: url(companylogo.png) no-repeat 0 0;
  height: 200px;
  width: 200px;

@media only screen and (-webkit-min-device-pixel-ratio: 1.3),
  only screen and (-o-min-device-pixel-ratio: 13/10),
  only screen and (min-resolution: 120dpi) {
  .companylogo {
    background-image: url(companylogo2x.png);
    background-size: 200px;


  • Width argument passed to retinaImage() is optional, defaulting to 100% (background-size: 100%) if not defined.
  • A 100% width is usually suitable if the image is to span the full background width of the element, allowing the browser to determine a scaled height keeping the aspect ratio.
  • Providing a specific width is (typically) only needed for CSS spriting tasks.

Also included is retinaOnly() for arbitrary CSS style blocks:

@import 'retina';

.shinybutton {
  font-weight: bold;
  height: 200px;
  width: 100px;

  @include retinaOnly() {
    // reward for retina is a red border
    border: 1px solid #f00;


Mixins for several CSS properties that (still) require vendor prefixes:

  • backface-visibility($value), providing -webkit- vendor prefix.
  • linear-gradient($angle,$stops), providing -webkit- vendor prefix with alternative (reversed) $angle syntax for to top, to right, etc.
  • transform($value), providing -webkit- and -ms- (required with IE9) prefixes for transform().