Skip to content

Instantly share code, notes, and snippets.

@lewang

lewang/SassMeister-input-HTML.html

Forked from mirisuzanne/SassMeister-input-HTML.html
Created March 31, 2014 00:59
Show Gist options
  • Save lewang/9883039 to your computer and use it in GitHub Desktop.
Save lewang/9883039 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
SassMeister-input-HTML.html
<header>header</header>
<nav>navigation</nav>
<article>article</article>
<footer>footer</footer>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// Susy (v2.1.1)
// ----
@import "susy";
// body {}
// header {}
// nav {}
// article {}
// footer {}
// visuals
// -------
$pink: rgb(255, 0, 128);
html { background: white; }
header, nav, article, footer {
padding-top: 1em;
padding-bottom: 1em;
font-family: monospace, serif;
background:
linear-gradient(rgba($pink, .125), rgba($pink, .125)),
rgba($pink, .25);
background-clip: content-box, border-box;
box-shadow: 0 0 0 1px rgba($pink, .25) inset;
}
Raw
SassMeister-output.css
html {
background: white;
}
header, nav, article, footer {
padding-top: 1em;
padding-bottom: 1em;
font-family: monospace, serif;
background: linear-gradient(rgba(255, 0, 128, 0.125), rgba(255, 0, 128, 0.125)), rgba(255, 0, 128, 0.25);
background-clip: content-box, border-box;
box-shadow: 0 0 0 1px rgba(255, 0, 128, 0.25) inset;
}
Raw
SassMeister-rendered.html
<header>header</header>
<nav>navigation</nav>
<article>article</article>
<footer>footer</footer>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment