Han pasado algunos años desde la última vez que se supo algo sobre CSS en angular-
¡y han pasado muchas cosas desde entonces! En este post, vamos a echar un vistazo a las nuevas características de la web que impactan en cómo definimos el estilo en nuestras aplicaciones Angular.
Cómo utilizar @use en lugar de @import
En 2019, Sass introdujo un nuevo sistema de módulos, incluyendo una migración de @import a @use.
Al cambiar a la sintaxis @use, podemos determinar más fácilmente qué CSS no se utiliza, y reducir el tamaño de la salida CSS compilada.
Esto hace que sea imposible introducir inadvertidamente dependencias transitivas. Cada módulo se incluye sólo una vez, sin importar cuántas veces se carguen esos estilos.
**Angular Material v12 **incluyó una migración del uso de @import a @use para todas las importaciones en los estilos Sass de Angular Material.
Esta refactorización de la superficie de la API de tematización es más fácil de entender y leer, ayudando a los desarrolladores a aprovechar mejor este nuevo sistema de módulos.
Esta migración tiene lugar en los scripts incluidos en la actualización ng. Un ejemplo de este cambio está en cómo definimos un tema de Angular Material:
// Angular Material Styling is imported as 'mat'.
@use '@angular/material' as mat;
//'mat' namespace is referenced.
$my-primary: mat.define-palette (mat.$pink-palette,500);
$my-accent: mat.define-palette (mat.$pink-palette, A200, A100, A400);
Ahora hacemos uso de la introducción de espacios de nombres para definir el núcleo '@angular/material' como mat, y luego acceder a variables como mat.$indigo-palette. Si investigas en el código fuente, somos más intencionales sobre qué variables son @forwarded para el acceso público para guiar a los usuarios hacia un estilo más limpio.
Sugerencia: Echa un vistazo a la nueva documentación de tematización de Angular Material para ver cómo @use y esta migración simplifican la tematización de tus componentes.
Habilitación de conceptos modernos de CSS
¡Angular v13 eliminó el soporte para IE11 después de una exitosa solicitud de comentarios haciendo posible que Angular adopte estilos web modernos como
- CSS Grid.
- Propiedades lógicas CSS.
- CSS calc(),
- ::hover y más!
Es por ello que considero que más de uno estamos ansiosos y a la espera que la librería Material de Angular comience a utilizar estas características, para desde ya hacer uso de ella.
Empieza a usar las variables CSS
La eliminación de la compatibilidad con IE11 allana el camino para algo que me entusiasma: las variables CSS, también conocidas como propiedades personalizadas CSS.
Piensa en ello como la definición de una superficie **API **que los desarrolladores pueden utilizar para personalizar los estilos. Puedes proporcionar un conjunto de propiedades abiertas para orientar el tamaño de los márgenes o una gama de variables de color y permitir a los desarrolladores consumirlas y anularlas.
Imagina que una biblioteca incluye un botón de compartir con un estilo personalizado:
:root {
--primary: pink;
--accent: blue;
}
.share-button {
background-color: var(---primary);
color: var (---accent);
}
Un usuario puede entonces implementar un estilo limpio utilizando variables CSS en el ámbito en que se utiliza este componente de la biblioteca para reasignar los colores primarios y de acento, y ver estos cambios visuales reflejados en su uso del botón de compartir:
:root {
--primary: green;
--accent: purple;
}
El futuro de la anulación de estilos
Las Variables CSS abren la puerta a APIs bien soportadas para la personalización de componentes, permitiendo a los desarrolladores alejarse de los overrides CSS y de los ::ng-deep.
Es recomendable la introducción de variables personalizadas en las bibliotecas y dependencias para crear una superficie de API para la personalización de las bibliotecas sin la necesidad de ::ng-deep.
La implementación de variables personalizadas permite a los desarrolladores tener un mayor control sobre su estilo y proporcionar un camino lejos de las anulaciones de CSS y ::ng-deep.
Variables CSS en Angular Material
Estamos explorando las Variables CSS para abrir la superficie de la API de la tematización de Material y apoyar una mayor individualización de los componentes de Material Angular como parte de la expansión de los sistemas de personalización de Material Design.
¿Acostumbra a personalizar Material de Angular en su proyecto?
La CLI de Angular puede ayudarte a estilizar Sass en línea en los componentes
La v12 introdujo la opción de usar Sass inline en tus componentes de Angular.
La CLI ahora tiene una opción para proporcionar un inlineStyleLanguage y compila Sass directamente desde tus componentes de Angular en el estilo.
Esto es útil para los desarrolladores que utilizan componentes de un solo archivo o que quieren añadir pequeñas cantidades de estilo dentro de sus archivos de componentes.
Para usar Sass, necesitarás especificar el lenguaje en tus configuraciones de construcción angular.json:
{ "projects": {
"architect": {
"build": {
"options": {
"styles": [
"src/styles.scss"
*
],
"inlineStyleLanguage": "scss",
...
Ahora puedes escribir Sass en tus @Componentes
import { component } from '@angular/core';
@component ({
selector: 'app-root',
template: '<h1>v12 has inline Sass!</h1>',
styles: [`
$neon: #cf0;
@mixin background ($color: #fff) {
background: $color;
}
h1 {@incluide background (neon)}
`]
}) export class Appcomponent {}
Tailwind y otros PostCSS
Angular v11.2 añadió soporte nativo para ejecutar TailwindCSS PostCSS con el CLI de Angular.Para habilitar TailwindCSS, ng actualizar a v11.2+ y luego:
- Instala con yarn add -D tailwindcss
- Crea un archivo de configuración de TailwindCSS en el espacio de trabajo o en la raíz del proyecto
// tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
Inlining de CSS crítico
Angular v12 también introdujo Critical CSS Inlining para ayudar a garantizar que las aplicaciones de Angular ofrezcan las mejores métricas posibles de Core Web Vital.
**
¿Y a ti que tal te va con la implementación de estilos?**
Top comments (0)