Guide

Sass basics

You don't need to have a full knowledges of SASS in order to use Rocket, but still there are some basics you should know beforehand.

Data type

The most offten used data types in Rocket are list and map. list can be space-separated or comma-separated and can be nested. map must be surrounded by parentheses and must be comma-separated.

scss 
// list
$margin: (20px, 40px);
$z-index: (1 2 3 4 5 6 7 8 9 10);
$a-nested-list: (1 2 3 4 5, 6 7 8);

// map
$breakpoints: (
  small: 640px,
  midum: 768px,
  large: 1024px
);

Parameter

Rocket mixins and functions use a list as paremeter. And you don't need to remember the orders of each item, the order can be any. For instance, the follow 2 lines of code will get the same results.

scss 
// case 1
.heading { @include type(24px bold italic); }

// case 2
.heading { @include type(bold italic 24px); }

You may noticed some parameters are grouped by parentheses in the syntax field on the docs page. These parentheses are not needed when you write your code. They appeared here to indicate these parameters must come together in proper order.

scss 
// syntax
@mixin container($container ('gutter' $gutter) $alignment)

// usage
.selector { @include container(1000px left gutter 20px); }
// The gutter value 20px must appear right after the string "gutter"

It's recommended not to use comma-separated lists, because if you forget to surrounded them with parentheses, they will be consider as 2 or more paremeters. If you do want to use comma-separated list, make sure they'are surrounded by parentheses.

scss 
// 1 parameter ✓
h1 { @include type(24px bold italic); }

// 1 parameter ✓
h1 { @include type( (24px, bold, italic) ); }

// 3 parameter ✗
h1 { @include type(24px, bold, italic); }

Requests

Requests for version 3:

+  Modernizr (csscolumns, csstransforms, cssanimations, flexbox, flexboxtweener, flexwrap). Update: not required from v3.4.2.

+  Selectivizr and a Javascript library (if you're not using one) for IE8.

+  Please replace <html> with the markup below for better IE support.

markup 
<!--[if (IE 8)&!(IEMobile)]><html class="no-js lt-ie10 lt-ie9" lang="en"><![endif]-->
<!--[if (IE 9)&!(IEMobile)]><html class="no-js lt-ie10" lang="en"><![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"><!--<![endif]-->

Requests for version 4:

Please replace <html> with the markup below for better IE support.

markup 
<!--[if (IE 9)&!(IEMobile)]><html class="no-js lt-ie10" lang="en"><![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en"><!--<![endif]-->