Sass Placeholders

Een veel voorkomend probleem met HTML zijn het aantal classes die we gebruiken zoals bijvoorbeeld <div class="product product-hat">. Ook het dupliceren van CSS gebeurd te vaak om het gewenste resultaat te krijgen. Er is een oplossing.

Tijdens de Smashing Conference in Freiburg vertelde Nicole Sullivan (@Stubornella) over de SASS placeholder (werkt vanaf SASS 3.2). De placeholder is een type selector die niet in de CSS output komt na compilen.

Waarbij we normaal .selector of #selector gebruiken, pakken we nu de %selector. Aan onderstaand %product heb je niets, het komt namelijk niet in de CSS output.

%product {
  background: grey;
  border: 1px solid;
  padding: 1em;
}

Maar we kunnen er wel degelijk iets mee. Het voordeel zit hem in de combinatie met @extend.

In CSS gebruiken we bijvoorbeeld div.product. Stel we verkopen schoenen en hoedjes via een webshop. In het productoverzicht hebben alle producten een aantal dezelfde eigenschappen zoals background, border en padding. Alleen verschillen de schoenen en hoedjes van border kleur middels de volgende SCSS:

%product {
  background: grey;
  border: 1px solid;
  padding: 1em;
}

div.product-shoe {
  @extend %product;
  border-color: red;
}

div.product-hat {
  @extend %product;
  border-color: blue;
}

Tip: De @extend wordt altijd als laatste binnen de selector ingeladen, overschrijven kan dus lastig zijn.

%product komt op deze manier niet in de output, maar de schoen en de hoed kunnen wel gebruik maken van de eigenschappen van %product. Dus hiermee krijg je de output:

div.product-shoe, div.product-hat {
  background: grey;
  border: 1px solid;
  padding: 1em;
}

div.product-shoe {
  border-color: red;
}

div.product-hat {
  border-color: blue;
}

Hiermee wordt de HTML simpeler en semantischer, je krijgt geen <div class="product product-hat">, maar alleen <div class="product-hat">.

Daarnaast hoef je in de SCSS geen code te dupliceren voor zowel .product-shoe als .product-hat. Minder code.

Als interface designer een goed te onderhouden framework en voor de bezoeker betere performance.

— This post was originally written on the Studio Wolf blog.