Skip to content

Instantly share code, notes, and snippets.

@cmnstmntmn

cmnstmntmn/SassMeister-input-HTML.html

Created March 18, 2015 10:47
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 cmnstmntmn/1cddb48f99a828ed5568 to your computer and use it in GitHub Desktop.
Save cmnstmntmn/1cddb48f99a828ed5568 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<ol class="paleta">
<li class="verde-cafeniu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="anghinare">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="galben-cafeniu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="verde-auriu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="galben-pai">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="verde-crud">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="roz-levantica">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="rose">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="roz-somon">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="roz-capsuni">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="orange-cupru">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="portocaliu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="rosu-purpuriu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="rosu-rubiniu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="rosu-carmin">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="rosu-maroniu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="rosu-mahon">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="rosu-cafeniu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
</ol>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$color-palette: (
verde-cafeniu: (background: #a38945, heading: #907735, body: #ffffff, fade: #d2be8a),
anghinare: (background: #aab05c, heading: #989e4c, body: #ffffff, fade: #e2e5b7),
galben-cafeniu: (background: #d6d65d, heading: #bfbf43, body: #868626, fade: #a3a338),
verde-auriu: (background: #d0d08d, heading: #bfbf70, body: #878727, fade: #a1a157),
galben-pai: (background: #f8f6c3, heading: #e6e38e, body: #7a7845, fade: #acaa75),
verde-crud: (background: #dffeae, heading: #b7e56e, body: #6c9d1f, fade: #92c443),
roz-levantica: (background: #e760a7, heading: #d14790, body: #ffffff, fade: #f9aad4),
rose: (background: #eb507b, heading: #d93663, body: #ffffff, fade: #fa9bb5),
roz-somon: (background: #f45154, heading: #e53639, body: #ffffff, fade: #fca5a7),
roz-capsuni: (background: #f7332f, heading: #e21f1b, body: #ffffff, fade: #faa5a4),
orange-cupru: (background: #e46b33, heading: #d05b26, body: #ffffff, fade: #f9a47d),
portocaliu: (background: #ea8030, heading: #d66f21, body: #ffffff, fade: #fdba87),
rosu-purpuriu: (background: #ae2159, heading: #931346, body: #ffffff, fade: #e17aa3),
rosu-rubiniu: (background: #be0009, heading: #9a0108, body: #ffffff, fade: #f45b62),
rosu-carmin: (background: #990012, heading: #7b000e, body: #ffffff, fade: #db5e6d),
rosu-maroniu: (background: #740001, heading: #4f0001, body: #ffffff, fade: #c16d6e),
rosu-mahon: (background: #4b0001, heading: #700002, body: #ffffff, fade: #9d5556),
rosu-cafeniu: (background: #220200, heading: #520803, body: #ffffff, fade: #7e4440)
);
@each $color, $object in $color-palette {
// Variables
$color-background : map-get($object, background);
$color-heading : map-get($object, heading);
$color-body : map-get($object, body);
$color-fade : map-get($object, fade);
.paleta {
list-style:none;
}
.#{$color} {
// Main menu
background-color: $color-background;
padding:20px;
font-size:1em;
font-family:arial;
h1 {color: $color-heading;}
p {color:$color-body};
span {color:$color-fade};
}
}
Raw
SassMeister-output.css
.paleta {
list-style: none;
}
.verde-cafeniu {
background-color: #a38945;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.verde-cafeniu h1 {
color: #907735;
}
.verde-cafeniu p {
color: #ffffff;
}
.verde-cafeniu span {
color: #d2be8a;
}
.paleta {
list-style: none;
}
.anghinare {
background-color: #aab05c;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.anghinare h1 {
color: #989e4c;
}
.anghinare p {
color: #ffffff;
}
.anghinare span {
color: #e2e5b7;
}
.paleta {
list-style: none;
}
.galben-cafeniu {
background-color: #d6d65d;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.galben-cafeniu h1 {
color: #bfbf43;
}
.galben-cafeniu p {
color: #868626;
}
.galben-cafeniu span {
color: #a3a338;
}
.paleta {
list-style: none;
}
.verde-auriu {
background-color: #d0d08d;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.verde-auriu h1 {
color: #bfbf70;
}
.verde-auriu p {
color: #878727;
}
.verde-auriu span {
color: #a1a157;
}
.paleta {
list-style: none;
}
.galben-pai {
background-color: #f8f6c3;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.galben-pai h1 {
color: #e6e38e;
}
.galben-pai p {
color: #7a7845;
}
.galben-pai span {
color: #acaa75;
}
.paleta {
list-style: none;
}
.verde-crud {
background-color: #dffeae;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.verde-crud h1 {
color: #b7e56e;
}
.verde-crud p {
color: #6c9d1f;
}
.verde-crud span {
color: #92c443;
}
.paleta {
list-style: none;
}
.roz-levantica {
background-color: #e760a7;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.roz-levantica h1 {
color: #d14790;
}
.roz-levantica p {
color: #ffffff;
}
.roz-levantica span {
color: #f9aad4;
}
.paleta {
list-style: none;
}
.rose {
background-color: #eb507b;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.rose h1 {
color: #d93663;
}
.rose p {
color: #ffffff;
}
.rose span {
color: #fa9bb5;
}
.paleta {
list-style: none;
}
.roz-somon {
background-color: #f45154;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.roz-somon h1 {
color: #e53639;
}
.roz-somon p {
color: #ffffff;
}
.roz-somon span {
color: #fca5a7;
}
.paleta {
list-style: none;
}
.roz-capsuni {
background-color: #f7332f;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.roz-capsuni h1 {
color: #e21f1b;
}
.roz-capsuni p {
color: #ffffff;
}
.roz-capsuni span {
color: #faa5a4;
}
.paleta {
list-style: none;
}
.orange-cupru {
background-color: #e46b33;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.orange-cupru h1 {
color: #d05b26;
}
.orange-cupru p {
color: #ffffff;
}
.orange-cupru span {
color: #f9a47d;
}
.paleta {
list-style: none;
}
.portocaliu {
background-color: #ea8030;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.portocaliu h1 {
color: #d66f21;
}
.portocaliu p {
color: #ffffff;
}
.portocaliu span {
color: #fdba87;
}
.paleta {
list-style: none;
}
.rosu-purpuriu {
background-color: #ae2159;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.rosu-purpuriu h1 {
color: #931346;
}
.rosu-purpuriu p {
color: #ffffff;
}
.rosu-purpuriu span {
color: #e17aa3;
}
.paleta {
list-style: none;
}
.rosu-rubiniu {
background-color: #be0009;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.rosu-rubiniu h1 {
color: #9a0108;
}
.rosu-rubiniu p {
color: #ffffff;
}
.rosu-rubiniu span {
color: #f45b62;
}
.paleta {
list-style: none;
}
.rosu-carmin {
background-color: #990012;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.rosu-carmin h1 {
color: #7b000e;
}
.rosu-carmin p {
color: #ffffff;
}
.rosu-carmin span {
color: #db5e6d;
}
.paleta {
list-style: none;
}
.rosu-maroniu {
background-color: #740001;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.rosu-maroniu h1 {
color: #4f0001;
}
.rosu-maroniu p {
color: #ffffff;
}
.rosu-maroniu span {
color: #c16d6e;
}
.paleta {
list-style: none;
}
.rosu-mahon {
background-color: #4b0001;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.rosu-mahon h1 {
color: #700002;
}
.rosu-mahon p {
color: #ffffff;
}
.rosu-mahon span {
color: #9d5556;
}
.paleta {
list-style: none;
}
.rosu-cafeniu {
background-color: #220200;
padding: 20px;
font-size: 1em;
font-family: arial;
}
.rosu-cafeniu h1 {
color: #520803;
}
.rosu-cafeniu p {
color: #ffffff;
}
.rosu-cafeniu span {
color: #7e4440;
}
Raw
SassMeister-rendered.html
<ol class="paleta">
<li class="verde-cafeniu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="anghinare">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="galben-cafeniu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="verde-auriu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="galben-pai">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="verde-crud">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="roz-levantica">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="rose">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="roz-somon">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="roz-capsuni">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="orange-cupru">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="portocaliu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="rosu-purpuriu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="rosu-rubiniu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="rosu-carmin">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="rosu-maroniu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="rosu-mahon">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
<li class="rosu-cafeniu">
<h1>Heading</h1>
<p>Body</p>
<span>Fade</span>
</li>
</ol>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment