Hračka - ukázka theme - vygenerování struktury

SassMeister-input-HTML.html

<section class="theme-green">
  <div class="a">A</div>
  <div class="b">B</div>
</section>

<section class="theme-red">
  <div class="a">A</div>
  <div class="b">B</div>
</section>

SassMeister-input.scss

// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----

@mixin theme ($theme: 'green', $map: ()) 
{ 
    div.a 
    {
      color: map-get($map, colorPrimary);
      border: 1px solid;
      padding: 5px;
    }
    div.b
    {
      color: map-get($map, colorSecondary);
      border: 1px solid;
      padding: 5px;
      background: lighten(map-get($map, colorSecondary), 20);
    }
}


.theme-green
{
  @include theme('green', (colorPrimary: green, colorSecondary: #80ff00));
}

.theme-red
{
  @include theme('red', (colorPrimary: red, colorSecondary: #bf0000));
}

SassMeister-output.css

.theme-green div.a {
  color: green;
  border: 1px solid;
  padding: 5px;
}
.theme-green div.b {
  color: #80ff00;
  border: 1px solid;
  padding: 5px;
  background: #b3ff66;
}

.theme-red div.a {
  color: red;
  border: 1px solid;
  padding: 5px;
}
.theme-red div.b {
  color: #bf0000;
  border: 1px solid;
  padding: 5px;
  background: #ff2626;
}

SassMeister-rendered.html

<section class="theme-green">
  <div class="a">A</div>
  <div class="b">B</div>
</section>

<section class="theme-red">
  <div class="a">A</div>
  <div class="b">B</div>
</section>