Sass & BEM: A flexible component definition #sass

SassMeister-input-HTML.html

<div class="collection">
  <div class="collection__item">Item 1</div>
  <div class="collection__item">Item 2</div>
  <div class="collection__item">Item 3</div>
</div>

<ul class="collection">
  <li class="collection__item">Item 1</li>
  <li class="collection__item">Item 2</li>
  <li class="collection__item">Item 3</li>
</li>

SassMeister-input.scss

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

// A flexible component definition
// BEM with one element type and one class selector

// Generic Block
%collection {
  display: block;
  margin: 1em;
  padding: 0;
}

// Div-specific Block
div%collection {
  padding: 1em;
  border: 4px solid #888;
}

// Ul-specific Block
ul%collection {
  list-style: none;
  padding: 0 0 0 1em;
  border-left: 4px solid #888;
}

// Generic Block's Element
%collection__item {
  margin: 1em 0;
  padding: 0;
  display: block;
}

// Div-specific Block's Element
div%collection__item {
  border: 4px solid #ccc;
}

// Li-specific Block's Element
li%collection__item {
  border-left: 4px solid #ccc;
}

// Mapping placeholders to actual Elements
div.collection {
  @extend %collection;
}

div.collection__item {
  @extend %collection__item;
}

ul.collection {
  @extend %collection;
}

li.collection__item {
  @extend %collection__item;
}

SassMeister-output.css

div.collection, ul.collection {
  display: block;
  margin: 1em;
  padding: 0;
}

div.collection {
  padding: 1em;
  border: 4px solid #888;
}

ul.collection {
  list-style: none;
  padding: 0 0 0 1em;
  border-left: 4px solid #888;
}

div.collection__item, li.collection__item {
  margin: 1em 0;
  padding: 0;
  display: block;
}

div.collection__item {
  border: 4px solid #ccc;
}

li.collection__item {
  border-left: 4px solid #ccc;
}

SassMeister-rendered.html

<div class="collection">
  <div class="collection__item">Item 1</div>
  <div class="collection__item">Item 2</div>
  <div class="collection__item">Item 3</div>
</div>

<ul class="collection">
  <li class="collection__item">Item 1</li>
  <li class="collection__item">Item 2</li>
  <li class="collection__item">Item 3</li>
</li>