Взгляд на разные архитектуры Sass

По мере роста размера и сложности проекта вам требуется какая-то логика для структурирования файлов Sass. Это помогает следовать некоторым согласованным рекомендациям по созданию файлов и папок при работе в больших командах и проектах. Ниже приведен обзор некоторых методов, используемых сегодня.

Bootstrap-дерзость

Цель Bootstrap — стать библиотекой пользовательского интерфейса для веб-разработчиков, чтобы быстро освоиться. Для них логично сгруппировать все переменные в один файл и скрыть всю логику миксина. Их архитектура Sass имитирует эту идею. Каждый компонент получает свой собственный файл Sass и файл ./_variables.scss , который позволяет вам контролировать все переменные, связанные с вашим проектом.

Архитектура Sass в Bootstrap уникальна тем, как она раскладывает свои миксины. Там есть файл ./_mixins.scss . Этот файл импортирует все файлы из папки mixins , которая содержит отдельный файл для каждого используемого mixin. Хотя стили кнопок определены в ./_buttons.scss , используемые для этого ./_mixins.scss импортируются из ./_mixins.scss . Это, в свою очередь, импортирует кнопку mixins из mixins/_buttons.scss . Йоу Дауг !

В дополнение к миксинам уровня компонентов папка mixin также содержит глобальные миксины, такие как mixins/_border-radius.scss и mixins/_responsive-visibility.scss . Хотя миксины загрузчика не слишком сложны, эта архитектура лучше подходит для проекта, в котором миксины действительно сложны и требуют разбивки на более мелкие части. Или в случаях, когда вы хотите скрыть эту логику от визуальных стилей компонентов. В заключение, эта архитектура лучше всего работает для Bootstrap, но может не работать для вашего sass-проекта.

Вот как выглядит структура папок:

 bootstrap/ |– bootstrap.scss # Manifest file |– _alerts.scss # Component file |– _buttons.scss # Component file |– _mixins.scss # Mixin file – imports all files from mixins folder |– ... # Etc.. |– mixins/ | |– _alerts.scss # Alert mixin | |– _buttons.scss # Button mixin | |– ... # Etc.. 

Zurb Foundation

Фонд имеет хорошо продуманную архитектуру Sass и прекрасно работает для настройки, что является одной из его сильных сторон. На корневом уровне находится settings.scss , который позволяет переопределить любую переменную, используемую для создания компонентов. Однако каждый файл компонента содержит переменные, специфичные для этого компонента.

Foundation также абстрагирует функции, используемые в проекте, в отдельный файл functions.scss . Это хорошо, потому что эти функции являются специфическими для фреймворка, и вы не должны редактировать этот файл.

Все глобальные миксины, такие как радиус границы и эффекты перехода, доступны в components/_global.scss . Они логически структурированы следующим образом:

 - Import - global mixins - Component specific variables (`$button-tny`, `$button-margin-bottom`) - Component specific mixins - Extends - (not the @extend but actual style definitions, where mixins are called) 

Все специфичные для компонента переменные определены как !default _settings.scss , поэтому их можно переопределить с помощью _settings.scss . Если вы предпочитаете, чтобы все было просто, вы можете просто изменить переменные в _settings.scss и назвать это день. Если вы чувствуете себя более предприимчивым, вы можете поиграть с переменными, специфичными для компонентов, и легко иметь возможность изменять внешний вид компонентов.

Поскольку их компоненты построены из миксинов и переменных, это обеспечивает максимальную гибкость. Многие сайты, созданные с использованием Foundation, не выглядят одинаково.

Вы можете использовать архитектуру Sass для большинства малых и средних веб-сайтов. Становится очень легко попасть в область действия любого компонента и иметь все необходимые переменные, миксины и расширения в одном файле.

Вот как выглядит структура папок:

 foundation/ |– foundation.scss # Manifest file |– foundation | |– _functions.scss # Library specific functions | |– _settings.scss # Change variables for the entire project | |– components | | |– _buttons.scss # Component file (will import _globals.scss) | | |– _globals.scss # Global mixins | | |– _alerts.scss # Component file (will import _globals.scss) 

Архитектура Дейла Санде

Дейл Санд в своей презентации «Очистите свой Sass Junk-Drawer» рекомендует модульный подход к организации ваших файлов Sass. Это удобно в проектах уровня предприятия, где количество и визуальная сложность модулей могут быть довольно высокими. Этот подход помогает сохранить всю логику, связанную с модулем, в его собственной папке, что позволяет подмодулям расширять и повторно использовать стили в определенной области. Это также может быть полезно в небольших и средних проектах, если вы предпочитаете отделять презентацию от логики Sass в своих файлах.

Одним из основных преимуществ использования подхода Дейла Санде является тот факт, что он позволяет легко создать отдельную таблицу стилей для конкретного модуля. Внутри вашего проекта вы можете загрузить одну базовую таблицу стилей, которая содержит глобальные стили, и загрузить другую таблицу стилей, относящуюся к модулю. Это помогает убрать много кода из кода, улучшая производительность и скорость загрузки.

 sass/ |– style.scss # Manifest |– modules/ | |– registration/ # Sub Module | | |– _extends.scss # Functional | | |– _functions.scss # Functional | | |– _mixin.scss # Functional | | |– _module_registration.scss # Imports functional partials and contains presentational | | |– _module_personalInfo.scss # Imports functional partials 

 scss/ |– style.scss # Manifest |– partials/ | |– base/ | | |– _content.scss | | |– content | | | |– _variables.scss # Component specific variables | | | |– _extends.scss # Component specific extends | | | |– _mixins.scss # Component specific mixins | |– components/ | | |– _message.scss | | |– message | | | |– _variables.scss | | | |– _extends.scss | | | |– _mixins.scss | |– global/ | | |– _variables.scss | | |– _extends.scss | | |– _mixins.scss | | |– _functions.scss | |– layouts/ | | |– _article.scss | | |– article | | | |– _variables.scss | | | |– _extends.scss | | | |– _mixins.scss