Jump to content

Stylus (style sheet language): Difference between revisions

From Wikipedia, the free encyclopedia
Browse history interactively
← Previous edit
Content deleted Content added
VisualWikitext
No edit summary
Tags: Mobile edit Mobile web edit
Wow9 (talk | contribs)
46 edits
No edit summary
 
(14 intermediate revisions by 12 users not shown)
Line 1: Line 1:
{{Short description|Stylesheet preprocessor language}}
{{Cleanup-rewrite|date=February 2015}}
{{Cleanup-rewrite|date=February 2015}}
{{ infobox programming language
{{infobox programming language
| name t o r r i e = Stylus
| name = Stylus
| logo = [[File:Stylus-logo.svg|120px]]
| logo = [[File:Stylus-2022.svg|120px]]
| released = {{Start date and age|2010}}
| released = {{Start date and age|2010}}
| designer = TJ Holowaychuk
| designer = TJ Holowaychuk
| developer = LearnBoost ({{Start date|2011|03|29}} - {{Start date|2015|03|26}}) / Automattic ({{Start date|2015|03|26}} - Present)<ref>{{cite web|url=https://github.com/stylus/stylus/blob/c2d07a0f117de6144105de8599f620c34713d251/LICENSE|title=LICENSE|work=GitHub|date=2015-03-26|accessdate=2015-12-21}}</ref>
| developer = LearnBoost ({{Start date|2011|03|29}} - {{Start date|2015|03|26}}) / Automattic ({{Start date|2015|03|26}} - Present)<ref>{{cite web|url=https://github.com/stylus/stylus/blob/c2d07a0f117de6144105de8599f620c34713d251/LICENSE|title=LICENSE|work=GitHub|date=2015-03-26|access-date=2015-12-21}}</ref>
| latest_release_version = 0.53.0<ref>{{cite web|url=https://github.com/stylus/stylus/releases/tag/0.53.0|title=Release 0.53.0|work=GitHub|date=2015-12-14|accessdate=2015-12-21}}</ref>
| latest_release_version = 0.63.0<ref>{{cite web|url=https://github.com/stylus/stylus/releases|title=Release Notes|work=GitHub|date=2024-03-05|access-date=2021-04-06}}</ref>
| latest_release_date = {{Start date and age|2015|12|14}}<ref name="history">{{cite web|url=https://github.com/stylus/stylus/blob/dev/History.md|title=History|work=GitHub|date=2015-12-21|accessdate=2015-12-21}}</ref>
| latest_release_date = {{Start date and age|2024|03|05}}
| typing = [[Dynamic typing|dynamic]]
| typing = [[Dynamic typing|dynamic]]
| influenced_by = [[CSS]], [[Sass (stylesheet language)|Sass]], [[LESS (stylesheet language)|LESS]]
| influenced_by = [[CSS]], [[Sass (style sheet language)|Sass]], [[Less (style sheet language)|Less]]
| influenced =
| influenced =
| operating_system = [[Cross-platform]]
| operating_system = [[Cross-platform]]
| license = [[MIT License]]
| license = [[MIT License]]
| website = [http://stylus-lang.com Stylus]
| website = [http://stylus-lang.com Stylus] ([https://github.com/stylus/stylus Github])
| file_ext = .styl
| file_ext = <code>.styl</code>
}}
}}
'''Stylus''' is a dynamic stylesheet [[preprocessor]] language that is compiled into [[Cascading Style Sheets]] (CSS). Its design is influenced by [[Sass (stylesheet language)|Sass]] and [[LESS (stylesheet language)|LESS]]. It's regarded as the fourth most used CSS preprocessor syntax.<ref name="doc">[http://css-tricks.com/poll-results-popularity-of-css-preprocessors/ Poll Results: Popularity of CSS Preprocessors]</ref> It was created by TJ Holowaychuk, a former programmer for [[Node.js]] and the creator of the Luna language. It is written in [[JADE (programming language)|JADE]] and [[Node.js]].
'''Stylus''' is a dynamic stylesheet [[preprocessor]] language that is compiled into [[Cascading Style Sheets]] (CSS). Its design is influenced by [[Sass (style sheet language)|Sass]] and [[Less (style sheet language)|Less]]. It is regarded as the fourth most used CSS preprocessor syntax.<ref name="doc">[http://css-tricks.com/poll-results-popularity-of-css-preprocessors/ Poll Results: Popularity of CSS Preprocessors]</ref> It was created by TJ Holowaychuk, a former programmer for [[Node.js]] and the creator of the [[Luna (programming language)|Luna]] language. It is written in [[JADE (programming language)|JADE]] and [[Node.js]].


== Selectors ==
== Selectors ==
Unlike CSS, which uses [[Bracket#Curly brackets|braces]] to open and close declaration blocks, indentation is used. Additionally, semi-colons (;) are optionally omitted. Hence, the following CSS:
Unlike CSS, which uses [[Bracket#Curly brackets|braces]] to open and close declaration blocks, indentation is used. Additionally, semi-colons (;) are optionally omitted. Hence, the following CSS:
<source lang="css">
<syntaxhighlight lang="css">
body {
body {
color: white;
color: white;
}
}
</source>
</syntaxhighlight>
can be shortened to:
can be shortened to:
<source lang="css">
<syntaxhighlight lang="css">
body
body
color: white
color: white
</syntaxhighlight>
</source>
Further, colons (:) and commas (,) are also optional; that means the above can be written as,
Further, colons (:) and commas (,) are also optional; that means the above can be written as,
<source lang="css">
<syntaxhighlight lang="css">
body
body
color white
color white
</syntaxhighlight>
</source>


== Variables ==
== 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 (programming language)|Python]].
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 (programming language)|Python]].
<source lang="css">
<syntaxhighlight lang="css">
message = 'Hello, World!'
message = 'Hello, World!'


Line 45: Line 46:
color #ffffff
color #ffffff


</syntaxhighlight>
</source>


The Stylus compiler would translate the above document to:
The Stylus compiler would translate the above document to:


<source lang="css">
<syntaxhighlight lang="css">
div::before {
div::before {
content: 'Hello, World!';
content: 'Hello, World!';
color: #ffffff;
color: #ffffff;
}
}
</syntaxhighlight>
</source>


== Mixins and functions ==
== Mixins and functions ==
Line 61: Line 62:
For example, if you wanted to define the CSS border radius property without having to use various [[Cascading Style Sheets#Browser support|Vendor Prefixes]] you can create:
For example, if you wanted to define the CSS border radius property without having to use various [[Cascading Style Sheets#Browser support|Vendor Prefixes]] you can create:


<source lang="css">
<syntaxhighlight lang="css">
border-radius(n)
border-radius(n)
-webkit-border-radius n
-webkit-border-radius n
-moz-border-radius n
-moz-border-radius n
border-radius n
border-radius n
</syntaxhighlight>
</source>


then, to include this as a mixin, you would reference it as:
then, to include this as a mixin, you would reference it as:


<source lang="css">
<syntaxhighlight lang="css">
div.rectangle
div.rectangle
border-radius(10px)
border-radius(10px)
</syntaxhighlight>
</source>


this would compile to:
this would compile to:


<source lang="css">
<syntaxhighlight lang="css">
div.rectangle {
div.rectangle {
-webkit-border-radius: 10px;
-webkit-border-radius: 10px;
Line 83: Line 84:
border-radius: 10px;
border-radius: 10px;
}
}
</syntaxhighlight>
</source>


== Interpolation ==
== Interpolation ==
To include variables in arguments and identifiers, brace characters surround the variable(s). For example, <source lang="css"> -webkit-{'border' + '-radius'} </source> evaluates to <source lang="css">-webkit-border-radius</source>
To include variables in arguments and identifiers, brace characters surround the variable(s). For example, <syntaxhighlight lang="css"> -webkit-{'border' + '-radius'} </syntaxhighlight> evaluates to <syntaxhighlight lang="css">-webkit-border-radius</syntaxhighlight>


== References ==
== References ==
Line 94: Line 95:
* {{Official website|http://stylus-lang.com/}}
* {{Official website|http://stylus-lang.com/}}
* [https://github.com/stylus/stylus Stylus source code repository (Git)]
* [https://github.com/stylus/stylus Stylus source code repository (Git)]
* [https://github.com/stylus/stylus/blob/master/docs/compare.md Source code comparison with Sass/SCSS and LESS]
* [https://github.com/stylus/stylus/blob/master/docs/compare.md Source code comparison with Sass/SCSS and Less]
* [https://codebeautify.org/stylus-compiler Online Stylus compiler]


{{Stylesheet languages}}
{{Stylesheet languages}}


{{DEFAULTSORT:Stylus (Stylesheet Language)}}
{{DEFAULTSORT:Stylus (Style sheet Language)}}
[[Category:Computer-related introductions in 2010]]
[[Category:Computer-related introductions in 2010]]
[[Category:Free computer libraries]]
[[Category:Free computer libraries]]
Line 104: Line 106:
[[Category:Stylesheet languages]]
[[Category:Stylesheet languages]]



{{software-stub}}
{{Prog-lang-stub}}

Latest revision as of 05:31, 20 April 2024

Stylus
Designed byTJ Holowaychuk
DeveloperLearnBoost (March 29, 2011 (2011-03-29) - March 26, 2015 (2015-03-26)) / Automattic (March 26, 2015 (2015-03-26) - Present)[1]
First appeared2010; 15 years ago (2010)
Stable release
0.63.0[2] / March 5, 2024; 9 months ago (2024-03-05)
Typing disciplinedynamic
OSCross-platform
LicenseMIT License
Filename extensions.styl
WebsiteStylus (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.

Selectors

[edit]

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

[edit]

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

[edit]

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

[edit]

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

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

evaluates to 

-webkit-border-radius

References

[edit]
  1. ^ "LICENSE". GitHub. 2015-03-26. Retrieved 2015-12-21.
  2. ^ "Release Notes". GitHub. 2024-03-05. Retrieved 2021-04-06.
  3. ^ Poll Results: Popularity of CSS Preprocessors
[edit]


Stub icon

This programming-language-related article is a stub. You can help Wikipedia by expanding it.

Retrieved from "https://en.wikipedia.org/enwiki/w/index.php?title=Stylus_(style_sheet_language)&oldid=1219844935"