Generated by SassMeister.com.
<div class="row">
<div class="c-6">
<h1>hello world</h1>
<div class="row">
<div class="c-4">
<h1>inside</h1>
</div>
<div class="c-6 c-last">
<h1>right</h1>
</div>
</div>
</div>
<div class="c-6 c-last">
<h1>second hello</h1>
</div>
</div>
.row {
*zoom: 1;
}
.row:before, .row:after {
display: table;
content: '';
line-height: 0;
}
.row:after {
clear: both;
}
.c-1 {
width: 6.77966%;
float: left;
margin-right: 1.69492%;
}
.c-2 {
width: 15.25424%;
float: left;
margin-right: 1.69492%;
}
.c-3 {
width: 23.72881%;
float: left;
margin-right: 1.69492%;
}
.c-4 {
width: 32.20339%;
float: left;
margin-right: 1.69492%;
}
.c-5 {
width: 40.67797%;
float: left;
margin-right: 1.69492%;
}
.c-6 {
width: 49.15254%;
float: left;
margin-right: 1.69492%;
}
.c-7 {
width: 57.62712%;
float: left;
margin-right: 1.69492%;
}
.c-8 {
width: 66.10169%;
float: left;
margin-right: 1.69492%;
}
.c-9 {
width: 74.57627%;
float: left;
margin-right: 1.69492%;
}
.c-10 {
width: 83.05085%;
float: left;
margin-right: 1.69492%;
}
.c-11 {
width: 91.52542%;
float: left;
margin-right: 1.69492%;
}
.c-12 {
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
}
.c-last {
float: right;
margin-right: 0;
}
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Juice (v1.0.0)
// Susy (v2.2.2)
// ----
@import "juice";
@import "susy";
$col-nums: 12;
$susy: (
columns: $col-nums,
gutters: 1/4,
container: 90%
);
.row {
@include clearfix();
}
@for $i from 1 through $col-nums {
.c-#{$i} {
@include span($i);
}
}
.c-last {
float: right;
margin-right: 0;
}
.row
.c-6
h1 hello world
.row
.c-4
h1 inside
.c-6.c-last
h1 right
.c-6.c-last
h1 second hello