Preprocesory jsou externí nástroje pro generování kaskádových stylů. Vývojáři už dnes nepíší CSS ručně, ale pracují se šablonami, ze kterých pak preprocesor finální CSS soubor generuje. Činí tak obvykle automaticky při uložení souboru šablony.
Preprocesory se rozšířily v souvislosti s responzivními weby, neboť takový web má mnohem složitější strukturu kaskádových stylů. K nejvíce používaným preprocesorům patří SASS, LESS a o něco méně je rozšířený Stylus. Všechny fungují podobně, ale trochu se liší syntaxí (způsobem zápisu).
Preprocesor vývojáři umožňuje používat různé pokročilé funkce, které zatím kaskádové styly nepodporují, jako jsou třeba proměnné, importy, zanořování stylů do sebe, či různé automatizované doplňování dalších CSS vlastností. Tím šetří vývojáři práci a také zápis CSS zpřehledňuje. Preprocesor také rovnou kontroluje správnou syntaxi a validitu, takže vývojáří nemusí pro kaskádové styly používat validátory.
Preprocesory mohou fungovat jako samostatný program v počítači, nejčastěji se však používají speciální pluginy do frontendových nástrojů, jako jsou Grunt, Gulp, Webpack a dalších, jež pomáhají automatizovat i další vývojářské činnosti (třeba minimalizaci souborů kvůli zlepšení rychlosti webu). Takto nastavenému systému vývoje se obecně říká DevStack a jeho promyšlenost a dotaženost významně definují kvalitu a cenu frontendových výstupů dané vývojářské firmy.