Description #
Stylus is a dynamic CSS preprocessor language that offers powerful features such as variables, mixins, functions, and advanced selectors, aimed at simplifying and enhancing stylesheet development.
History #
Stylus was created by TJ Holowaychuk in 2010 to provide a more expressive and flexible alternative to other preprocessors like Sass and Less, with a minimalistic syntax that allows optional braces and semicolons.
Hello World Code #
body
background: #fff
color: #333
h1
font-size: 36px
content: "Hello, World!"How to Run #
Option 1: Online
Try Stylus on Play Stylus.
Option 2: Local
- Install Node.js and npm
- Install Stylus CLI:
npm install -g stylus- Compile Stylus to CSS:
stylus style.stylKey Concepts #
- Concise syntax with optional punctuation
- Supports variables, nesting, mixins, and functions
- Enables modular and reusable CSS components
- Compatible with existing CSS
- Extensible with custom functions
- Supports conditional logic and loops
- Compiles to standard CSS
- Integrates with build tools like Gulp and Webpack
- Good tooling support and editor plugins
- Used in modern front-end development workflows
Try It Online #
Fun Facts #
- Stylus syntax is inspired by Python, making indentation significant.
- The language lets developers write very terse stylesheets, reducing boilerplate.
- TJ Holowaychuk, creator of Stylus, also created popular Node.js tools like Express.
- Stylus supports operators and functions for advanced stylesheet logic.
- It has been used in projects like Nib, a CSS3 extensions library.
