Generated by SassMeister.com.

SassMeister-input-HTML.html

<header>
  <h1>Demo</h1>
</header>
<section class="content">
  <p>Hello There!</p>
  <a href="#">Click me!</a>
</section>
<footer>
  <p>This is a footer</p>
</footer>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

// This function will return true/false depending on wheter the site is defined in $sites list or not.
@function contains($sites, $site) {
   @return (null != index($sites, $site));
}

// This function will return de properties selected according to the site index.
@function pick($site_index, $props...){
  @return nth($props, $site_index);
}

@mixin variables(){}

// This mixing defines all the styles for horizon.
@mixin horizon($site, $sites){
  
  // Picks the corresponding index of the site.
  $site_index: if(contains($sites, $site), index($sites, $site), 1);

  body {
    background: pick($site_index, #000, #95F18F, #E7143F);
    color:  pick($site_index, #fff, #33323A, #000);
    font-family: "Helvetica";
    a{
      color: pick($site_index, #f00, #33323A, #fff);
    }
  }
  
  header {
    padding-top: 20px;
  }
  
  .content {
    display: inline-block;
    border-top: 10px;
    border: 0px;
  }
  
  footer {
    font-size: 10px;
    margin-top: 30px;
  }
  
}

// Order matters...
$sites: (defaults, hometribe, redman);
$site: redman;
@include horizon($site, $sites);

SassMeister-output.css

body {
  background: #E7143F;
  color: #000;
  font-family: "Helvetica";
}

body a {
  color: #fff;
}

header {
  padding-top: 20px;
}

.content {
  display: inline-block;
  border-top: 10px;
  border: 0px;
}

footer {
  font-size: 10px;
  margin-top: 30px;
}

SassMeister-rendered.html

<header>
  <h1>Demo</h1>
</header>
<section class="content">
  <p>Hello There!</p>
  <a href="#">Click me!</a>
</section>
<footer>
  <p>This is a footer</p>
</footer>