-
Notifications
You must be signed in to change notification settings - Fork 0
/
instalar-sass.html
95 lines (70 loc) · 5.07 KB
/
instalar-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
<!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>Como instalar Sass</title>
</head>
<body>
<header>
<a href="index.html" title="Como aprender Sass"><h1>Aprende Sass</h1></a>
</header>
<article class="container">
<section>
<h2>Como instalar Sass</h2>
<p> Puedes instalar Sass en Windows, Mac o Linux descargando el package para tu sistema operativo desde <a href="https://github.com/sass/dart-sass/releases/tag/1.43.4">GitHub</a> y añadiendolo a tu PATH (explicado más abajo).</p>
<p>También puedes instalar Sass mediante Node.js a través del siguiente comando en la terminal:</p>
<blockquote>npm install -g sass</blockquote>
<p>Si usas VS Code, es muy recomendable descargar la extensión <em>Live Sass Compiler</em>. Con esta extensión podrás empezar a trabajar en archivos Sass/Scss y automáticamente se encargará de compilar estos archivos en archivos CSS sin necesidad de utilizar la línea de comandos.</p>
<h2>PATH</h2>
<p><em>PATH</em> es un concepto importante cuando se trabaja desde la línea de comando. Es una lista de directorios que le dice a tu sistema operativo donde buscar programas, de forma que puedas escribir <em>script</em> en lugar de <em>/home/me/bin/script</em> o <em>C:\Users\Me\bin\script</em>. Segúnn el sistema operativo, la forma en que podemos añadir un nuevo directorio varia:</p>
<h2>Windows</h2>
<ol>
<li>En Windows, entra en el panel de control y ve a Sistema.</li>
<li>Desde aquí ve al apartado de "Acerca de" de tu ordenador.</li>
<li>Haz click en "Configuración avanzada del sistema" situado en la parte derecha. Se abrirá una nueva ventana.</li>
<li>En esta nueva ventana, en la pestaña opciones avanzadas verás abajo del todo un boton que se llama "Variables de entorno...". Haz click en él.</li>
<li>Encuentra la variable <em>PATH</em>, seleccionala y haz click en editar. Si no existiera crea una "Nueva..."</li>
<li>Añade tu directorio al principio de la variable seguido de un <em>;</em> (semicolon). Por ejemplo, si el valor era <em>"C:\Windows\System32"</em> cambialo a <em>"C:\Users\Me\bin;C:\Windows\System32"</em>.</li>
<li>Por último, haz click en "OK" y reinicia tu terminal.</li>
</ol>
<h2>Mac OS X</h2>
<ol>
<li>Abre el archivo <em>.bash_profile</em> en tu directorio principal (por ejemplo, <em>/Usuario/tu-nombre-de-usuario/.bash_profile)</em> en un editor de texto.</li>
<li>Añade <em>export PATH="tu-directorio:$PATH"</em> en la última línea del archivo, donde "tu-directorio"" es el directorio que quieres añadir.</li>
<li> Guarda el archivo <em>.bash_profile</em>.</li>
<li>Reinicia tu terminal.</li>
</ol>
<h2>Linux</h2>
<ol>
<li>Abre el archivo <em>.bashrc</em> en tu directorio principal (por ejemplo, <em>/Usuario/tu-nombre-de-usuario/.bashrc)</em> en un editor de texto.</li>
<li>Añade <em>export PATH="tu-directorio:$PATH"</em> en la última línea del archivo, donde "tu-directorio"" es el directorio que quieres añadir.</li>
<li>Guarda el archivo <em>.bashrc</em>.</li>
<li>Reinicia tu terminal.</li>
</ol>
<p>Una vez instalado Sass, <a href="aprende-sass.html" title="Aprender Sass">te recomiendo leer este tutorial</a> para aprender todo lo que necesitas saber sobre este preprocesador de CSS.</p>
</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 -->
</body>
</html>