Skip to content

Instantly share code, notes, and snippets.

@Snugug

Snugug/SassMeister-input-HTML.html

Created October 10, 2015 17:44
Show Gist options
  • Save Snugug/4738ffa79a9198ec5798 to your computer and use it in GitHub Desktop.
Save Snugug/4738ffa79a9198ec5798 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="grid-4">
<h3>Item 1</h3>
</div>
<div class="grid-4">
<h3>Item 2</h3>
</div>
<div class="grid-4">
<h3>Item 3</h3>
</div>
<div class="grid-4">
<h3>Item 4</h3>
</div>
<div class="grid-4">
<h3>Item 5</h3>
</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
@import "singularitygs";
.grid-4 {
@include float-span(4);
&:nth-of-type(3n) {
@include float-span(4, 'last');
}
}
//////////////////////////////
// To provide a little visual styling
//////////////////////////////
div {
background: yellow;
border: 1px solid black;
box-sizing: border-box;
}
Raw
SassMeister-output.css
.grid-4{width:32.20339%;clear:right;float:left;margin-left:0;margin-right:1.69492%}.grid-4:nth-of-type(3n){width:32.20339%;clear:right;float:right;margin-right:0}div{background:yellow;border:1px solid black;box-sizing:border-box}
Raw
SassMeister-rendered.html
<div class="grid-4">
<h3>Item 1</h3>
</div>
<div class="grid-4">
<h3>Item 2</h3>
</div>
<div class="grid-4">
<h3>Item 3</h3>
</div>
<div class="grid-4">
<h3>Item 4</h3>
</div>
<div class="grid-4">
<h3>Item 5</h3>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment