Diferencias

Muestra las diferencias entre dos versiones de la página.

--- clase:daw:diw:sass [2026/10/24 00:05] – Compilar SASS sin Angular y ficheros parciales (_); styles.scss -> main.scss claude
+++ clase:daw:diw:sass [2026/10/24 00:06] (actual) – Quitar «Compilar SASS»: va en el tema de estructura de carpetas claude
@@ Línea 22: / Línea 22: @@
 Curso de SASS:
   * [[https://www.chucksacademy.com/es/topic/css-preprocessors|Preprocesadores de CSS]]
-===== Compilar SASS =====
-El navegador no entiende SASS: hay que compilar los ''.scss'' a CSS. En Angular lo hace ''ng serve'' solo; sin Angular se usa el paquete ''sass'' de npm.
-  * Instalar SASS en el proyecto:
-<sxh bash>
-npm install --save-dev sass
-</sxh>
-  * Compilar la carpeta ''scss'' en la carpeta ''css''. Con ''--watch'' se vuelve a compilar cada vez que guardas un ''.scss'':
-<sxh bash>
-npx sass --watch scss:css
-</sxh>
-  * Enlazar en el HTML el CSS generado, que es solo ''main.css'' (ver [[#ficheros_parciales|Ficheros parciales]]):
-<sxh html>
-<link rel="stylesheet" href="css/main.css">
-</sxh>
-<note important>
-Enlazar ''main.scss'' en el HTML no aplica ningún estilo. Y ''css/main.css'' no se edita a mano: la siguiente compilación lo sobrescribe y se pierde lo que hayas cambiado.
-</note>
 ===== Variables =====
@@ Línea 620: / Línea 597: @@
 Todos los ficheros SASS empiezan por ''_'' (''_colores.scss'', ''_index.scss'', ''_c-panel.scss'') excepto el que lo une todo, ''main.scss''.
-Los ficheros que empiezan por ''_'' son //parciales//: SASS no genera un CSS para ellos, solo se cargan desde otro con ''@use'' o ''@forward''. Así, al compilar la carpeta con ''npx sass --watch scss:css'' sale un único ''css/main.css'' con todo, que es el que se enlaza en el HTML.
+Los ficheros que empiezan por ''_'' son //parciales//: SASS no genera un CSS para ellos, solo se cargan desde otro con ''@use'' o ''@forward''. Así, al compilar la carpeta con ''npx sass --watch scss:css'' sale un único ''css/main.css'' con todo, que es el que se enlaza en el HTML (ver [[clase:daw:diw:sistema-diseno-estructura-carpetas#proyecto_sin_angular|Sistema de diseño: Estructura de carpetas]]).
 <note warning>