CSS preprocesory

S příchodem internetu na mobil se stalo důležité vytvářet mobile-friendly weby (tzn. web který se zobrazí rychle a bez deformací na display mobilního telefonu). Z počátku stačilo mít zvláští verzi webu například na subdoméně m.domena.cz. Poté co byl představen tablet iPad, už pouze mobilní verze nestačila a začal nárust reponsivních webů vzhledem k množství různých rozlišení součastných telefonů a tabletů.

Pokud se chcete vyhnout vytváření subdomén a přesměrování javascriptu podle šířky displaye, tak můžete využít podmínky v CSS zvané media-queries, pokud se rozhodnete používat tak v klasickém CSS musíte své styly tomu podřídit a organizovat je podle nich. Můžete mít až 5 různých stylopisů, každý pro jiné rozlišení, každý tento stylopis pak zvlášť vkládáte (importujete) na váš web. Každý css import vytváří nový http request.

V preprocesorech to je naopak. Organizaci kódu můžete nechat stejnou a media-queries vnořit do prvku ke kterému chcete nastavit podmínku jak se pro danou šířku má chovat. Takto organizový kód pak je pochopitelný pro každého kdo k daném stylu přistopuje. V příkladu níže tedy bude hlavní organizační jednotkou modul nav a media queries budou zanořené v něm.

.nav {
  @media only screen and (min-width: 768px){
    width: 25%;
  }

  @media only screen and (min-width: 1024px){
    width: 50%;
  }

  @media only screen and (min-width: 1368px){
    width: 75%;
  }
}less, sass, stylus

Výsledné CSS:

@media only screen and (min-width: 768px) {
  .nav {
    width: 25%;
  }
}

@media only screen and (min-width: 1024px) {
  .nav {
    width: 50%;
  }
}

@media only screen and (min-width: 1368px) {
  .nav {
    width: 75%;
  }
}css