html Sass&BEM：灵活的组件定义#sass

Posted 2021-05-11

<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>

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;
}

// ----
// 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;
}

<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>