Angular поддерживает Sass, CSS и Less для стилизации глобальных стилей приложения, а также стилей компонентов. Стили компонентов Angular имеют эффективный механизм инкапсуляции CSS, который гарантирует, что CSS любого компонента является локальным по отношению к компоненту и не изменяет глобально какие-либо стили.
Пример Angular Sass
Зачем использовать Angular Sass? Хорошо!! Sass (Syntactically Awesome Style Sheets) — это расширение CSS, которое позволяет использовать такие вещи, как переменные, вложенные правила, встроенный импорт и многое другое. Он также помогает упорядочить вещи и позволяет быстрее создавать таблицы стилей.
Короче говоря, Sass — это препроцессор CSS, который сочетает в себе уникальные функции, такие как переменные, вложенные правила и миксины (иногда называемые синтаксическим сахаром) в обычный CSS. Основная цель Sass — сделать процесс кодирования CSS более удобным и эффективным.
Sass совместим со всеми версии CSS. При работе с Angular CLI таблицы стилей по умолчанию имеют расширение .css . Мы используем Angular CLI 8. Итак, если вы не использовали ранее, обновите версию CLI. Мы будем использовать Bootstrap 4 Framework для этой демонстрации и посмотрим, как мы можем настроить Sass в нашем приложении Angular 9.
Сначала проверьте версию вашего Angular CLI с помощью этой команды.
ng --version
Если это не последняя версия, обновите ее до последней версии, затем вернуться сюда.
Шаг 1. Создайте новый проект Angular
Введите следующее, чтобы создать новый проект Angular.
ng new angularsass
Вы увидите несколько подобных подсказок при создании нового проекта.
Мы видим, что спросили, хотим ли мы использовать стили Sass для нашего проекта или нет. Я выбрал Angular Routing на No и выбрал Sass для стилей.
Теперь стили нашего проекта изменены на Sass. Вы можете увидеть файлы внутри папки src , в которой есть файл styles.scss , а внутри папки app мы есть файл app.component.scss .
Далее нам нужно включить Bootstrap 4 в наш проект.
Шаг 2. Установите библиотеку bootstrap-sass
Теперь установите библиотеку bootstrap-sass, которая является SASS-версией Bootstrap.
npm install bootstrap --save
Хорошо, следующий шаг для импорта этого файла в src >> styles.scss файл. Итак, позвольте нам это сделать.
/* Вы можете добавлять в этот файл глобальные стили, а также импортировать другие файлы стилей */@ import "../node_modules/bootstrap/scss/bootstrap.scss" ;
Итак, здесь мы включили бутстрап . scss для нашего проекта, сохраните файл и запустите сервер разработки angular.
ng serve
Как видите, мы успешно интегрировали Библиотека Bootstrap sass в нашем проекте. Теперь мы можем добавить к нему больше файлов scss, скомпилировать его в CSS и использовать в нашем проекте.
Шаг 3. Добавьте новые стили scss.
Во-первых, давайте создадим панель навигации внутри нашего проекта.
Итак, напишите следующий код внутри файла app.component.html .
Мы использовали Simple Bootstrap Navb ар. Но теперь нам нужно изменить некоторые стили навигационной панели.
Итак, мы напишем код scss для изменения этих стилей. Сохраните файл и посмотрите на панель навигации в браузере.
Давайте создадим несколько новых классов внутри файла app.component.scss . Мы добавим псевдоклассы в компонент панели навигации.
//app.component.scss $ backColor: brown; .search-button {border-color: skyblue; цвет синий; &: hover, &: after, &: focus {background-color: transparent; цвет: $ backColor; }}. фирменный стиль {&: hover, &: focus, &: active {background-color: transparent; цвет: $ backColor; }}. пользовательский логин {&: hover, &: focus, &: active {background-color: transparent; цвет: $ backColor! important; }}. register-custom {&: hover, &: focus, &: active {background-color: transparent; цвет: $ backColor! important; }}
Здесь мы определили цветовую переменную. Вы можете создать отдельный файл, например файл _variables.scss , но пока придерживайтесь этого кода..
Если некоторые цвета повторяются, мы можем определить переменную, а затем определить выше и использовать эту переменную всякий раз, когда нам нужно.
Теперь добавьте новые классы внутри файла app.component.html .
Сохраните файл и теперь наведите на кнопку, ссылки внутри браузера вы увидите, что коричневый цвет применяется к нашим стилям. Вот как вы можете включить SCSS в наш проект.
Используйте Sass в Angular 5 или Angular 6
Если вы есть Angular CLI ниже версии 7, тогда вам нужно создать новый проект Angular, подобный этому.
ng new angularsass --style = scss
Теперь добавьте Bootstrap 4
npm install bootstrap --save//или с помощью yarnyarn add bootstrap
После его установки нам нужно добавить главный файл Bootstrap Sass (т.е. стили, такие как переменные , примеси , формы , кнопки , таблицы , и т. д.) в файл styles.scss , в котором был автоматически сгенерирован при создании проекта.
//styles.scss@import "../node_modules/bootstrap/scss/bootstrap.scss";
Итак вот как вы интегрируете Sass в Angular 5, Angular 6, Angular 7, Angular 8 или Angular 9. Особой разницы нет. e в нем.
Наконец, «Как использовать Sass в примере Angular» закончено. Спасибо, что приняли.
