¿Cómo usar mixins SCSS con angular 7?

Cuando se trabaja con Angular CLI , las hojas de estilo predeterminadas tienen la extensión .css.

Inicio de un proyecto CLI angular con Sass

Normalmente, cuando ejecutamos ng new my-app, nuestra aplicación tendrá .css files. Hacer que CLI genere .scss files(o .sass/.less) es un asunto fácil.

Cree un nuevo proyecto con Sass con lo siguiente:

ng new my-sassy-app --style=scss

Conversión de una aplicación actual a Sass:

Si ya ha creado su aplicación Angular CLI con el valor predeterminado .css files, le llevará un poco más de trabajo convertirlo. Puede decirle a Angular que comience a procesar archivos Sass con el siguiente comando:

ng set defaults.styleExt scss

Esto continuará y le indicará a Angular CLI que comience a procesar archivos .scss. Si desea echar un vistazo bajo el capó de lo que hizo este comando, consulte el archivo de configuración de Angular CLI: .angular-cli.json.

Encontrará la nueva línea de configuración en la parte inferior del archivo:

"defaults": {
  "styleExt": "scss",
  "component": {
  }
}sd

Cambiar los archivos CSS a Sass:

La CLI de Angular comenzará a procesar archivos Sass ahora. Sin embargo, no pasa por el proceso de convertir sus archivos .css ya existentes en archivos .scss. Tendrás que hacer la conversión manualmente .

Uso de importaciones de Sass:

Personalmente, me gusta crear archivos Sass para variables de proyectos y para mixins de proyectos. De esta manera, podemos traer cualquier variable/combinación que necesitemos rápida y fácilmente.

Por ejemplo, creemos una nueva aplicación CLI:

ng new my-sassy-app --style=scss

A continuación, cree los siguientes archivos:

|- src/
    |- sass/
        |- _variables.scss
        |- _mixins.scss
        |- styles.scss

Para comenzar a usar estos nuevos archivos Sass, importaremos _variables.scss y _mixins.scss al archivo principal styles.scss.

@import './variables';
@import './mixins';

El último paso es actualizar nuestra configuración .angular-cli.json para usar este nuevo src/sass/styles.scss en lugar de src/styles.scss. En nuestro archivo .angular-cli.json , simplemente cambie la siguiente línea para que apunte al archivo styles.scss correcto .

"styles": [
  "sass/styles.scss"
],

Nota: Separar nuestro Sass en su propia carpeta porque nos permite crear una base Sass más sólida.

Ahora, cuando iniciemos nuestra aplicación, ¡se utilizarán estos nuevos archivos Sass!

Importación de archivos Sass en componentes angulares:

Tenemos nuevos archivos _variables.scss y _mixins.scss que probablemente querremos usar en nuestros componentes. En otros proyectos, es posible que esté acostumbrado a tener acceso a sus variables de Sass en todas las ubicaciones, ya que un ejecutor de tareas compila su Sass.

En Angular CLI, todos los componentes son autónomos y también lo son sus archivos Sass. Para utilizar una variable desde el archivo Sass de un componente, deberá importar el archivo _variables.scss .

Una forma de hacer esto es @importar con una ruta relativa desde el componente. Es posible que esto no se escale si tiene muchas carpetas anidadas o si eventualmente mueve archivos.

No importa en qué componente del archivo Sass estemos, podemos hacer una importación así:

// src/app/app.component.scss

@import '~sass/variables';

// now we can use those variables!

La tilde (~) le indicará a Sass que busque en la carpeta src/ y es un atajo rápido para importar archivos de Sass.

Rutas de inclusión de Sass:

Además de usar ~, podemos especificar la configuración de includePaths cuando trabajamos con la CLI. Para decirle a Sass que busque en ciertas carpetas, agregue las líneas de configuración a .angular-cli.json como en el objeto de la aplicación junto a la configuración de estilos.

"styles": [
  "styles.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "../node_modules/bootstrap/scss"
  ]
},

Uso de archivos Bootstrap Sass:

Otro escenario que tendremos que hacer con frecuencia es importar bibliotecas de terceros y sus archivos Sass.

Traeremos Bootstrap y veremos cómo podemos importar los archivos Sass a nuestro proyecto. Esto es bueno ya que podemos elegir qué partes de Bootstrap queremos usar. También podemos importar los mixins de Bootstrap y usarlos en nuestros propios proyectos.

Para comenzar, instala bootstrap:

npm install --save bootstrap

Agregar archivo CSS Bootstrap

Ahora que tenemos Bootstrap, veamos cómo podemos incluir el archivo CSS básico. Este es un proceso fácil al agregar el archivo bootstrap.css a nuestra configuración .angular-cli.json:

"styles": [
  "../node_modules/bootstrap/dist/css/bootstrap.css",
  "sass/styles.scss"
],

Nota: estamos usando ..porque la CLI comienza a buscar desde dentro de la carpeta src/. Tuvimos que subir una carpeta para llegar a la carpeta node_modules.

Si bien podemos importar el CSS de Bootstrap de esta manera, esto no nos permite importar solo secciones de Bootstrap o usar las variables/mezclas de Sass que proporciona Bootstrap.

Veamos cómo podemos usar los archivos Bootstrap Sass en lugar del archivo CSS.

Adición de archivos Bootstrap Sass

@import "functions";
@import "variables";
@import "mixins";
@import "print";
@import "reboot";
@import "type";
@import "images";
@import "code";
@import "grid";
@import "tables";
@import "forms";
@import "buttons";
@import "transitions";
@import "dropdown";
@import "button-group";
@import "input-group";
@import "custom-forms";
@import "nav";
@import "navbar";
@import "card";
@import "breadcrumb";
@import "pagination";
@import "badge";
@import "jumbotron";
@import "alert";
@import "progress";
@import "media";
@import "list-group";
@import "close";
@import "modal";
@import "tooltip";
@import "popover";
@import "carousel";
@import "utilities";

Esas son muchas herramientas que quizás no uses en tu propio proyecto.

Dentro de nuestro archivo src/sass/styles.scss, importemos solo los archivos de Bootstrap que necesitaremos. Al igual que importamos archivos Sass de la carpeta src usando la tilde (~), la tilde también buscará en la carpeta node_modules.

Si bien podríamos usar la tilde, dado que ya agregamos Bootstrap a nuestros include_paths en la sección stylePreprocessorOptions de nuestro .angular-cli.json:

"styles": [
  "styles.scss"
],
"stylePreprocessorOptions": {
  "includePaths": [
    "../node_modules/bootstrap/scss"
  ]
},

Podemos hacer lo siguiente para obtener solo las herramientas base de Bootstrap:

@import 
  'functions',
  'variables',
  'mixins',
  'print',
  'reboot',
  'type';

Referencia: https://scotch.io/tutorials/using-sass-with-the-angular-cli