Skip to content

Instantly share code, notes, and snippets.

@TexRx

TexRx/SassMeister-input-HTML.html

Last active August 29, 2015 14:10
Show Gist options
  • Save TexRx/504b9e8d478250e7eea7 to your computer and use it in GitHub Desktop.
Save TexRx/504b9e8d478250e7eea7 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="blue thingy">
<div class="col original">
<span class="label">Original</span>
</div>
<div class="col lighten">
<span class="label">Lighten</span>
</div>
<div class="col darken">
<span class="label">Darken</span>
</div>
<div class="col mix-white">
<span class="label">Mix White</span>
</div>
<div class="col mix-black">
<span class="label">Mix Black</span>
</div>
</div>
<div class="green thingy">
<div class="col original">
<span class="label">Original</span>
</div>
<div class="col lighten">
<span class="label">Lighten</span>
</div>
<div class="col darken">
<span class="label">Darken</span>
</div>
<div class="col mix-white">
<span class="label">Mix White</span>
</div>
<div class="col mix-black">
<span class="label">Mix Black</span>
</div>
</div>
<div class="yellow thingy">
<div class="col original">
<span class="label">Original</span>
</div>
<div class="col lighten">
<span class="label">Lighten</span>
</div>
<div class="col darken">
<span class="label">Darken</span>
</div>
<div class="col mix-white">
<span class="label">Mix White</span>
</div>
<div class="col mix-black">
<span class="label">Mix Black</span>
</div>
</div>
<div class="red thingy">
<div class="col original">
<span class="label">Original</span>
</div>
<div class="col lighten">
<span class="label">Lighten</span>
</div>
<div class="col darken">
<span class="label">Darken</span>
</div>
<div class="col mix-white">
<span class="label">Mix White</span>
</div>
<div class="col mix-black">
<span class="label">Mix Black</span>
</div>
</div>
<div class="message">
<p>Mix is better. Always</p>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
//Wigley's Gist
$blue : #2980b9;
$red : #c0392b;
$green : #27ae60;
$yellow : #f1c40f;
* {
&,
&:before, &:after {
box-sizing: border-box;
}
}
html {
font-size: 10px;
}
html,
body {
font-family: sans-serif;
height: 100%;
}
body {
font-size: 1.6rem;
line-height: 1;
}
.thingy {
float: left;
clear: left;
margin: 0 0 1rem 0;
width: 50%;
height: 50px;
}
.col {
border: 0;
float: left;
height: 100%;
padding: 1rem;
vertical-align: top;
width: 20%;
&:first-child {
border-right: 5px solid white;
}
}
.label {
display: inline-block;
font-size: 1.6rem;
line-height: 3rem;
padding: 0;
margin: 0;
text-align: center;
width: 100%;
}
.blue {
.original {
background: $blue;
}
.darken {
background-color: darken($blue, 10%);
}
.lighten {
background-color: lighten($blue, 10%);
}
.mix-black {
background-color: mix(black, $blue, 10%);
}
.mix-white {
background-color: mix(white, $blue, 10%);
}
}
.green {
.original {
background-color: $green;
}
.darken {
background-color: darken($green, 10%);
}
.lighten {
background-color: lighten($green, 10%);
}
.mix-black {
background-color: mix(black, $green, 10%);
}
.mix-white {
background-color: mix(white, $green, 10%);
}
}
.yellow {
.original {
background-color: $yellow;
}
.darken {
background-color: darken($yellow, 10%);
}
.lighten {
background-color: lighten($yellow, 10%);
}
.mix-black {
background-color: mix(black, $yellow, 10%);
}
.mix-white {
background-color: mix(white, $yellow, 10%);
}
}
.red {
.original {
background-color: $red;
}
.darken {
background-color: darken($red, 10%);
}
.lighten {
background-color: lighten($red, 10%);
}
.mix-black {
background-color: mix(black, $red, 10%);
}
.mix-white {
background-color: mix(white, $red, 10%);
}
}
.message {
position: absolute;
left: 50%;
line-height: 2;
right: 0;
font-family: sans-serif;
font-size: 4rem;
height: 100%;
margin-right: -25%;
padding: 3rem;
transform: translateY(-50%);
padding-top: 25%;
width: 100%;
p {
margin: 0;
}
}
Raw
SassMeister-output.css
*, *:before, *:after {
box-sizing: border-box;
}
html {
font-size: 10px;
}
html,
body {
font-family: sans-serif;
height: 100%;
}
body {
font-size: 1.6rem;
line-height: 1;
}
.thingy {
float: left;
clear: left;
margin: 0 0 1rem 0;
width: 50%;
height: 50px;
}
.col {
border: 0;
float: left;
height: 100%;
padding: 1rem;
vertical-align: top;
width: 20%;
}
.col:first-child {
border-right: 5px solid white;
}
.label {
display: inline-block;
font-size: 1.6rem;
line-height: 3rem;
padding: 0;
margin: 0;
text-align: center;
width: 100%;
}
.blue .original {
background: #2980b9;
}
.blue .darken {
background-color: #20638f;
}
.blue .lighten {
background-color: #409ad5;
}
.blue .mix-black {
background-color: #2473a6;
}
.blue .mix-white {
background-color: #3e8cc0;
}
.green .original {
background-color: #27ae60;
}
.green .darken {
background-color: #1e8449;
}
.green .lighten {
background-color: #36d278;
}
.green .mix-black {
background-color: #239c56;
}
.green .mix-white {
background-color: #3cb66f;
}
.yellow .original {
background-color: #f1c40f;
}
.yellow .darken {
background-color: #c29d0b;
}
.yellow .lighten {
background-color: #f4d03f;
}
.yellow .mix-black {
background-color: #d8b00d;
}
.yellow .mix-white {
background-color: #f2c926;
}
.red .original {
background-color: #c0392b;
}
.red .darken {
background-color: #962d22;
}
.red .lighten {
background-color: #d65548;
}
.red .mix-black {
background-color: #ac3326;
}
.red .mix-white {
background-color: #c64c40;
}
.message {
position: absolute;
left: 50%;
line-height: 2;
right: 0;
font-family: sans-serif;
font-size: 4rem;
height: 100%;
margin-right: -25%;
padding: 3rem;
transform: translateY(-50%);
padding-top: 25%;
width: 100%;
}
.message p {
margin: 0;
}
Raw
SassMeister-rendered.html
<div class="blue thingy">
<div class="col original">
<span class="label">Original</span>
</div>
<div class="col lighten">
<span class="label">Lighten</span>
</div>
<div class="col darken">
<span class="label">Darken</span>
</div>
<div class="col mix-white">
<span class="label">Mix White</span>
</div>
<div class="col mix-black">
<span class="label">Mix Black</span>
</div>
</div>
<div class="green thingy">
<div class="col original">
<span class="label">Original</span>
</div>
<div class="col lighten">
<span class="label">Lighten</span>
</div>
<div class="col darken">
<span class="label">Darken</span>
</div>
<div class="col mix-white">
<span class="label">Mix White</span>
</div>
<div class="col mix-black">
<span class="label">Mix Black</span>
</div>
</div>
<div class="yellow thingy">
<div class="col original">
<span class="label">Original</span>
</div>
<div class="col lighten">
<span class="label">Lighten</span>
</div>
<div class="col darken">
<span class="label">Darken</span>
</div>
<div class="col mix-white">
<span class="label">Mix White</span>
</div>
<div class="col mix-black">
<span class="label">Mix Black</span>
</div>
</div>
<div class="red thingy">
<div class="col original">
<span class="label">Original</span>
</div>
<div class="col lighten">
<span class="label">Lighten</span>
</div>
<div class="col darken">
<span class="label">Darken</span>
</div>
<div class="col mix-white">
<span class="label">Mix White</span>
</div>
<div class="col mix-black">
<span class="label">Mix Black</span>
</div>
</div>
<div class="message">
<p>Mix is better. Always</p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment