Skip to content

Instantly share code, notes, and snippets.

@dcouto

dcouto/SassMeister-input-HTML.html

Created May 15, 2015 13:19
Show Gist options
  • Save dcouto/edc079cff156fd3dfc3e to your computer and use it in GitHub Desktop.
Save dcouto/edc079cff156fd3dfc3e to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<h1>Susy Grid System Example</h1>
<div class="twelve-columns">
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
</div>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.4)
// ----
@import "susy";
$susy: (
columns: 12,
gutters: .25,
gutter-position: inside,
);
.twelve-columns {
* {
@include span(1 of 12);
}
}
Raw
SassMeister-output.css
.twelve-columns * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
width: 8.33333%;
float: left;
padding-left: 0.83333%;
padding-right: 0.83333%;
}
Raw
SassMeister-rendered.html
<h1>Susy Grid System Example</h1>
<div class="twelve-columns">
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
<div>a few words</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment