Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="fruitlist">
<li><a herf="" class="orange">みかん</a></li> 
<li><a herf="" class="apple">りんご</a></li>
<li><a herf="" class="banana">バナナ</a></li>
<li><a herf"" class="melon">メロン</a></li>
</ul>


<header>
<ul>
<li>2013/08/01</li>   
<li><a herf="" class="cateLavel banana">バナナ</a></li>
</ul>  
</header>  

<p class="category"><a herf="" class="cateLabel orange">  
みかん</a></p>  
  
  
  
  
  
  
  
</header>









  
  
  
</ul>

SassMeister-input.scss

// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----

ul.fruitlist {
  list-style: none;
  li {
    margin: 0 0 10px;
    a {
      display: inline-block;
      padding: 10px 25px;
      border-radius: 5px;
      text-decoration: none;  
      color: white;
      &.orange {
        background: orange;
      }
      &.apple {
        background: red;
      }
      &.banana {
        background: yellow;
        color: #333;
      }
      &.melon {
        background: green;
      }
    }
  }
}

ul.fruitList {
  list-style: none;
  li {
    margin: 0 0 10px;
  }
}
.cateLabel {
  display: inline-block;
  padding: 10px 25px;
  background: gray;
  border-radius: 5px;
  text-decoration: none;
  color: white;
&.orange {
  background: orange;
}
&.apple {
  background: red;
}
&.banana {
  background: yellow;
  color: #333;
}
&.melon {
  background: green;
}
 }

SassMeister-output.css

ul.fruitlist {
  list-style: none;
}
ul.fruitlist li {
  margin: 0 0 10px;
}
ul.fruitlist li a {
  display: inline-block;
  padding: 10px 25px;
  border-radius: 5px;
  text-decoration: none;
  color: white;
}
ul.fruitlist li a.orange {
  background: orange;
}
ul.fruitlist li a.apple {
  background: red;
}
ul.fruitlist li a.banana {
  background: yellow;
  color: #333;
}
ul.fruitlist li a.melon {
  background: green;
}

ul.fruitList {
  list-style: none;
}
ul.fruitList li {
  margin: 0 0 10px;
}

.cateLabel {
  display: inline-block;
  padding: 10px 25px;
  background: gray;
  border-radius: 5px;
  text-decoration: none;
  color: white;
}
.cateLabel.orange {
  background: orange;
}
.cateLabel.apple {
  background: red;
}
.cateLabel.banana {
  background: yellow;
  color: #333;
}
.cateLabel.melon {
  background: green;
}

SassMeister-rendered.html

<ul class="fruitlist">
<li><a herf="" class="orange">みかん</a></li> 
<li><a herf="" class="apple">りんご</a></li>
<li><a herf="" class="banana">バナナ</a></li>
<li><a herf"" class="melon">メロン</a></li>
</ul>


<header>
<ul>
<li>2013/08/01</li>   
<li><a herf="" class="cateLavel banana">バナナ</a></li>
</ul>  
</header>  

<p class="category"><a herf="" class="cateLabel orange">  
みかん</a></p>  
  
  
  
  
  
  
  
</header>









  
  
  
</ul>