Stylus is a dynamic stylesheet preprocessor language that is compiled into

Cascading Style Sheets Cascading Style Sheets (CSS) is a style sheet language used for describing the presentation of a document written in a markup language such as HTML or XML (including XML dialects such as SVG, MathML or XHTML). CSS is a cornerstone techno ...

(CSS). Its design is influenced by

Sass Sass, Saß or SASS may refer to: SASS * M110 Semi-Automatic Sniper System (or M110 SASS) * Safe Amplification Site Society, a non-profit organization that promotes music and the arts within Vancouver, British Columbia, Canada * Shanghai Academ ...

and

Less Less or LESS may refer to: fewer than,: not as much. Computing * less (Unix), a Unix utility program * Less (stylesheet language), a dynamic stylesheet language * Large-Scale Scrum (LeSS), a product development framework that extends Scrum Other ...

. It is regarded as the fourth most used CSS preprocessor syntax.Poll Results: Popularity of CSS Preprocessors
/ref> It was created by TJ Holowaychuk, a former programmer for

Node.js Node.js is an open-source server environment. Node.js is cross-platform and runs on Windows, Linux, Unix, and macOS. Node.js is a back-end JavaScript runtime environment. Node.js runs on the V8 JavaScript Engine and executes JavaScript code ou ...

and the creator of the Luna language. It is written in

JADE Jade is a mineral used as jewellery or for ornaments. It is typically green, although may be yellow or white. Jade can refer to either of two different silicate minerals: nephrite (a silicate of calcium and magnesium in the amphibole group of ...

and

Selectors

Unlike CSS, which uses braces to open and close declaration blocks, indentation is used. Additionally, semi-colons (;) are optionally omitted. Hence, the following CSS: body can be shortened to: body color: white Further, colons (:) and commas (,) are also optional; that means the above can be written as, body color white

Variables

Stylus allows variables to be defined, however unlike Less and Sass, it doesn't use a symbol to define variables. Additionally, variable assignment is done automatically by separating the property and keyword(s). In this way, variables are similar to the variables in Python. message = 'Hello, World!' div::before content message color #ffffff The Stylus compiler would translate the above document to: div::before

Mixins and functions

Both mixins and functions are defined in the same manner, but they are applied in different ways. For example, if you wanted to define the CSS border radius property without having to use various Vendor Prefixes you can create: border-radius(n) -webkit-border-radius n -moz-border-radius n border-radius n then, to include this as a mixin, you would reference it as: div.rectangle border-radius(10px) this would compile to: div.rectangle

Interpolation

To include variables in arguments and identifiers, brace characters surround the variable(s). For example, -webkit- evaluates to -webkit-border-radius

References

External links

*
Stylus source code repository (Git)

Source code comparison with Sass/SCSS and Less

Online Stylus compiler
Computer-related introductions in 2010 Free computer libraries Software using the MIT license Stylesheet languages {{Prog-lang-stub