What is a preprocessor for?

Not only Jade , but also Sass , Less , and others. Is Emmet not doing his job? After all, to use these buns, you need to install so much extra, unnecessary.

It’s still not enough to install, even to get something you need a compilation, is it really more convenient than pressing three keys with your finger?

    2 answers 2

    Main advantages:

    • Variables
    • Nesting
    • Mixins, imports, etc.

    Honor a good post on Habré .

    • and for what are these variables and so on? - user33274
    • @Geyan are you a developer? See, the client has come. He wants to quickly make a startup. We take bootstrap / foundation or something like that and quickly customize it to fit our needs through variables and it turns out a beautiful and stable product. Then he takes the designer and he adjusts the colors and we easily change them using variables. And not like downs we go through the files and change hands. - Dmitry Kalinin
    • good explanation, but as I understand it for large projects? I'm not a pro - but sometimes I make orders but not large ones - user33274
    • @Geyan for any kind of product, the client wants to see the result as early as possible + html responsive and so that everything is beautiful and smooth, it is better to use ready-made solutions that are good friends with preprocessors and allow you to quickly write software. - Dmitry Kalinin
    • well, otherwise I couldn’t understand it for a long time, it’s the same on freelance exchanges that only require it, but what if you do it with fundation or bootstrap, but does it get lost on your technique without preprocessors? - user33274

    You mixed in a bunch of three different things. Jade is a template engine for a node. sass and less are generators for css (or as they are called fashionably, preprocessors), and emmet is a plug-in for the editor. jade and emmet are not preprocessors.

    Why did preprocessors appear? everything is simple. Modern browsers are developing fast and new features appear frequently. But not always these opportunities appear in all browsers at the same time and equally. Preprocessors just allow you to hide these features.

    Once upon a time, it was very difficult to make a table with lines one pixel wide and with rounded edges. Especially a lot of problems were in IE5.5 (yes, I also saw IE3 / IE4). In the modern world with preprocessors, this task would be solved simply - for the preprocessor they would create the necessary style, and the preprocessor for the necessary set of browsers would generate the correct css.

    Or the second task - for example, I want one element to be 10 pixels wider than the other, but if it is more than 100, then by 20. On the classic css, this, as far as I know, cannot be solved. It is necessary to use js. Less can compute arithmetic expressions when compiling and do everything on its own.

    Can Emmet help everyone in this? not. He helps edit. But if tomorrow there will be another browser with support for HTML100500, where there will be a bunch of new features, sass / less will add plugins and will generate css for them. The creators of the jade template will go somewhere else as well. And emmet users will have to edit everything manually.

    • that's it, I compared all css preprocessors and html preprocessors, the question is - what is faster, do emmet or zencoding, or are these unnecessary Buns? - user33274
    • jade same like html preprocessor? - user33274
    • why do you consider only one thing against another, and not their work together? But which is faster? and it depends on you. Perhaps you are the god of the keyboard and the encyclopedia on all the features of css in your head. Then emmet is not needed, not to mention sass / less. Jade is a template engine. Yes, it intersects a bit with the preprocessor, but still a bit different stuff. - KoVadim
    • Well, I know css3 and use it (if I say childish), but .. I'm in a stupor, for example, to (for stupidly say) dazzle html template for openCard, it takes me no more than one hour and two or three more for adaptation, maybe to be flawed but at least on the iphone and in ie6-12 everything looked fine (at the moment there are no examples) and the finished product after testing was given in a day, would it be faster through preprocessors? - user33274
    • @Geyan is certainly faster and nicer. Sass is a CSS-based metalanguage used to make the document style description cleaner and more structured; It has great potential compared to plain CSS. Sass offers a more accessible and elegant syntax for CSS, as well as various useful tools for creating style sheets that will be easily maintained in the future. - spectre_it