Sass Basics Demo - SassMeister

SassMeister-input-HTML.html

<ul>
  <li>Variables</li>
  <li>Mixins</li>
  <li>Nesting</li>
  <li>Placeholder Selectors</li>
  <li>Math</li>
</ul>

<div class="products products-buy">
  <h1>Products to Buy</h1>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
  </ul>
</div>
<div class="products products-sell">
  <h1>Products to Sell</h1>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
  </ul>
</div>

SassMeister-input.scss

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

$primaryFontStack: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$primaryFontSize: 16px;
$primaryTextColor: #666;
$primaryColor: fuchsia;
$secondaryColor: navy;

@mixin chunkyList($backgroundColor, $fontColor) {
  background: $backgroundColor;
  color: $fontColor;
  border-color: $fontColor;
  
  &:hover{
    background: darken($backgroundColor, 25%);
  }
}

%products{
  font-size: 16px;
  font-family: $primaryFontStack;
  color: $primaryTextColor;
  
  ul{
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  
  li{
    padding: $primaryFontSize + 10;
    border-bottom: 1px solid;
    cursor: pointer;
    transition: background .25s;
    
    &:last-child{
      border-bottom: 0;
    }
  }
}

.products-buy{
  @extend %products;
  
  li{
    @include chunkyList($primaryColor, #fff);
  }
}
 
.products-sell{
  @extend %products;
  
  li{
    @include chunkyList($secondaryColor, #ececec);
  }
}

SassMeister-output.css

.products-buy, .products-sell {
  font-size: 16px;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #666;
}
.products-buy ul, .products-sell ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}
.products-buy li, .products-sell li {
  padding: 26px;
  border-bottom: 1px solid;
  cursor: pointer;
  transition: background .25s;
}
.products-buy li:last-child, .products-sell li:last-child {
  border-bottom: 0;
}

.products-buy li {
  background: fuchsia;
  color: #fff;
  border-color: #fff;
}
.products-buy li:hover {
  background: #80007f;
}

.products-sell li {
  background: navy;
  color: #ececec;
  border-color: #ececec;
}
.products-sell li:hover {
  background: black;
}

SassMeister-rendered.html

<ul>
  <li>Variables</li>
  <li>Mixins</li>
  <li>Nesting</li>
  <li>Placeholder Selectors</li>
  <li>Math</li>
</ul>

<div class="products products-buy">
  <h1>Products to Buy</h1>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
  </ul>
</div>
<div class="products products-sell">
  <h1>Products to Sell</h1>
  <ul>
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
    <li>item 4</li>
    <li>item 5</li>
  </ul>
</div>