Skip to content

Instantly share code, notes, and snippets.

@DannyJoris

DannyJoris/SassMeister-input-HTML.html

Created March 5, 2015 21:56
Show Gist options
  • Save DannyJoris/de7aed1e49a3cb516e78 to your computer and use it in GitHub Desktop.
Save DannyJoris/de7aed1e49a3cb516e78 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<article class="block"></article>
<article class="block"></article>
<article class="block"></article>
<article class="block hotpink"></article>
<article class="block hotpink"></article>
<article class="block"></article>
<article class="block"></article>
<article class="block"></article>
Raw
SassMeister-input.scss
// ----
// Sass (v3.2.19)
// Compass (v0.12.7)
// Breakpoint (v2.0.7)
// Zen Grids (v1.4)
// ----
@import "breakpoint";
@import "zen";
$luigi: 600px 4;
$yoshi: 960px 12;
$zen-column-count: 12;
@mixin at-breakpoint($breakpoint) {
@include breakpoint(nth($breakpoint, 1)) {
$zen-column-count: nth($breakpoint, 2);
@content;
}
}
article {
height: 75px;
box-sizing: border-box;
border: 5px solid white;
}
.block {
width: 100%;
background: pink;
&:nth-child(8n + 1) {
background: purple;
@include at-breakpoint($luigi) {
@include zen-grid-item(2, 1, left);
@include zen-clear(left);
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(4, 1, left);
@include zen-clear(left);
}
}
&:nth-child(8n + 2) {
@include at-breakpoint($luigi) {
@include zen-grid-item(2, 3, left);
@include zen-clear(none);
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(4, 5, left);
@include zen-clear(none);
}
}
&:nth-child(8n + 3) {
@include at-breakpoint($luigi) {
@include zen-grid-item(2, 1, left);
@include zen-clear(left);
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(4, 9, left);
@include zen-clear(none);
}
}
&:nth-child(8n + 4) {
@include at-breakpoint($luigi) {
@include zen-grid-item(2, 3, left);
@include zen-clear(none);
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(6, 1, left);
@include zen-clear(left);
}
}
&:nth-child(8n + 5) {
@include at-breakpoint($luigi) {
@include zen-grid-item(2, 1, left);
@include zen-clear(left);
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(6, 7, left);
@include zen-clear(none);
}
}
&:nth-child(8n + 6) {
@include at-breakpoint($luigi) {
@include zen-grid-item(2, 3, left);
@include zen-clear(none);
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(4, 1, left);
@include zen-clear(left);
}
}
&:nth-child(8n + 7) {
@include at-breakpoint($luigi) {
@include zen-grid-item(2, 1, left);
@include zen-clear(left);
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(4, 5, left);
@include zen-clear(none);
}
}
&:nth-child(8n) {
background: violet;
@include at-breakpoint($luigi) {
@include zen-grid-item(2, 3, left);
@include zen-clear(none);
}
@include at-breakpoint($yoshi) {
@include zen-grid-item(4, 9, left);
@include zen-clear(none);
}
}
}
.hotpink {
background: hotpink;
}
Raw
SassMeister-output.css
article {
height: 75px;
box-sizing: border-box;
border: 5px solid white;
}
.block {
width: 100%;
background: pink;
}
.block:nth-child(8n + 1) {
background: purple;
}
@media (min-width: 600px) {
.block:nth-child(8n + 1) {
float: left;
width: 50%;
margin-left: 0%;
margin-right: -50%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: left;
}
}
@media (min-width: 960px) {
.block:nth-child(8n + 1) {
float: left;
width: 33.33333%;
margin-left: 0%;
margin-right: -33.33333%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: left;
}
}
@media (min-width: 600px) {
.block:nth-child(8n + 2) {
float: left;
width: 50%;
margin-left: 50%;
margin-right: -100%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block:nth-child(8n + 2) {
float: left;
width: 33.33333%;
margin-left: 33.33333%;
margin-right: -66.66667%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 600px) {
.block:nth-child(8n + 3) {
float: left;
width: 50%;
margin-left: 0%;
margin-right: -50%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: left;
}
}
@media (min-width: 960px) {
.block:nth-child(8n + 3) {
float: left;
width: 33.33333%;
margin-left: 66.66667%;
margin-right: -100%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 600px) {
.block:nth-child(8n + 4) {
float: left;
width: 50%;
margin-left: 50%;
margin-right: -100%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block:nth-child(8n + 4) {
float: left;
width: 50%;
margin-left: 0%;
margin-right: -50%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: left;
}
}
@media (min-width: 600px) {
.block:nth-child(8n + 5) {
float: left;
width: 50%;
margin-left: 0%;
margin-right: -50%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: left;
}
}
@media (min-width: 960px) {
.block:nth-child(8n + 5) {
float: left;
width: 50%;
margin-left: 50%;
margin-right: -100%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 600px) {
.block:nth-child(8n + 6) {
float: left;
width: 50%;
margin-left: 50%;
margin-right: -100%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block:nth-child(8n + 6) {
float: left;
width: 33.33333%;
margin-left: 0%;
margin-right: -33.33333%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: left;
}
}
@media (min-width: 600px) {
.block:nth-child(8n + 7) {
float: left;
width: 50%;
margin-left: 0%;
margin-right: -50%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: left;
}
}
@media (min-width: 960px) {
.block:nth-child(8n + 7) {
float: left;
width: 33.33333%;
margin-left: 33.33333%;
margin-right: -66.66667%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
.block:nth-child(8n) {
background: violet;
}
@media (min-width: 600px) {
.block:nth-child(8n) {
float: left;
width: 50%;
margin-left: 50%;
margin-right: -100%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
@media (min-width: 960px) {
.block:nth-child(8n) {
float: left;
width: 33.33333%;
margin-left: 66.66667%;
margin-right: -100%;
padding-left: 10px;
padding-right: 10px;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
word-wrap: break-word;
clear: none;
}
}
.hotpink {
background: hotpink;
}
Raw
SassMeister-rendered.html
<article class="block"></article>
<article class="block"></article>
<article class="block"></article>
<article class="block hotpink"></article>
<article class="block hotpink"></article>
<article class="block"></article>
<article class="block"></article>
<article class="block"></article>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment