1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
|
---
language: stylus
filename: learnStylus-pt.styl
contributors:
- ["Salomão Neto", "https://github.com/salomaosnff"]
- ["Isaac Henrique", "https://github.com/Isaachi1"]
lang: pt-br
---
Stylus tem como propósito, adicionar funcionalidades às suas folhas de estilos CSS que te ajudam no desenvolvimento, sem que haja a quebra de compartibilidade entre os navegadores Web.
Entre elas estão variáveis, aninhamento, mixins, funções e muito mais.
A sintaxe do Stylus é muito flexivel podendo utilizar a sintaxe padrão do CSS e deixando opcional o ponto e vírgula (;), dois pontos (:) e até mesmo as chaves ({ e }), tornando assim o seu código ainda mais legível.
Stylus não fornece novas opções de estilos, mas dá funcionalidades que permitem deixar seu CSS muito mais dinâmico.
```scss
/* Estilo de código
==============================*/
/* As chaves, ponto e vírgula, e dois pontos são opcionais no Stylus. */
body {
background: #000;
}
body {
background: #000
}
body {
background #000
}
body
background #000
body
background: #000;
body
background: #000
// Comentários de linha única são removidos quando Stylus é compilado para CSS.
/* Comentários multi-line são preservados. */
/* Seletores
==============================*/
/* Selecionando elementos dentro de outro elemento */
body {
background: #000000;
h1 {
color: #FF0000;
}
}
/* Ou se preferir... */
body
background #000000
h1
color #FF0000
/* Obtendo a referência do elemento pai
==============================*/
a {
color: #0088dd;
&:hover {
color: #DD8800;
}
}
/*Variáveis
==============================*/
/*
É possível armazenar um valor CSS (tais como a cor) de uma variável.
Embora seja opcional, é recomendado adicionar $ antes de um nome de variável
para que você possa distinguir uma variável de outro valor CSS.
*/
$primary-color = #A3A4FF
$secondary-color = #51527F
$body-font = 'Roboto', sans-serif
/* Você pode usar as variáveis em toda a sua folha de estilo.
Agora, se você quer mudar a cor, você só tem que fazer a mudança uma vez. */
body
background-color $primary-color
color $secondary-color
font-family $body-font
/* Quando compilar ficaria assim: */
body {
background-color: #A3A4FF;
color: #51527F;
font-family: 'Roboto', sans-serif;
}
/ *
Este é muito mais fácil de manter do que ter de mudar a cor
cada vez que aparece em toda a sua folha de estilo.
* /
/*Mixins
==============================*/
/* Se você achar que você está escrevendo o mesmo código para mais de um
elemento, você pode querer armazenar esse código em um mixin.
center()
display block
margin-left auto
margin-right auto
left 0
right 0
/* Utilizando um mixin */
body {
center()
background-color: $primary-color
}
/* Apoś compilar ficaria assim: */
div {
display: block;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
background-color: #A3A4FF;
}
/* Você pode usar mixins para criar uma propriedade estenográfica. */
size($width, $height)
width $width
height $height
.rectangle
size(100px, 60px)
.square
size(40px, 40px)
/* Você pode usar um mixin como uma propriedade CSS. */
circle($ratio)
width $ratio * 2
height $ratio * 2
border-radius $ratio
.ball
circle 25px
/* Interpolação
==============================*/
vendor(prop, args)
-webkit-{prop} args
-moz-{prop} args
{prop} args
border-radius()
vendor('border-radius', arguments)
box-shadow()
vendor('box-shadow', arguments)
button
border-radius 1px 2px / 3px 4px
/* Funções
==============================*/
/* Funções no Stylus permitem fazer uma variedade de tarefas, como por exemplo, menipular algum dado. */
body {
background darken(#0088DD, 50%) // Escurece a cor #0088DD em 50%
}
/** Criando sua própria função */
somar(a, b)
a + b
body
padding somar(10px, 5)
/* Condições
==============================*/
comparar(a, b)
if a > b
maior
else if a < b
menor
else
igual
comparar(5, 2) // => maior
comparar(1, 5) // => menor
comparar(10, 10) // => igual
/* Iterações
==============================*/
/**
Sintaxe de laço de repetição for:
for <val-name> [, <key-name>] in <expression>
**/
for $item in (1..2) /* Repete o bloco 12 vezes */
.col-{$item}
width ($item / 12) * 100% /* Calcula a largula pelo número da coluna*
```
Agora que você conhece um pouco sobre esse poderoso pré-processador de CSS, você está pronto para criar folhas de estilos mais dinâmicas. Para aprofundar seus conhecimentos visite a documentação oficial do stylus em http://stylus-lang.com.
|
