Skip to content

Instantly share code, notes, and snippets.

@fuhlig

fuhlig/SassMeister-input-HTML.html

Created November 10, 2015 17:07
Show Gist options
  • Save fuhlig/31db6b2c9593e171a0eb to your computer and use it in GitHub Desktop.
Save fuhlig/31db6b2c9593e171a0eb to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<h3>lighten</h3>
<span class="[ weather-demo ] [ weather-rain weather-rain-1 weather-rain--lighten ]">0</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-2 weather-rain--lighten ]">4</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-3 weather-rain--lighten ]">8</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-4 weather-rain--lighten ]">12</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-5 weather-rain--lighten ]">16</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-6 weather-rain--lighten ]">20</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-7 weather-rain--lighten ]">24</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-8 weather-rain--lighten ]">28</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-9 weather-rain--lighten ]">32</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-10 weather-rain--lighten ]">36</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-11 weather-rain--lighten ]">40</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-11 weather-rain--lighten ]">50</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-11 weather-rain--lighten ]">60</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-11 weather-rain--lighten ]">70</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-11 weather-rain--lighten ]">80</span>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
$color-primary: #005D9C;
$color-primary--darken: #00406B;
$color-secondary: #A69E9E;
$color-secondary--lighten: lighten(#A69E9E, 15%);
$color-secondary--darken: #878181;
$color-tertiary: #BE1E2D;
$color-tertiary--darken: #941B28;
$white: #FFF;
$black: #000;
$wind-color: $color-primary;
$wind-color-factor: 5%;
$wind-color-hue-factor: 10%;
$rain-color: $color-primary--darken;
$rain-color-factor: 6%;
$rain-color-hue-factor: 10%;
$temperature-color: $color-primary--darken;
$temperature-color-factor: 3%;
$temperature-color-hue-factor: -10%;
$temperature-color--start: $color-primary--darken;
$temperature-color--end: $color-tertiary;
.weather-demo {
display: inline-block;
width: 50px;
padding: 1em;
text-align: center;
color: $white;
}
.weather-rain--lighten {
@for $i from 1 through 15 {
&.weather-rain-#{$i} {
background-color: lighten($rain-color, ($rain-color-factor * $i));
}
}
}
Raw
SassMeister-output.css
.weather-demo {
display: inline-block;
width: 50px;
padding: 1em;
text-align: center;
color: #FFF;
}
.weather-rain--lighten.weather-rain-1 {
background-color: #00528a;
}
.weather-rain--lighten.weather-rain-2 {
background-color: #0065a8;
}
.weather-rain--lighten.weather-rain-3 {
background-color: #0077c7;
}
.weather-rain--lighten.weather-rain-4 {
background-color: #0089e5;
}
.weather-rain--lighten.weather-rain-5 {
background-color: #059bff;
}
.weather-rain--lighten.weather-rain-6 {
background-color: #24a7ff;
}
.weather-rain--lighten.weather-rain-7 {
background-color: #42b3ff;
}
.weather-rain--lighten.weather-rain-8 {
background-color: #61bfff;
}
.weather-rain--lighten.weather-rain-9 {
background-color: #7fccff;
}
.weather-rain--lighten.weather-rain-10 {
background-color: #9ed8ff;
}
.weather-rain--lighten.weather-rain-11 {
background-color: #bde4ff;
}
.weather-rain--lighten.weather-rain-12 {
background-color: #dbf1ff;
}
.weather-rain--lighten.weather-rain-13 {
background-color: #fafdff;
}
.weather-rain--lighten.weather-rain-14 {
background-color: white;
}
.weather-rain--lighten.weather-rain-15 {
background-color: white;
}
Raw
SassMeister-rendered.html
<h3>lighten</h3>
<span class="[ weather-demo ] [ weather-rain weather-rain-1 weather-rain--lighten ]">0</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-2 weather-rain--lighten ]">4</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-3 weather-rain--lighten ]">8</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-4 weather-rain--lighten ]">12</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-5 weather-rain--lighten ]">16</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-6 weather-rain--lighten ]">20</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-7 weather-rain--lighten ]">24</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-8 weather-rain--lighten ]">28</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-9 weather-rain--lighten ]">32</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-10 weather-rain--lighten ]">36</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-11 weather-rain--lighten ]">40</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-11 weather-rain--lighten ]">50</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-11 weather-rain--lighten ]">60</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-11 weather-rain--lighten ]">70</span>
<span class="[ weather-demo ] [ weather-rain weather-rain-11 weather-rain--lighten ]">80</span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment