Skip to content

Instantly share code, notes, and snippets.

@baptiste-roullin

baptiste-roullin/SassMeister-input-HTML.html

Created March 11, 2014 11:34
Show Gist options
  • Save baptiste-roullin/9484022 to your computer and use it in GitHub Desktop.
Save baptiste-roullin/9484022 to your computer and use it in GitHub Desktop.
Download ZIP
Just messing with SASS to output parametric color scheme
Raw
SassMeister-input-HTML.html
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
<div class="item-6"></div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.1)
// Compass (v1.0.0.alpha.18)
// ----
$base-color: #AD141E;
$i: 0;
@for $i from 1 through 6 {
$decliCouleur: adjust-hue( $base-color, $i*30 );
.item-#{$i} { background-color:$decliCouleur}
}
div {
width:100px;
height:100px;
position:relative;
margin:1em;
}
Raw
SassMeister-output.css
.item-1 {
background-color: #ad5614;
}
.item-2 {
background-color: #ada314;
}
.item-3 {
background-color: #6bad14;
}
.item-4 {
background-color: #1ead14;
}
.item-5 {
background-color: #14ad56;
}
.item-6 {
background-color: #14ada3;
}
div {
width: 100px;
height: 100px;
position: relative;
margin: 1em;
}
Raw
SassMeister-rendered.html
<div class="item-1"></div>
<div class="item-2"></div>
<div class="item-3"></div>
<div class="item-4"></div>
<div class="item-5"></div>
<div class="item-6"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment