Введение
Stylify динамически генерирует CSS на основе того, что вы пишете. Синтаксис похож на css property:value
. Определенные утилиты комбинируются с селекторами компонентов и в процессе производства минимизируются до минимума, например, от .color\:red,.button {color:red}
до _zx, _ga{color:red}
.
С Stylify вы можете оставаться в шаблонах Twig или файлах PHP, писать селекторы и получать наименьшие фрагменты CSS для каждой страницы отдельно 🤟
Быстрая настройка Symfony
Самый простой способ начать — использовать пакеты Symfony Skeleton и Webapp.
Добавьте HpController src/Controller/HpController.php
и шаблон главной страницы templates/hp.html.twig
.
Стилизация интеграции
Установите универсальный плагин Stylify.
Обновите файл webpack.config.js. Импортируйте Stylify, добавьте плагин и запись стиля hp.
Измените app.css
в assets/app.js
на «layout.css» и добавьте ссылку css в файл hp.html.twig
.
Стилизация веб-сайта
После завершения настройки отредактируйте hp.html.twig
и запустите npm run dev
.
Stylify найдет селектор color:blue
и сгенерирует для него css. .color\:blue{color:blue}
в homepage.css
.
Некоторый код часто необходимо повторно использовать на нескольких страницах. Раздувать шаблоны утилитами и жестко запрограммированными юнитами в селекторах — не лучшая идея. Давайте определим компонент container
и некоторые переменные.
Откройте webpack.config.js
и отредактируйте конфигурацию плагина Stylify:
Теперь мы можем обновить base.html.twig
и hp.html.twig
Иногда некоторые компоненты используются только в одном месте. Не имеет смысла определять их в файле webpack.config.js
. Мы также можем определять компоненты, переменные и т. д. непосредственно в файле, в котором они используются. Для этого в Stylify есть параметры контента.
Давайте добавим компонент абзаца в hp.html.twig
:
Производственная сборка
Когда мы запускаем сборку для производства npm run build
, Stylify автоматически искажает все распознанные селекторы и генерирует оптимизированный CSS.
Оптимизировано hp.html.twig:
Оптимизирован hp css:
Пример также можно найти на сайте Stylifycss.com.
Настройте все, что вам нужно
Приведенные выше примеры не включают в себя все, что может сделать Stylify:
- Вы можете сопоставить вложенные файлы в шаблон
- Стиль глобальные селекторы
- Определить пользовательские экраны
- Добавьте собственные макросы, например
ml:20px
для поля слева - И многое другое
Не стесняйтесь оформить заказ, чтобы узнать больше 💎.
Дайте мне знать, что вы думаете!
Буду рад любым отзывам! Stylify — это все еще новая библиотека, и есть много возможностей для улучшения 🙂.
Оставайтесь на связи:
👉 @8machy
👉 @stylifycss
👉 Stylifycss.com
👉 dev.to/machy8
👉 medium.com/@8machy