CSS preprocesory

Protože každý CSS preprocesor je jako jiný jazyk, má také každý jinou syntaxi (zároveň, ale všechny tři zůstali věrní klasické CSS syntaxi). LESS nabízí syntaxi pouze jednu, SASS nabízí syntaxi SASS a SCSS a Stylus nabízí takový mix všeho, reps. co vás zrovna napadne.

Syntaxe předvedu na zápisu vnořených pravidel.

LESS nabízí syntaxi která je nejlepší pro učení se syntaxe CSS preprocesorů. Nijak se nelíší od klasického CSS. Nebere v potaz žádné tabulátory, ale jako oddělovače slouží { } a ;.

#header {
  h1 {
	font-size: 26px;
	font-weight: bold;
  }
  p { font-size: 12px;
	a { text-decoration: none;
	  &:hover { border-width: 1px }
	}
  }
}
					

V SASS syntaxi místo { } a ;, se používají tabulátory. Pozor na více tabulátorů zasebou, neměl by stím být žádný problém, ale jistota je jistota.

#header

  h1
	font-size: 26px
	font-weight: bold
  
  p  font-size: 12px

	a  text-decoration: none
	  &:hover  border-width: 1px 

Nevyhovuje-li vám syntaxe kde musíte oddělovat elementy tabulátory a vznikají vám často chyby, můžete využít syntaxi SCSS, která je stejná jako CSS nebo LESS.

#header {
  h1 {
	font-size: 26px;
	font-weight: bold;
  }
  p { font-size: 12px;
	a { text-decoration: none;
	  &:hover { border-width: 1px }
	}
  }
}
					

Stylus má ze všech tří preprocesorů, dle mého názoru nejhorší syntaxi. Syntaxe není pevně daná a žádná znaky, které běžně používáte v klasickém CSS nejsou zakázané.

Bohužel, pokud by jste se rozhodli využívat syntaxi stejnou jako CSS (což můžete), tak dávejte pozor při zanořování selektorů. Stylus stále kontroluje počet odsazení, pokud najde jeden TAB navíc, vyhodí error a kompilace se nezdaří.

#header

  h1
	font-size 26px
	font-weight bold
  
  p  font-size 12px

	a  text-decoration none
	  &:hover  border-width 1px 

#header h1 {
  font-size: 26px;
  font-weight: bold;
}
#header p {
  font-size: 12px;
}
#header p a {
  text-decoration: none;
}
#header p a:hover {
  border-width: 1px;
}
					

Vzhledem k tomu, že SASS a Stylus nabízejí syntaxi, které nevyužívá tolik speciálních znaků oproti CSS (Stylus dokonce ani : pro oddělení hodnoty), vznikají dost velké problémy, pokud již máte zažité nějaké určitě standardy, které dodržujete. Například já jsem zvyklý v klasickém CSS si "zanořovat" selektory pod jejich rodičovské prvky tím že si je odsadím dál od kraje pomocí TAB. To se ovšem preprocesorům SASS a Stylus nelíbí. Každý tabulátor se poté snaží pochopit jako oddělovač, oba nabízejí syntaxi se složenými závorkami, ale i zde se tento problém vyskytuje. Proto za mě vyhrává LESS.

Pokračujte na další kapitolu