-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathaprende-sass.html
345 lines (317 loc) · 15.2 KB
/
aprende-sass.html
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
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!DOCTYPE html>
<html lang="es-ES">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta
name="viewport"
content="width=device-width,
initial-scale=1.0"
/>
<link rel="stylesheet" href="css/estilos.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link href="fonts/Niconne.ttf" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" />
<title>Aprender Sass</title>
</head>
<body>
<header>
<a href="index.html" title="Como aprender Sass"><h1>Aprende Sass</h1></a>
</header>
<article class="container">
<section>
<p>
Antes de que puedas empezar a usar Sass, necesitas instalarlo.
<a
href="instalar-sass.html" title="Instalar Sass"
title="Como instalar Sass"
>En este enlace</a
>
puedes aprender a instalar Sass si todavía no sabes como hacerlo.
</p>
<p>
Como puedes ver a continuación, son pocos los conceptos (en total
ocho) que tendrás que aprender para saber utilizar Sass. Si ya sabes
CSS no tendrás ningún problema a la hora de aprender la mayoría de
estos conceptos.
</p>
<p>
Los tres últimos (Mixins, Extend/Inheritance y los Operadores) puede
que te cuesten un poco más. Si ya sabes Javascript o algún otro
lenguaje de programación, te será también más sencillo entender como
funcionan las variables y las funciones.
</p>
<p>
No te preocupes si al principio no eres capaz de entenderlo todo,
empieza por lo sencillo y sigue practicando hasta que tus archivos
CSS esten lo mas legibles posible.
</p>
</section>
<section>
<button class="accordion">PREPROCESADO</button>
<div class="panel">
<p>
Sass es un preprocesador que se utiliza porque las hojas de estilo
CSS por sí solas pueden llegar a ser muy grandes y complejas, lo
que hace que sean más difíciles de mantener. Sass tiene algunas
características que aún no existen en CSS como pueden ser la
anidación, los mixins o la herencia entre otros. Sass permite
escribir un CSS más robusto y mantenible.
</p>
<p>
El código Sass que escribas se guardará también como archivo .css
junto a otro archivo con extension css.map que se necesita para
poder procesar bien el código Sass. Al final tendrás algo parecido
a esto:
</p>
<img
class="pictures"
src="public/sass_estructura.jpg"
title="Estructura de un
archivo Sass"
/>
<p>
Al guardar el archivo .sass (o .scss) este creará automáticamente
los archivos css necesarios en la carpeta que hayamos especificado
siempre y cuando estés utilizando VSCode con la extensión Live
Sass Compiler, de lo contrario tendrás que hacer este proceso
desde la terminal A continuación te explico como:
</p>
<p>
Puedes compilar tu Sass a CSS usando el comando sass en la
terminal. Tendrás qué indicar que archivo construir y dónde para
generar el CSS. Por ejemplo, si escribes sass input.scss
output.css en tu terminal, el archivo input.scss se compilará en
el archivo output.css.
</p>
<blockquote>sass input.scss output.css</blockquote>
</div>
</section>
<section>
<button class="accordion">VARIABLES</button>
<div class="panel">
<p>
Las variables en Sass te sirven como una forma de almacenar
información que deseas volver a utilizar en tu hoja de estilo. De
esta forma puedes guardar en variables información como colores,
fuentes, tamaños y cualquier otro valor de CSS que pienses que vas
a reutilizar. Para guardar una variable se utiliza el símbolo $
seguido del nombre que queremos poner a esa variable y después el
valor que tendrá esa variable. Por ejemplo:
</p>
<blockquote>
$font-stack: Helvetica, sans-serif;<br />
$primary-color: #333;<br /><br />
body {<br /><br />
font: 100% $font-stack;<br />
color: $primary-color;<br /><br />
}
</blockquote>
<p>
Cuando el código Sass es procesado, toma las variables que
definimos en $font-stack y $primary-color y las añade al CSS. Esto
resulta muy útil si por ejemplo quisieramos cambiar el color de
nuestra marca. En lugar de cambiar uno por uno todos los valores
que contengan ese color, nos bataría con cambiar la variable y
automáticamente cambiarán todas las propiedades que contengan
dicho color.
</p>
</div>
</section>
<section>
<button class="accordion">ANIDACIONES</button>
<div class="panel">
<p>
HTML tiene una jerarquía visual y anidada muy clara, algo que no
tiene CSS, pero con Sass puedes anidar selectores CSS con la misma
jerarquía visual de HTML de la siguiente manera:
</p>
<blockquote>
nav {<br /><br />
ul {<br />
margin: 0;<br />
padding: 0;<br />
list-style: none;<br /><br />
}<br /><br />
li { <br /><br />
display: inline-block; }<br /><br />
a {<br /><br />
display: block;<br />
padding: 6px 12px;<br />
text-decoration: none;<br /><br />
}<br />
}
</blockquote>
<p>
En este código de ejemplo puedes comprobar como los selectores
'ul', 'li' y 'a' están anidados dentro del selector 'nav'. Es una
forma de ordenar mejor tu código CSS y hacerlo más legible.
</p>
<p>
No obstante, cabe tener en cuenta que demasiadas anidaciones darán
como resultado un CSS que podría resultar difícil de mantener y
por lo general se considera una mala práctica. Lo recomendable es
no tener que utilizar más de tres anidaciones.
</p>
</div>
</section>
<section>
<button class="accordion">PARCIALES</button>
<div class="panel">
<p>
Puedes crear archivos de Sass parciales que contengan pequeños
fragmentos de código CSS para después usarlos en el archivo
principal. Esta es una manera de modularizar el código CSS y
mantenerlo mas sencillo.
</p>
<p>
Un parcial es un archivo Sass al que se le pone un nombre que
empieza con un guión bajo: '_'. Por ejemplo: _parcial.scss. El
guión bajo al comienzo del nombre de archivo permite a Sass saber
que el archivo se trata de un parcial. Los parciales de Sass se
usan escribiendo @use _parcial.
</p>
</div>
</section>
<section>
<button class="accordion">MODULOS</button>
<div class="panel">
<p>
Como ya has visto antes, con los parciales no es necesario que
escribas todo el código en un único archivo. Puedes dividirlo en
distintos archivos y utilizarlo siempre que quieras con @use. Lo
que hace @use es cargar ese otro archivo Sass como un modulo, lo
que significa que puedes referir todas sus variables o funciones.
Después todo se compilará en un único archivo Css, pero tu código
se verá mas limpio y estructurado.
</p>
<p>
Por ejemplo, imagina que tienes que escribir todos los estilos
para un Slider. Podrías escribir todo este código en un archivo a
parte de nombre _slider.scss y después referirlo con @use 'slider'
(no necesitas escribir la extensión .scss).
</p>
<blockquote>
// _base.scss<br />
$font-stack: Helvetica, sans-serif;<br />
$primary-color: #333;<br /><br />
body {<br /><br />
font: 100% $font-stack;<br />
color: $primary-color;<br /><br />
}
</blockquote>
<blockquote>
// styles.scss<br />
@use 'base';<br /><br />
.inverse {<br /><br />
background-color: base.$primary-color;<br />
color: white;<br /><br />
}
</blockquote>
</div>
</section>
<section>
<button class="accordion">MIXINS</button>
<div class="panel">
<p>
Some things in CSS are a bit tedious to write, especially with
CSS3 and the many vendor prefixes that exist. A mixin lets you
make groups of CSS declarations that you want to reuse throughout
your site. It helps keep your Sass very DRY. You can even pass in
values to make your mixin more flexible. Here's an example for
theme.
</p>
<blockquote>
@mixin theme($theme: DarkGray) { background: $theme; box-shadow: 0
0 1px rgba($theme, .25); color: #fff; } .info { @include theme; }
.alert { @include theme($theme: DarkRed); } .success { @include
theme($theme: DarkGreen); }
</blockquote>
<p>
To create a mixin you use the @mixin directive and give it a name.
We've named our mixin theme. We're also using the variable $theme
inside the parentheses so we can pass in a theme of whatever we
want. After you create your mixin, you can then use it as a CSS
declaration starting with @include followed by the name of the
mixin.
</p>
</div>
</section>
<section>
<button class="accordion">EXTEND/INHERITANCE</button>
<div class="panel">
<p>
Using @extend lets you share a set of CSS properties from one
selector to another. In our example we're going to create a simple
series of messaging for errors, warnings and successes using
another feature which goes hand in hand with extend, placeholder
classes. A placeholder class is a special type of class that only
prints when it is extended, and can help keep your compiled CSS
neat and clean.
</p>
<blockquote>
/* This CSS will print because %message-shared is extended. */
%message-shared { border: 1px solid #ccc; padding: 10px; color:
#333; } // This CSS won't print because %equal-heights is never
extended. %equal-heights { display: flex; flex-wrap: wrap; }
.message { @extend %message-shared; } .success { @extend
%message-shared; border-color: green; } .error { @extend
%message-shared; border-color: red; } .warning { @extend
%message-shared; border-color: yellow; }
</blockquote>
<p>
What the above code does is tells .message, .success, .error, and
.warning to behave just like %message-shared. That means anywhere
that %message-shared shows up, .message, .success, .error, &
.warning will too. The magic happens in the generated CSS, where
each of these classes will get the same CSS properties as
%message-shared. This helps you avoid having to write multiple
class names on HTML elements.
</p>
<p>
You can extend most simple CSS selectors in addition to
placeholder classes in Sass, but using placeholders is the easiest
way to make sure you aren't extending a class that's nested
elsewhere in your styles, which can result in unintended selectors
in your CSS.
</p>
<p>
Note that the CSS in %equal-heights isn't generated, because
%equal-heights is never extended.
</p>
</div>
</section>
<section>
<button class="accordion">OPERADORES</button>
<div class="panel">
<p>
Poder hacer operaciones matemáticas en tu CSS resulta muy útil. Sass usa operadores estándar como la suma (+), la resta (-), la multiplicación (*), la división (math.div()) y los porcentajes (%).
</p>
<blockquote>
@use "sass:math";<br><br> .container { <br><br>display: flex;<br><br> }<br><br>
article[role="main"] {<br><br> width: math.div(600px, 960px) * 100%;<br><br> }<br><br>
aside[role="complementary"] {<br><br> width: math.div(300px, 960px) *
100%;<br> margin-left: auto;<br><br> }
</blockquote>
</div>
</section>
</article>
<!-- INICIO FOOTER -->
<footer class="main-footer">
<div class="footer-section">
<h2 class="footer-title">Acerca de</h2>
<p class="footer-txt">En esta página puedes <b>aprender a usar el preprocesador Sass</b> de una manera muy fácil y rápida. Si no sabes como instalar Sass, te recomiendo ir a esta sección primero y después a esta otra para empezar a aprender los conceptos del preprocesador Sass.
</p>
</div>
<div class="footer-section">
<h2 class="footer-title">Links</h2>
<p class="footer-txt"><a href="index.html" class="footer-link">Inicio</a></p>
<p class="footer-txt"><a href="instalar-sass.html" class="footer-link">Instalación Sass</a></p>
<p class="footer-txt"><a href="aprende-sass.html" class="footer-link">Tutorial Sass</a></p>
<p class="footer-txt"><a href="faq.html" class="footer-link">FAQ</a></p>
</div>
</footer>
<!-- FIN FOOTER -->
<script src="js/accordion.js"></script>
</body>
</html>