Skip to content

Instantly share code, notes, and snippets.

@alexadark

alexadark/SassMeister-input-HTML.html

Created January 16, 2015 21:04
Show Gist options
  • Save alexadark/7c98f1f8546b465d13b0 to your computer and use it in GitHub Desktop.
Save alexadark/7c98f1f8546b465d13b0 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="container">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">
<div class="nested-container">
<div class="nested-item">nested item</div>
</div>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.9)
// Compass (v1.0.1)
// Bourbon (v4.0.2)
// Neat (v1.6.0)
// ----
@import "bourbon/bourbon";
@import "neat/neat";
$mobile: new-breakpoint(min-width 600px 12);
.container {
@include outer-container;
background-color: blue;
.item {
@include media(min-width 960px, 12) {
@include span-columns(4);
@include omega(3n);
}
@include media(min-width 768px, 8) {
@include span-columns(4 );
@include omega(2n);
}
margin-bottom: 20px;
background-color: red;
}
}
Raw
SassMeister-output.css
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.container {
max-width: 68em;
margin-left: auto;
margin-right: auto;
background-color: blue;
}
.container:after {
content: "";
display: table;
clear: both;
}
.container .item {
margin-bottom: 20px;
background-color: red;
}
@media screen and (min-width: 960px) {
.container .item {
float: left;
display: block;
margin-right: 2.35765%;
width: 31.76157%;
}
.container .item:last-child {
margin-right: 0;
}
.container .item:nth-child(3n) {
margin-right: 0;
}
.container .item:nth-child(3n+1) {
clear: left;
}
}
@media screen and (min-width: 768px) {
.container .item {
float: left;
display: block;
margin-right: 3.57866%;
width: 48.21067%;
}
.container .item:last-child {
margin-right: 0;
}
.container .item:nth-child(2n) {
margin-right: 0;
}
.container .item:nth-child(2n+1) {
clear: left;
}
}
Raw
SassMeister-rendered.html
<div class="container">
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">item</div>
<div class="item">
<div class="nested-container">
<div class="nested-item">nested item</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment