CSS preprocesory

V preprocesorech Stylus a SASS jdou cykly díky jejich „programátorské" povaze dělat poměrně elegantně. Smyčky jsou užitečné například při vytváření grid systému, kde je potřeba vytvořit sérii stylů s obdobnou syntaxí.

Stejně jako v podmínkách se v LESS používá CSS guards a rekurzivní mixiny pro smyčky.

@icons = facebook, twitter, google-plus;

for icon in icons {
  .{icon}-icon {
    background-image: url('/images/'+icon+'-icon.png');
  }
}sass

@icons: facebook, twitter, google-plus;

for icon in icons {
  .{icon}-icon {
    background-image: url('/images/'+icon+'-icon.png');
  }
}less

icons = facebook, twitter, google-plus

for icon in icons
  .{icon}-icon
    background-image: url('/images/'+icon+'-icon.png')
  
}stylus

Výsledné CSS:

.facebook-icon {
  background-image: url("/images/facebook-icon.png");
}

.twitter-icon {
  background-image: url("/images/twitter-icon.png");
}

.google-plus-icon {
  background-image: url("/images/google-plus-icon.png");
}CSS

Pokračujte na další kapitolu