Современная структура папок Sass

Привет!

Сегодня речь пойдет об организации вашего CSS с помощью Sass.

Я надеюсь, что у вас есть представление о том, что такое Sass и как он работает. Потому что эта тема посвящена повышению вашей производительности при работе с Sass. Возможно, вы зададитесь вопросом, почему я называю SCSS не SCSS, а Sass. Да, между ними есть некоторые различия, однако большинство разработчиков используют именно этот термин. Услышав его со временем, я выработал привычку называть его Sass. Возможно, потому что произношение проще:). Если вы хотите узнать больше о разнице между ними, ознакомьтесь с этими ресурсами:

  • Sass Guidelines о «about sass».
  • Кевин Пауэлл о «sass или scss».

Прежде всего, я полностью благодарен сайту Sass Guidelines и Кевину Пауэллу, благодаря которым я узнал об этих концепциях. Я просто объединил все эти концепции и написал то, что узнал. Я внес некоторые изменения в зависимости от моих предпочтений. Итак, здесь я хотел бы поделиться тем, как выглядит современная структура папок шаблонов Sass. Вы можете сделать форк этого репозитория GitHub и использовать его в качестве шаблона. Итак, со всем вышесказанным, давайте начнем.

Существует знаменитая структура папок шаблона 7-1. Если вы не знаете, что это такое, вы можете заглянуть в Sass Guidelines и узнать о ней больше. По сути, она состоит из 7 различных папок, содержащих файлы или так называемые «части», которые затем импортируются в один основной файл Sass и компилируются в один большой файл CSS.

  • abstracts/
  • base/
  • utilities/
  • components/
  • layout/
  • pages/
  • themes/
  • vendors/
  • style.scss

Однако пример структуры папок, приведенный в Sass Guidelines, использует метод @import, который сейчас устарел. Теперь у нас есть @use и @forward, которые являются современными методами импорта файлов и папок в Sass. Я получил четкое понимание после просмотра видео Кевина Пауэлла на YouTube об этих двух методах. Вы можете узнать больше об этом здесь.

Структура папок

sass/
|
|- abstracts/
|    |- _variables.scss
|    |- _media-query.scss
|    |- _colors.scss
|    ...
|    |- _index.scss
|
|- base/
|    |- _base.scss
|    |- _reset.scss
|    ...
|    |- _index.scss
|
|- utilities/
|    |- _main.scss
|    |- _container.scss
|    |- _exceptions.scss
|    ...
|    |- _index.scss
|
|- components/
|    |- _buttons.scss
|    |- _carousel.scss
|    |- _dropdown.scss
|    ...
|    |- _index.scss
|
|- layout/
|    |- _header.scss
|    |- _sidebar.scss
|    |- _footer.scss
|    ...
|    |- _index.scss
|
|- pages/
|    |- _about.scss
|    |- _contact.scss
|    ...
|    |- _index.scss
|
|- themes/
|    |- _theme.scss
|    |- _admin.scss
|    ...
|    |- _index.scss
|
|- vendors/
|    |- _bootstrap.scss
|    |- _modern-reset.scss
|    ...
|    |- _index.scss
|
|- style.scss
Вход в полноэкранный режим Выход из полноэкранного режима

Как вы могли заметить, в каждой папке есть файл под названием _index.scss. Он находится там потому, что вам больше не нужно импортировать каждый файл из папки по одному. В файле _index.scss должны быть только @forward, которые буквально используются для «пересылки» ваших файлов как папки через другие различные файлы.

Например, в нашем случае, в папке abstracts/ есть 3 разных файла, кроме _index.scss одного. В файле _index.scss мы можем «переслать» каждый файл в этой папке:

_index.scss

@forward 'variables';
@forward 'media-query';
@forward 'colors';
Войти в полноэкранный режим Выйти из полноэкранного режима

Если вы хотите использовать все файлы в папке abstracts/, вы можете «использовать» их следующим образом:

style.scss

@use 'abstracts';
Войти в полноэкранный режим Выйти из полноэкранного режима

Однако, если бы мы использовали метод @import для импорта файлов, нам не понадобился бы файл _index.scss и все выглядело бы следующим образом:

style.scss

@import 'abstracts/variables';
@import 'abstracts/media-query';
@import 'abstracts/colors';

@import 'base/reset';
@import 'base/base';

...
Вход в полноэкранный режим Выход из полноэкранного режима

Теперь мы можем «переслать» все файлы с файлом _index.scss в его папку и импортировать его в наш основной файл style.scss, используя метод @use. Результат должен выглядеть примерно так:

style.scss

@use 'abstracts';
@use 'vendors';
@use 'base';
@use 'utilities';
@use 'components';
@use 'pages';
@use 'themes';
Вход в полноэкранный режим Выход из полноэкранного режима

Допустим, вы создали несколько микшинов в файле _mixins.scss. И вы хотите использовать их в файле _buttons.scss, чтобы придать некоторый стиль кнопкам. Вы можете сделать следующее:

_buttons.scss

@use "../abstracts" as *;
Войти в полноэкранный режим Выйти из полноэкранного режима

Причина, по которой файл _mixins.scss находится в папке abstracts/, заключается в том, что миксины не компилируются в CSS. Так же, как функции, карты и переменные Sass. Все эти многократно используемые файлы должны находиться в папке abstracts/, чтобы вы могли легко использовать эти миксины, карты и переменные в своих файлах, импортируя их.

Вам может быть интересно, что означает это *. Если вы знакомы с Python или React, вы могли часто видеть это. Если нет, то это означает, что вы можете свободно использовать все эти многократно используемые файлы внутри вашего текущего файла. То есть, если бы вы использовали a вместо *, вам нужно было бы использовать a.something везде, где вы использовали код, принадлежащий этой папке.

Также обратите внимание, что /path должен быть относительным к этому файлу.


Если вам все еще трудно понять некоторые концепции, я еще раз настоятельно рекомендую вам ознакомиться с этими двумя ресурсами:

  • Sass Guidelines site
  • Кевин Пауэлл

Как только вы освоите эти методы, они вскоре станут частью вашей привычки. Я использую этот шаблон почти для всех своих проектов.

Со всем этим я желаю вам удачи на вашем пути!

Спасибо за чтение!

Оцените статью
devanswers.ru
Добавить комментарий