Skip to content

Instantly share code, notes, and snippets.

@ianhobbs

ianhobbs/SassMeister-input-HTML.html

Created March 14, 2014 00:58
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ianhobbs/9540288 to your computer and use it in GitHub Desktop.
Save ianhobbs/9540288 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<body>
<div class="page">
<header>header</header>
<nav>navigation</nav>
<article>article</article>
</div>
<footer>footer</footer>
</body>
Raw
SassMeister-input.sass
// ----
// Sass (v3.3.2)
// Compass (v1.0.0.alpha.18)
// Susy (v2.1.1)
// ----
@import susy
$total-columns: 12
$neutBlack: #4c4c4c
$pink: rgb(230,0,120)
$show-column-grid-backgrounds : true
.page
@include container ($total-columns)
@include border-box-sizing
background-color: white
header
@include span(25em 2em)
background-color: $pink
Raw
SassMeister-output.css
.page {
max-width: 100%;
margin-left: auto;
margin-right: auto;
background-color: white;
}
.page::after {
content: " ";
display: block;
clear: both;
}
.page *, .page *::before, .page *::after {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.page header {
float: left;
margin-right: 5.26316%;
background-color: #e60078;
}
Raw
SassMeister-rendered.html
<body>
<div class="page">
<header>header</header>
<nav>navigation</nav>
<article>article</article>
</div>
<footer>footer</footer>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment