Stylus logo

Stylus

Expressive, robust, feature-rich CSS language built for nodejs
351
317
+ 1
331

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.
Stylus is an open source tool with 10.4K GitHub stars and 1.1K GitHub forks. Here’s a link to Stylus's open source repository on GitHub

Who uses Stylus?

Companies
96 companies reportedly use Stylus in their tech stacks, including Discord, Coursera, and Accenture.

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

Stylus Integrations

Private Decisions at about Stylus

Here are some stack decisions, common use cases and reviews by members of with Stylus in their tech stack.

Shared insights
on
StylusStylus

I hate CSS. Stylus

See more
Public Decisions about Stylus

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 · 26.5K views
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
317 developers follow Stylus to keep up with related blogs and decisions.
희수 이
kumar kundan
GToidZ
selva S
nick li
Vitaliy -
jpca
kim bryan
Stian Årsnes
Yusuke Hayashi