Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="window">
<section></section>
<aside></aside>
</div>
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
//
// SET UP GRID FUNCTIONS
//
$site-width: 100%;
// total width of page
$width : $site-width;
// number of columns
$columns: 12;
// margin between columns
$col_margin: 1%;
//mixin to provide a clear to modern browsers IE8 and up
@mixin clear {
&::after {
clear: both;
content: "";
display: table;
}
}
// maths
$col_width: ($width - ($col_margin * ($columns - 1))) / $columns;
$col_total_width: $col_width + $col_margin;
// create containing row
@mixin row() {
@include clear;
width: $width;
}
// create a column
@mixin col($n: 1) {
float: left;
@include span($n);
}
// make an element span N columns
@mixin span($n: 1) {
width: ($n * $col_width) + (($n - 1) * $col_margin);
@if $n == $columns {
margin-right: 0;
}
@else {
margin-right: $col_margin;
}
}
// the last column in a row needs this
@mixin last() {
margin-right: 0;
}
// if you need to overwrite a previous `last()`, use this
@mixin resetLast() {
margin-right: $col_margin;
}
// prepend n blank columns
@mixin prepend($n: 1) {
margin-left: $col_total_width * $n
}
// append n blank columns
@mixin append($n: 1) {
margin-right: $col_total_width * $n + $col_margin
}
//
// END GRID SET UP - BEGIN REAL STYLES
//
html,
body {
padding: 0;
margin: 0;
}
.window {
@include row;
}
section {
@include col(12);
background-color: lightblue;
height: 200px;
@media (min-width: 60em) {
@include col(8);
}
}
aside {
@include col(12);
background-color: pink;
height: 200px;
@media (min-width: 60em) {
@include col(4);
@include last();
}
}
html,
body {
padding: 0;
margin: 0;
}
.window {
width: 100%;
}
.window::after {
clear: both;
content: "";
display: table;
}
section {
float: left;
width: 100%;
margin-right: 0;
background-color: lightblue;
height: 200px;
}
@media (min-width: 60em) {
section {
float: left;
width: 66.33333%;
margin-right: 1%;
}
}
aside {
float: left;
width: 100%;
margin-right: 0;
background-color: pink;
height: 200px;
}
@media (min-width: 60em) {
aside {
float: left;
width: 32.66667%;
margin-right: 1%;
margin-right: 0;
}
}
<div class="window">
<section></section>
<aside></aside>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment