We are starting by making a partial Sass file, let's call it _variables.scss and start by writing simple variables that will define the number of columns and their max-width, as well as the breakpoints:
$grid-columns: 12; $grid-max-width: 65em; $breakpoint-small: "only screen and (min-width: 20em)"; $breakpoint-medium: "only screen and (min-width: 30em)";
Time to write some mixins, for example for a border-box property which we assume still isn't unified by the various vendors.
And for the sake of this tutorial, we are going to save the mixins in a different file, called _mixins.scss.
@mixin border-box {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}Time to really write up the Sass for the Grid, so we create a grid.scss.
Our document structure will look like this:
We now import our variables and mixins in the document through the following simple code:
@import "variables"; @import "mixins";
We start writing...