Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="container">
<main>main (8 at 1)</main>
<aside>aside (4 at 9)</aside>
<div class="box">box (last 3)</div>
</div>
// ----
// libsass (v3.2.5)
// ----
@import 'susy';
main {
@include span (8 of 17);
}
aside {
@include span (4 of 17);
}
.box {
@include span (last 3 of 17);
}
// just to show what's going on
.container { @include container(62em 17 show); }
main, aside, .box {
background: rgba(yellow, .25);
outline: 1px solid red;
}
main {
width: 46.42857%;
float: left;
margin-right: 1.19048%;
}
aside {
width: 22.61905%;
float: left;
margin-right: 1.19048%;
}
.box {
width: 16.66667%;
float: right;
margin-right: 0;
}
.container {
max-width: 62em;
margin-left: auto;
margin-right: auto;
background-image: linear-gradient(to right, rgba(102, 102, 255, 0.25), rgba(179, 179, 255, 0.25) 80%, transparent 80%);
background-size: 5.95238%;
background-origin: content-box;
background-clip: content-box;
background-position: left top;
}
.container:after {
content: " ";
display: block;
clear: both;
}
main, aside, .box {
background: rgba(255, 255, 0, 0.25);
outline: 1px solid red;
}
<div class="container">
<main>main (8 at 1)</main>
<aside>aside (4 at 9)</aside>
<div class="box">box (last 3)</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.