Stylus (stylesheet language)
Lua error in package.lua at line 80: module 'strict' not found.
| 120px | |
| Designed by | TJ Holowaychuk |
|---|---|
| Developer | LearnBoost (29 March 2011 - 26 March 2015) / Automattic (26 March 2015 - Present)[1] |
| First appeared | 2010 |
| Stable release | 0.53.0[2] / December 14, 2015[3] |
| Typing discipline | dynamic |
| OS | Cross-platform |
| License | MIT License |
| Filename extensions | .styl |
| Website | Stylus |
| Influenced by | |
| CSS, Sass, LESS | |
Stylus is a dynamic stylesheet language that is compiled into Cascading Style Sheets (CSS). Its design is influenced by Sass and LESS. It's regarded as the third most used CSS preprocessor syntax.[4] 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
Selectors
Unlike CSS, which uses braces to open and close declaration blocks, whitespace is used. Additionally, semi-colons (:) are optionally replaced by whitespace. So the following CSS:
body {
color: white;
}
can be shortened to:
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 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 translate 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
- ↑ Lua error in package.lua at line 80: module 'strict' not found.
- ↑ Lua error in package.lua at line 80: module 'strict' not found.
- ↑ Lua error in package.lua at line 80: module 'strict' not found.
- ↑ Poll Results: Popularity of CSS Preprocessors
External links
<templatestyles src="Asbox/styles.css"></templatestyles>
 |
This software article is a stub. You can help Wikipedia by expanding it. |
