Generated by SassMeister.com.

SassMeister-input-HTML.html

<ul class="icons">
  <li></li></li>
</ul>

SassMeister-input.scss

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

.item-summary {
  background-color: white;
  width: 100%;
  display: block;

  // when using an ampersand, no nesting occurs. The item is immediately
  &:hover {
    background-color: gray;
  }

  img {
    width: 20%;
  }

  // this works really well for BEM syntax
  // **(BEM MIXIN?)
  &--showcased {
    outline: 3px solid red;

    img {
      width: 50%;
    }
  }

  // The trailing ampersand is useful for nested structures for the developer's purposes, but brings switches the order of the scope
  // this will be for all .item-summary in the sidebar
  sidebar & {
    width: 100px;
    float: left;
  }

  // The Double Ampersand will affect only items that follow an item of the same type (so you can do vertical spacing without the awkward first element having that style)
  & + & {
    margin-top: 2px;
  }

  .sidebar > & {
    color: purple;
  }
}

SassMeister-output.css

.item-summary {
  background-color: white;
  width: 100%;
  display: block;
}
.item-summary:hover {
  background-color: gray;
}
.item-summary img {
  width: 20%;
}
.item-summary--showcased {
  outline: 3px solid red;
}
.item-summary--showcased img {
  width: 50%;
}
sidebar .item-summary {
  width: 100px;
  float: left;
}
.item-summary + .item-summary {
  margin-top: 2px;
}
.sidebar > .item-summary {
  color: purple;
}

SassMeister-rendered.html

<ul class="icons">
  <li></li></li>
</ul>