Stylus logo

Stylus

Expressive, robust, feature-rich CSS language built for nodejs
324
233
+ 1
326

What is Stylus?

Stylus is a revolutionary new language, providing an efficient, dynamic, and expressive way to generate CSS. Supporting both an indented syntax and regular CSS style.
Stylus is a tool in the CSS Pre-processors / Extensions category of a tech stack.

Who uses Stylus?

Companies
96 companies reportedly use Stylus in their tech stacks, including Coursera, Homejoy, and Hazeorid.

Developers
210 developers on StackShare have stated that they use Stylus.

Stylus Integrations

Why developers like Stylus?

Here’s a list of reasons why companies and developers use Stylus
Stylus Reviews

Here are some stack decisions, common use cases and reviews by companies and developers who chose Stylus in their tech stack.

Dave Willenberg
Dave Willenberg
Founding Director at Detroit Technical English · | 7 upvotes · 13.2K views
atDetroit Technical EnglishDetroit Technical English
Node.js
Node.js
Pug
Pug
Stylus
Stylus
Puppeteer
Puppeteer
HTML Templates: a Pain in the Backend

We chose Pug because writing raw HTML is about as enjoyable as a fart in a spacesuit, and writing decently-rendering HTML for enterprise email clients is a soul-sucking type of black magic.

Pug takes HTML as a (...markdown) language out of the stack by using a simple, sane syntax to represent HTML in just JavaScript©. Piecing together what you need from any number of standalone - including functional - components is both delightfully easy, and easy to maintain.

All you're really writing are exportable JavaScript functions that take a single Object parameter - once that concept takes hold, you'll quickly swear off angle brackets in favor of neatly indented and extensible e-mail, invoice, and reporting templates.

There's a jstransformer filter for instant interop with just about every preprocessor ( Stylus , in our case) and file format out there. Pass that compiled HTML though Juice on Node.js and bam - rugged HTML-emails that hold up in even the wonkiest Lotus Notes clients.

That the end result is 'just HTML' is the final cherry on top. Debugging needs only DevTools, and Puppeteer 's now all you need to create fancy-pants PDFs to your heart's content.

See more

Stylus Alternatives & Comparisons

What are some alternatives to Stylus?
Sass
Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It's translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
Animate.css
It is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
Less
Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions and many other techniques that allow you to make CSS that is more maintainable, themable and extendable.
PostCSS
PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.
Compass
The compass core framework is a design-agnostic framework that provides common code that would otherwise be duplicated across other frameworks and extensions.
See all alternatives

Stylus's Followers
233 developers follow Stylus to keep up with related blogs and decisions.
Mikolaj Kubera
mudone
Дилик Пулатов
mattflet6802
MuminovicAnel
Sajjad vafaie
noel zubin
Oleg Apostol
Jorge Luis Ardila González
Eline Riise