Skip to content

Instantly share code, notes, and snippets.

@scottdavis
Created October 28, 2014 05:52
Show Gist options
  • Save scottdavis/c7d6bf6c1e4c103d2d80 to your computer and use it in GitHub Desktop.
Save scottdavis/c7d6bf6c1e4c103d2d80 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<div class='container'>
<div ='top'>
<div class='ed'>
foo
</div>
<div class='ed'>
foo
</div>
</div>
<div class='render'>
bar
</div>
</div>
// ----
// Sass (v3.3.14)
// Compass (v1.0.1)
// Susy (v2.1.3)
// ----
@import "compass/reset";
@import "susy";
.container {
@include container(80em);
background-color : green;
}
.ed {
@include gallery(4 of 12);
background-color: red;
&:nth-child(1):nth-last-child(2),
&:nth-child(2):nth-last-child(1) {
@include gallery(6 of 12);
}
}
.render {
@include full;
background-color: yellow;
}
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
.container {
max-width: 80em;
margin-left: auto;
margin-right: auto;
background-color: green;
}
.container:after {
content: " ";
display: block;
clear: both;
}
.ed {
width: 32.20339%;
float: left;
background-color: red;
}
.ed:nth-child(3n + 1) {
margin-left: 0;
margin-right: -100%;
clear: both;
margin-left: 0;
}
.ed:nth-child(3n + 2) {
margin-left: 33.89831%;
margin-right: -100%;
clear: none;
}
.ed:nth-child(3n + 3) {
margin-left: 67.79661%;
margin-right: -100%;
clear: none;
}
.ed:nth-child(1):nth-last-child(2), .ed:nth-child(2):nth-last-child(1) {
width: 49.15254%;
float: left;
}
.ed:nth-child(1):nth-last-child(2):nth-child(2n + 1), .ed:nth-child(2):nth-last-child(1):nth-child(2n + 1) {
margin-left: 0;
margin-right: -100%;
clear: both;
margin-left: 0;
}
.ed:nth-child(1):nth-last-child(2):nth-child(2n + 2), .ed:nth-child(2):nth-last-child(1):nth-child(2n + 2) {
margin-left: 50.84746%;
margin-right: -100%;
clear: none;
}
.render {
clear: both;
width: 100%;
float: left;
margin-left: 0;
margin-right: 0;
background-color: yellow;
}
<div class='container'>
<div ='top'>
<div class='ed'>
foo
</div>
<div class='ed'>
foo
</div>
</div>
<div class='render'>
bar
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment