Skip to content

Instantly share code, notes, and snippets.

@waxandwane

waxandwane/SassMeister-input-HTML.html

Created April 10, 2014 14:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save waxandwane/10385721 to your computer and use it in GitHub Desktop.
Save waxandwane/10385721 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<body>
<section id="first">
<div class="container">
<div id="title" class="box"></div>
<div id="what" class="box"></div>
<div id="who" class="box"></div>
<div id="when" class="box"></div>
</div>
</section>
<section id="second">
</section>
</body>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.4)
// Compass (v)
// Bourbon (v)
// Neat (v)
// ----
@import "compass/reset";
@import "bourbon/bourbon";
@import "neat/neat";
// colors (flat)
$turquoise: #1abc9c;
$greensea: #16a085;
$sunflower: #f1c40f;
$orange: #f39c12;
$emerald: #2ecc71;
$nephritis: #27ae60;
$carrot: #e67e22;
$pumpkin: #d35400;
$river: #3498db;
$belize: #2980b9;
$alizarin: #e74c3c;
$pomegranate: #c0392b;
$amethyst: #9b59b6;
$wisteria: #8e44ad;
$clouds: #ecf0f1;
$silver: #bdc3c7;
$asphalt: #34495e;
$midnight: #2c3e50;
$concrete: #95a5a6;
$asbestos: #7f8c8d;
//
body {
background-color: $asphalt;
section {
@include fill-parent;
min-height: 600px;
height: 100vh;
&#first {
.container {
margin-top: 33vh;
@include outer-container;
div {
height: 6em;
margin-bottom: 2em;
background-color: $emerald;
transition: all 0.2s ease-in;
border-bottom: 6px solid darken($emerald, 10%);
&:hover {
background-color: $alizarin;
border-bottom: 6px solid darken($alizarin, 10%);
}
&#title {
@include span-columns(4);
@include shift(2);
}
&#what {
@include span-columns(6);
@include omega;
}
&#who {
@include span-columns(6);
}
&#when {
@include span-columns(4);
}
}
}
}
}
section#second {
background-color: $clouds;
}
}
Raw
SassMeister-output.css
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
font-size: 100%;
vertical-align: baseline;
}
html {
line-height: 1;
}
ol, ul {
list-style: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
font-weight: normal;
vertical-align: middle;
}
q, blockquote {
quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
content: "";
content: none;
}
a img {
border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
display: block;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background-color: #34495e;
}
body section {
width: 100%;
min-height: 600px;
height: 100vh;
}
body section#first .container {
margin-top: 33vh;
max-width: 68em;
margin-left: auto;
margin-right: auto;
}
body section#first .container:after {
content: "";
display: table;
clear: both;
}
body section#first .container div {
height: 6em;
margin-bottom: 2em;
background-color: #2ecc71;
transition: all 0.2s ease-in;
border-bottom: 6px solid #25a25a;
}
body section#first .container div:hover {
background-color: #e74c3c;
border-bottom: 6px solid #d62c1a;
}
body section#first .container div#title {
float: left;
display: block;
margin-right: 2.35765%;
width: 31.76157%;
margin-left: 17.05961%;
}
body section#first .container div#title:last-child {
margin-right: 0;
}
body section#first .container div#what {
float: left;
display: block;
margin-right: 2.35765%;
width: 48.82117%;
margin-right: 0;
}
body section#first .container div#what:last-child {
margin-right: 0;
}
body section#first .container div#who {
float: left;
display: block;
margin-right: 2.35765%;
width: 48.82117%;
}
body section#first .container div#who:last-child {
margin-right: 0;
}
body section#first .container div#when {
float: left;
display: block;
margin-right: 2.35765%;
width: 31.76157%;
}
body section#first .container div#when:last-child {
margin-right: 0;
}
body section#second {
background-color: #ecf0f1;
}
Raw
SassMeister-rendered.html
<body>
<section id="first">
<div class="container">
<div id="title" class="box"></div>
<div id="what" class="box"></div>
<div id="who" class="box"></div>
<div id="when" class="box"></div>
</div>
</section>
<section id="second">
</section>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment