Diferencias

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

--- clase:daw:diw:sass [2026/10/23 22:55] – Reorganización del módulo: página nueva 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]]
 ===== Variables =====
@@ Línea 499: / Línea 498: @@
-<sxh scss;title:styles.scss>
+<sxh scss;title:main.scss>
 @use 'colores';
@@ Línea 515: / Línea 514: @@
 Si quieres usar las variables directamente sin el prefijo, puedes añadir la opción as *:
-<sxh scss;highlight: [1,4,8];title:styles.scss>
+<sxh scss;highlight: [1,4,8];title:main.scss>
 @use 'colores' as *;
@@ Línea 528: / Línea 527: @@
 <note tip>
-Los ficheros que solo tienen variables, funciones o mixins empiezan por ''_'' (''_colores.scss''). Al usarlos se pone el nombre sin ''_'' ni ''.scss''.
+Al usar un fichero se pone su nombre sin ''_'' ni ''.scss''. Por qué empieza por ''_'' está en [[#ficheros_parciales|Ficheros parciales]].
 </note>
@@ Línea 546: / Línea 545: @@
   │   ├─ _mixins.scss
   │   └─ _index.scss
-  └─ styles.scss
+  └─ main.scss
 </sxh>
@@ Línea 580: / Línea 579: @@
-<sxh sass;title:styles.scss>
+<sxh sass;title:main.scss>
 @use 'estilos';
@@ Línea 594: / Línea 593: @@
 </note>
+===== Ficheros parciales =====
+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 (ver [[clase:daw:diw:sistema-diseno-estructura-carpetas#proyecto_sin_angular|Sistema de diseño: Estructura de carpetas]]).
+<note warning>
+Si un fichero no empieza por ''_'', SASS genera también su propio CSS: un ''colores.css'' vacío o un ''c-panel.css'' con el mismo CSS que ya está dentro de ''main.css''. La carpeta ''css'' se llena de ficheros que no se usan y no se sabe cuál hay que enlazar.
+</note>
 ===== Ejercicios =====
@@ Línea 723: / Línea 731: @@
   * ''_mixins.scss'': Los mixins ''elevacion'' y ''desde''.
   * ''_index.scss'': Con los ''@forward''.
-  * ''styles.scss'': Que lo use todo con un único ''@use''.
+  * ''main.scss'': Que lo use todo con un único ''@use''.