Sass output of nested placeholders

README.md

Sass output from nested placeholders

Simple example of nested placeholders in Sass and the unfortunate CSS output it generates.

• Example
• Sass
• CSS output

example.html

<style>
  .nav-site {
    @extend %menu-horizontal-blocks;
  }
</style>

<ul class="nav-site">
  <li><a href="#">Home</a></li>
  <li><a href="#">Contact</a></li>
</ul>

menu.scss

%menu {
  list-style: none;
  padding: 0;
}

%menu-horizontal {
  @extend %menu;

  li {
    display: inline;
  }
}

%menu-horizontal-blocks {
  @extend %menu-horizontal;
  overflow: hidden;

  a {
    float: left;
  }
}

output.css

.nav-site {
  list-style: none;
  padding: 0;
}

.nav-site li {
  display: inline;
}

.nav-site {
  overflow: hidden;
}

.nav-site a {
  float: left;
}