Vamos finalmente a unificar todo y crear la arquitectura definitiva que vamos a usar en clase. La carpeta del SASS es la misma con Angular y sin él; lo que cambia es dónde va y cómo se compila.

Para crear una buena arquitectura vamos a hacer lo siguiente:

• Indicar a Angular que el proyecto es en Español
• Usar Angular Material
• Crear el CSS común a todo el proyecto
• Crear los Componentes reusables de Angular
• Crear las páginas del proyecto

Si el proyecto es HTML, CSS y JavaScript sin Angular, ver Proyecto sin Angular.

En un proyecto Angular la estructura queda así:

src/app/scss
    /01_utilities
    /02_base
    /03_global
    /04_components
    main.scss
src/app/components/ui
    /c-button
    /c-panel
src/app/components/paginas
   /main
   /productos
   /login

Véase: establecer_el_idioma_y_moneda

Véase: anadir_angular_material

Se tiene que crear la carpeta src/app/scss donde irá todo nuestro SASS. El fichero que contendrá todo el SASS es src/app/scss/main.scss

En el fichero styles.scss añadir la linea siguiente para que Angular sepa donde está nuestro SASS:

@use './app/scss/main.scss' as *;

Dentro de la carpeta src/app/scss , habrá la siguiente estructura de ficheros:

  src/app/scss
     /01_utilities
        _variables.scss
        _functions.scss
        _mixins.scss
        _index.scss

    /02_base
        _tokens.scss
        _reset.scss
        _typography.scss
        _index.scss


    /03_global
        _cada_uno_de_los_modificadores_globales.scss
        _index.scss


    /04_components
        _cada_uno_de_los_componentes.scss
        _index.scss        

         
    main.scss

La explicación de cada carpeta es la siguiente:

• /01_utilities
  • _variables.scss: Variables de SASS del sistema: las listas y mapas $colores, $font-sizes, $margins, $paddings, $breakpoints… de los temas de Tokens y Globales. Solo tiene variables: no genera CSS.
  • _functions.scss: Funciones de SASS
  • _mixins.scss: Mixins de SASS
  • _index.scss: Los imports de cada fichero de esta carpeta.

@forward "./_variables.scss";
@forward "./_functions.scss";
@forward "./_mixins.scss";

• /02_base
  • _tokens.scss: El :root con los tokens de sistema (--mlt-sys-*), generados con bucles desde las variables de _variables.scss.
  • _reset.scss: El reset que usemos
  • _typography.scss: Para importar tipos de letra
  • _index.scss: Los imports de cada fichero de esta carpeta.

@forward "./_tokens.scss";
@forward "./_reset.scss";
@forward "./_typography.scss";

• /03_global
  • _cada_uno_de_los_modificadores_globales.scss: Habrá un fichero por cada tipo de modificador que haya. Por ejemplo _g--color.scss, _g--font-size.scss, _g--margin.scss o _g--padding.scss. Las versiones responsivas (@tablet, @desktop, @fulldesktop) van en el mismo fichero que la clase base, siempre después de las clases base (si van antes, gana la base y no hacen nada), generadas con el mapa $breakpoints de 01_utilities/_variables.scss. Más información en 12. Sistema de diseño: BEM, 14. Sistema de diseño: Globales, 7. SASS
  • _index.scss: Los imports de cada fichero de esta carpeta.

@forward "./_g--color.scss";
@forward "./_g--font-size.scss";
@forward "./_g--margin.scss";
@forward "./_g--padding.scss";

• /04_components
  • _cada_uno_de_los_componentes.scss: Habrá un fichero por cada Bloque que sea de tipo Componente pero que NO sean de Angular. Por ejemplo _c-button.scss, _l-flex.scss , _l-columns.scss o _c-panel.scss. Más información en 12. Sistema de diseño: BEM, 13. Sistema de diseño: Tokens, 7. SASS, 15. Sistema de diseño: Layout
  • _index.scss: Los imports de cada fichero de esta carpeta.

@forward "./_c-button.scss";
@forward "./_c-panel.scss";
@forward "./_l-columns.scss";
@forward "./_l-flex.scss";

• main.scss: Aquí se agrupa todo el código de SASS y es el único fichero que se transforma en CSS.

@forward "./02_base";
@forward "./03_global";
@forward "./04_components";

Dentro de cada fichero .scss que use algo de las utilidades (variables, funciones o mixins de SASS) se añadirá la referencia a las utilidades con la siguiente linea:

@use "../01_utilities/index" as utilidades;

Ahora hay que crear la carpeta donde estarán nuestros componentes de Angular. Para ello crearemos la carpeta src/app/components/ui. En esta carpeta deben estar todos los componentes reusables por toda la aplicación.

  src/app/components/ui
     /c-button
        c-button.ts
        c-button.html
        c-button.scss

    /c-panel
        c-panel.ts
        c-panel.html
        c-panel.scss
       
    /l-flex
        l-flex.ts
        l-flex.html
        l-flex.scss        
        

Para crear el SCSS se seguirán las mismas normas que al crear el SCSS común a todo el proyecto.

Más información en:

• 10. Angular: Creación de componentes
• 11. Angular: Atributos de componentes
• 12. Sistema de diseño: BEM
• 13. Sistema de diseño: Tokens
• 14. Sistema de diseño: Globales
• 7. SASS
• 15. Sistema de diseño: Layout

Finalmente en la carpeta src/app/components/paginas, añadiremos todos los componentes específicos de la aplicación. Aquí es donde se hace uso de los distintos elementos reusables que creamos en src/app/components/ui

En un proyecto de HTML, CSS y JavaScript sin Angular la carpeta scss es exactamente la misma, pero va en la raíz del proyecto. No hay components/ui: todos los componentes son ficheros de scss/04_components.

proyecto
├─ scss
│   ├─ 01_utilities
│   ├─ 02_base
│   ├─ 03_global
│   ├─ 04_components
│   │   ├─ _c-button.scss
│   │   ├─ _c-panel.scss
│   │   └─ _index.scss
│   └─ main.scss
├─ css
│   └─ main.css         <- lo genera SASS, no se toca
├─ js
│   └─ main.js
├─ index.html
└─ productos.html

• Instalar SASS en el proyecto:

npm install --save-dev sass

• Compilar scss/main.scss en css/main.css mientras trabajas. Con --watch se vuelve a compilar cada vez que guardas un .scss:

npx sass --watch scss/main.scss:css/main.css

• Enlazar en cada página solo el CSS generado:

<link rel="stylesheet" href="css/main.css">

Angular incluye de serie una herramienta de procesamiento CSS llamada PostCSS. Esta herramienta lee el CSS y permite analizarlo o hacer modificaciones.

PostCSS está basado en plugins que permiten extender PostCSS con nuevos análisis o modificaciones.A las herramientas que analizan el código para ver si tiene "problemas" se le llaman linters.

Nosotros vamos a usar PostCSS para analizar nuestro CSS y ver si cumple las normas de BEM. El plugin o linter que vamos a usar es postcss-bem-linter.

Los pasos para instalarlo son

• Descargar el linter

npm install --save-dev postcss-bem-linter

• Crear/modificar el fichero .postcssrc.json. Debe estar en el raíz del proyecto.

{
  "plugins": {
    "postcss-bem-linter": {
      "preset": "bem"
    }
  }
}