I don't know if it's worth it to learn/use Jade and Sass. That's why I wanted to ask you people. :)
Do I use HTML and/or CSS pre-processors? Yes, I do.
Why? There are two reasons: improving a site performance, and having access to developing tools.
On site performance, its effect rely on size. Working on complex sites require to work with a long list of long files, and using a pre-processor you can compress the output while keeping a human-readable version of files, join assets — CSS or JS — into a single file reducing the number of requests, etc.
And on developing tools, you can not only use tools as auto-prefixers to support older browsers without having to write — and maintain — multiple versions of the same CSS rule, and that you can change with a single line to stablish which versions to support, but also use the language as a tool, like nesting selectors — very useful to write code for reusable components — or color functions — to be able to produce color variations using a single color as a reference — with SASS. In the same way the importance of site performance deppends on project size, the importance of developing tools and reducing code to maintain increases with team size.
Is it worth to learn Jade and SASS? If you work only on small projects with a small team, they are just a nice to have. If you work on large projects and/or with a large team, they are necessary, specially when looking for a job. So, if you just want to be able to build your own sites, is not worth the time, but if you want to work as a product designer, you must.
My recommendation would be — assuming you already have a good knowledge of HTML and CSS — to start learning, because the learning curve to start is small, and you can keep learning as you need. Also, as and asset to find a job and to be able to work on large teams, learning an automation task system like Gulp would be necessary.
As the name states: adding a pre-processor means you will add latency into your workflow.
At first it takes milliseconds, but as your application grows, it can take seconds then minutes to complete. Every time you will want to preview a change, the system you are using will have to pre-process the code into something the browser can understand.
Before using a pre-processor, the best is always to assess the issues you are facing. For instance with "classic" CSS:
- How do you automatically support vendor properties?
- How do you support namespaced classes?
- How to quickly change a primary action color?
- How do you share sets of properties?
By assessing the issues you are facing, you will be able to see whether or not to use a specific pre-processor. Now to answer to your question, I use Sass as a CSS preprocessor because the benefits outweigh (syntax is closed to CSS, modularization, shared variables, namespacing, vendor properties, functions). There are others (stylus, less) which provide similar features.
Note: I don't use a HTML pre-processor.