Новое состояние CSS в Angular
Использование @use вместо @import
Содержание статьи:
В 2019 году Sass представил новую модульную систему, включающую миграцию с @import на @use. Переключившись на синтаксис @use, мы можем определить, какой CSS не используется, и уменьшить размер скомпилированного файла CSS. Это делает невозможным непреднамеренное включение транзитивных зависимостей. Каждый модуль включается только один раз, независимо от того, сколько раз загружались стили.
Angular Material v12 включает переход от использования @import к @use. Такой рефакторинг нашей тематики API легче читать и понимать, что помогает разработчикам лучше использовать преимущества новой модульной системы. Эта миграция происходит в скриптах, включенных в ng update. Одним из примеров такого изменения является то, как мы определяем тему Angular Material:
JavaScript // Angular Material styling is imported as ‘mat’. @use ‘@angular/material’ as mat;// ‘mat’ namespace is referenced. $my-primary: mat.define-palette(mat.$indigo-palette, 500); $my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
| 1234 | // Angular Material styling is imported as ‘mat’.@use ‘@angular/material’ as mat;// ‘mat’ namespace is referenced.$my-primary: mat.define-palette(mat.$indigo-palette, 500);$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); |
Бесплатный курс «Laravel + Angular. Быстрый старт»
Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel
Получить курс
Мы используем введение пространств имен для определения ядра ‘@angular/material’ as mat, а затем получаем доступ к переменным, таким как mat.$indigo-palette. Если углубимся в исходный код, мы можем определить, какие переменные аннотированны как @forward для общего доступа, чтобы предоставить пользователям более чистый стиль.
Ознакомьтесь с недавно переписанной документацией по Angular Material theming, чтобы узнать, как миграция на @use упростит тематизацию ваших компонентов.
Включение современных концепций CSS
Angular v13 удалил поддержку IE11, что позволило ему использовать современные веб-стили, такие как CSS Grid, логические свойства CSS, CSS calc(), ::hover и многое другое! Вы можете ожидать, что библиотека Angular Material начнет использовать эти функции, и мы также рекомендуем вам это сделать.
Начните использовать переменные CSS!
Удаление поддержки IE11 открывает путь к тому, что меня очень волнует — переменным CSS, также известными как пользовательские свойства CSS! Думайте об этом как об определении API, который разработчики могут использовать для настройки стилей. Вы можете предоставить набор открытых свойств для установки размеров отступов или диапазона цветовых переменных и позволить разработчикам использовать и переопределять их. Представьте, что в библиотеке есть кнопка общего доступа с пользовательским стилем:
CSS :root { –primary: pink; –accent: blue; } .share-button { background-color: var(–primary); color: var(–accent); }
| 12345678 | :root { –primary: pink; –accent: blue;}.share-button { background-color: var(–primary); color: var(–accent);} |
Пользователь может реализовать чистый стиль с помощью переменных CSS в области, в которой этот компонент библиотеки используется для переназначения основного и дополнительного цветов, и увидеть визуальные изменения:
CSS :root { –primary: green; –accent: purple; }
| 1234 | :root { –primary: green; –accent: purple;} |
Переопределение стилей
Переменные CSS открывают дверь к хорошо поддерживаемым API-интерфейсам для настройки компонентов, позволяя разработчикам отказаться от переопределений CSS и ::ng-deep.
Мы рекомендуем вводить пользовательские переменные в свои библиотеки и зависимости, чтобы создать API для настройки библиотек без необходимости использования ::ng-deep. Реализация пользовательских переменных позволяет разработчикам иметь больший контроль над своим стилем и обеспечивать обходной путь для переопределений стилей CSS и ::ng-deep.
Бесплатный курс «Laravel + Angular. Быстрый старт»
Изучите курс и узнайте, как создать веб-приложение с нуля на Angular и Laravel
Получить курс
Angular CLI может помочь вам со стилями
Встроенный Sass в компонентах
V12 представила возможность использовать встроенный Sass в ваших компонентах Angular. В интерфейсе командной строки теперь есть возможность предоставить inlineStyleLanguage и компилировать Sass прямо из компонентов Angular в стили. Это полезно для разработчиков, использующих отдельные файлы компонентов или желающих добавить небольшое количество стилей к своим файлам компонентов. Чтобы использовать Sass, вам нужно указать язык angular.json в конфигурации сборки:
JavaScript { “projects”: { “architect”: { “build”: { “options”: { “styles”: [ “src/styles.scss” ], “inlineStyleLanguage”: “scss”, …
| 123456789 | { “projects”: { “architect”: { “build”: { “options”: { “styles”: [ “src/styles.scss” ], “inlineStyleLanguage”: “scss”, … |
Теперь вы можете писать Sass в своих @Components!
JavaScript 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 {@include background($neon)} `] }) export class AppComponent {}
| 1234567891011 | 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 {@include background($neon)} `]}) export class AppComponent {} |
Tailwind и другие PostCSS
В Angular v11.2 добавлена встроенная поддержка для запуска TailwindCSS PostCSS с Angular CLI. Чтобы включить TailwindCSS, выполните «ng update» и перейдите на v11.2+, а затем:
Выполните yarn add -D tailwindcss
Создайте файл конфигурации TailwindCSS в рабочей области или корне проекта.
JavaScript // tailwind.config.jsmodule.exports = { purge: [], darkMode: false, // or ‘media’ or ‘class’ theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }
| 1234567891011 | // tailwind.config.jsmodule.exports = { purge: [], darkMode: false, // or ‘media’ or ‘class’ theme: { extend: {}, }, variants: { extend: {}, }, plugins: [],} |
Critical CSS Inlining
Angular v12 также представил Critical CSS Inlining, чтобы гарантировать, что приложения Angular предоставляют наилучшие возможные показатели Core Web Vital. Это отличный пример того, что Angular находится на переднем фланге веб-производительности! Спасибо, что продолжаете делать Интернет более стильным с помощью Angular!
Автор: Emma Twersky
Источник: webformyself.com