Stylus is a dynamic stylesheet preprocessor language that is compiled into CSS. It aims to add functionality to CSS without breaking compatibility across web browsers. It does this using variables, nesting, mixins, functions and more.
Stylus syntax is very flexible. You can use standard CSS syntax and leave the semicolon (;), colon (:) and even the ({) and (}) optional, making your code even more readable.
Stylus does not provide new style options, but gives functionality that lets you make your CSS much more dynamic.
1/* Code style
2==============================*/
3
4/* Keys, semicolon, and colon are optional in Stylus. */
5
6body {
7 background: #000;
8}
9
10body {
11 background: #000
12}
13
14body {
15 background #000
16}
17
18body
19 background #000
20
21body
22 background: #000;
23
24body
25 background: #000
26
27// Single-line comments are removed when Stylus is compiled into CSS.
28
29/* Multi-line comments are preserved. */
30
31
32/* Selectors
33==============================*/
34
35/* Selecting elements within another element */
36body {
37 background: #000000;
38 h1 {
39 color: #FF0000;
40 }
41}
42
43/* Or if you prefer... */
44body
45 background #000000
46 h1
47 color #FF0000
48
49
50/* Getting parent element reference
51==============================*/
52a {
53 color: #0088dd;
54 &:hover {
55 color: #DD8800;
56 }
57}
58
59
60/* Variables
61==============================*/
62
63
64/*
65 You can store a CSS value (such as the color) of a variable.
66 Although it is optional, it is recommended to add $ before a variable name
67 so you can distinguish a variable from another CSS value.
68*/
69
70$primary-color = #A3A4FF
71$secondary-color = #51527F
72$body-font = 'Roboto', sans-serif
73
74/* You can use variables throughout your style sheet.
75Now, if you want to change the color, you only have to make the change once. */
76
77body
78 background-color $primary-color
79 color $secondary-color
80 font-family $body-font
81
82/* After compilation: */
83body {
84 background-color: #A3A4FF;
85 color: #51527F;
86 font-family: 'Roboto', sans-serif;
87}
88
89/ *
90This is much easier to maintain than having to change color
91each time it appears throughout your style sheet.
92* /
93
94
95/* Mixins
96==============================*/
97
98/* If you find that you are writing the same code for more than one
99element, you may want to store that code in a mixin.
100
101center()
102 display block
103 margin-left auto
104 margin-right auto
105 left 0
106 right 0
107
108/* Using the mixin */
109body {
110 center()
111 background-color: $primary-color
112}
113
114/* After compilation: */
115div {
116 display: block;
117 margin-left: auto;
118 margin-right: auto;
119 left: 0;
120 right: 0;
121 background-color: #A3A4FF;
122}
123
124/* You can use mixins to create a shorthand property. */
125
126size($width, $height)
127 width $width
128 height $height
129
130.rectangle
131 size(100px, 60px)
132
133.square
134 size(40px, 40px)
135
136/* You can use a mixin as a CSS property. */
137circle($ratio)
138 width $ratio * 2
139 height $ratio * 2
140 border-radius $ratio
141
142.ball
143 circle 25px
144
145
146/* Interpolation
147==============================*/
148
149vendor(prop, args)
150 -webkit-{prop} args
151 -moz-{prop} args
152 {prop} args
153
154border-radius()
155 vendor('border-radius', arguments)
156
157box-shadow()
158 vendor('box-shadow', arguments)
159
160button
161 border-radius 1px 2px / 3px 4px
162
163
164/* Functions
165==============================*/
166
167/* Functions in Stylus allow you to perform a variety of tasks, such as recalling some data. */
168
169body {
170 background darken(#0088DD, 50%) // Dim color #0088DD by 50%
171}
172
173/* Creating your own function */
174add(a, b)
175 a + b
176
177body
178 padding add(10px, 5)
179
180
181/* Conditions
182==============================*/
183compare(a, b)
184 if a > b
185 bigger
186 else if a < b
187 smaller
188 else
189 equal
190
191compare(5, 2) // => bigger
192compare(1, 5) // => smaller
193compare(10, 10) // => equal
194
195
196/* Iterations
197==============================*/
198
199/*
200Repeat loop syntax for:
201for <val-name> [, <key-name>] in <expression>
202*/
203
204for $item in (1..2) /* Repeat block 12 times */
205 .col-{$item}
206 width ($item / 12) * 100% /* Calculate row by column number */
Now that you know a little about this powerful CSS preprocessor, you’re ready to create more dynamic style sheets. To learn more, visit the official stylus documentation at stylus-lang.com.