Русский
Русский
English
Статистика
Реклама

Заметка о вариантах организации SassSCSS в Angular приложении

Как структурировать sass/scss файлы в проекте Angular? Однажды задавшись этим вопросом, нашел несколько вариантов.

1 способ - держать все файлы стилей в папке /styles

В это случае мы создаем все файлы в папке /styles, соблюдая примерную структуру:

styles  base  components xxxxx

Одним из популярных способов, при таком структурировании файлов, может являться паттерн 7-1, предлагаемый в документации к sass. Подробнее можно ознакомиться тут по ссылке.

Плюсы такого подхода:

  1. Все файлы стилей в одном месте.

  2. Ускоряется билдинг стилей.

Минусы:

  1. Разработчик должен представлять где должен находится нужный файл.

  2. Файловая структура может стать грязной при большом проекте.

2 способ - держать каждый файл стиля в компоненте, а глобальные в папке /styles

В этом варианте, оставляем файлы стилей компонента к каждом компоненте а глобальные стили, выносим в /styles. Туда же выносим файлы с переменными и миксинами, которые потом импортируем в файлы стилей компонентов. Папка /styles выглядеть так же, как в первом способе, но без стилей компонентов.

Плюсы такого подхода:

  1. Компоненты имеют свои файлы стилей.

  2. Легче добиться чистой структуры файлов стилей.

Минусы:

  1. Билдинг файлов стилей может замедлиться при большом проекте.

3 способ (странный) - выносим все стили компонентов в единый файл, а глобальные в папку /styles

Похоже на первый вариант за исключением того что стили компонентов содержаться в одном файле а сам файл лежит в папке с компонентами.

Плюсы:

  1. Компоненты имеют свой единый файл стилей что обеспечивает быстрый доступ.

  2. Билдинг стилей происходит быстрее.

Минусы:

  1. Необходимо каждый раз добавлять импорт общего файла стилей компонентов, в файл стилей нового компонента.

Из трех найденных вариантов, второй выглядит более рациональным для Angular приложения. Первый скорее подойдет для проектов с версткой без фреймворков. Третий способ выглядит довольно странным, хотя возможно и реально может принести удобство.

А как вы организуете файлы стилей в Angular проектах?

Источник: habr.com
К списку статей
Опубликовано: 13.06.2021 14:11:44
0

Сейчас читают

Комментариев (0)
Имя
Электронная почта

Css

Angular

Scss

Категории

Последние комментарии

  • Имя: Макс
    24.08.2022 | 11:28
    Я разраб в IT компании, работаю на арбитражную команду. Мы работаем с приламы и сайтами, при работе замечаются постоянные баны и лаги. Пацаны посоветовали сервис по анализу исходного кода,https://app Подробнее..
  • Имя: 9055410337
    20.08.2022 | 17:41
    поможем пишите в телеграм Подробнее..
  • Имя: sabbat
    17.08.2022 | 20:42
    Охренеть.. это просто шикарная статья, феноменально круто. Большое спасибо за разбор! Надеюсь как-нибудь с тобой связаться для обсуждений чего-либо) Подробнее..
  • Имя: Мария
    09.08.2022 | 14:44
    Добрый день. Если обладаете такой информацией, то подскажите, пожалуйста, где можно найти много-много материала по Yggdrasil и его уязвимостях для написания диплома? Благодарю. Подробнее..
© 2006-2024, personeltest.ru