Stylus (stylesheet language)

Short description: Stylesheet preprocessor language

Stylus

Designed by| TJ Holowaychuk
Developer| LearnBoost (March 29, 2011 (2011-03-29) \- March 26, 2015 (2015-03-26)) / Automattic (March 26, 2015 (2015-03-26) \- Present)[1]
First appeared| 2010; 16 years ago (2010)
Stable release|

0.54.8[2] / July 16, 2020; 6 years ago (2020-07-16)

Typing discipline| dynamic
OS| Cross-platform
License| MIT License
Filename extensions| `.styl`
Website| Stylus (Github)
Influenced by
CSS, Sass, LESS

Stylus is a dynamic stylesheet preprocessor language that is compiled into Cascading Style Sheets (CSS). Its design is influenced by Sass and LESS. It is regarded as the fourth most used CSS preprocessor syntax.[3] It was created by TJ Holowaychuk, a former programmer for Node.js and the creator of the Luna language. It is written in JADE and Node.js.

## Contents

* 1 Selectors
* 2 Variables
* 3 Mixins and functions
* 4 Interpolation
* 5 References
* 6 External links

## 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 {
color: white;

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 {
content: 'Hello, World!';
color: #ffffff;

## 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 {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

## Interpolation

To include variables in arguments and identifiers, brace characters surround the variable(s). For example,

-webkit-{'border' + '-radius'}

evaluates to

-webkit-border-radius

## References

1. ↑ "LICENSE". GitHub. 2015-03-26. https://github.com/stylus/stylus/blob/c2d07a0f117de6144105de8599f620c34713d251/LICENSE.
2. ↑ "Release 0.54.8". GitHub. 2020-07-16. https://github.com/stylus/stylus/releases.
3. ↑ Poll Results: Popularity of CSS Preprocessors

## External links

* Stylus source code repository (Git)
* Source code comparison with Sass/SCSS and LESS
* Online Stylus Compiler

* v
* t
* e

Style sheet languages

Modes|

* Desktop publishing
* Web development
* User interfaces

Standard|

* Cascading (CSS)
* DSSSL
* Extensible (XSL)

Preprocessor|

* JavaScript (JSSS)
* FOSI
* Qt
* Sass
* Less
* Stylus
* SMIL Timesheets
* PostCSS

* List
* Comparison

0.00

(0 votes)

|

Retrieved from "https://handwiki.org/wiki/index.php?title=Stylus_(stylesheet_language)&oldid=293803"
*[v]: View this template
*[t]: Discuss this template
*[e]: Edit this template