Интернет магазин на Magento 2 в версии из коробки по умолчанию поддерживает только Less – CSS препроцессор – динамический язык стилей, который разработал Alexis Sellier. Он был создан под влиянием языка стилей Sass и в свою очередь, оказал влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением и не поддерживает SASS
Зачем в Magento 2 использовать SASS?
SASS is more powerful than LESS, and appears to be gaining more market share over LESS. So why did Magento 2 choose LESS? Sorry, a boring pragmatic reason:
At the time we had to commit to a technology, there were several stable LESS pre-processors available in PHP, but no (stable) PHP implementations for SASS.
Alan Kent himselfSASS более мощный, чем LESS, и по-видимому, получает больше доли рынка по сравнению с LESS. Итак, почему Magento 2 выбрал LESS? Извините, но причина слишком банальная:
В то время, когда нам приходилось посвящать себя технологии, для PHP было несколько стабильных процессоров LESS, но не было (стабильных) реализаций SASS.
Другими словами, это означает, что в ввиду ограниченного времени на изучение или поиск стабильной реализации SASS на PHP было принято решение использовать LESS
SASS достаточно популярен среди фронт-энд разработчиков и не только и если вы (как и я) привыкли использовать именно его, то ниже инструкция как интегрировать css препроцессор в проект на Magento 2
Проект «Less to Sass Community Project» официально поддерживается Magento, а Theme Blank SASS – результат этого проекта – пустая тема Magento 2 (готовая к выпуску), преобразованная в SASS.
Вместе с сопровождающим пакетом Fronttools вы получаете инструменты для разработки и расширяемую blank тему, основанную на SASS, для того чтобы у вас была возможность разработать свою собственную тему.
Как установить SASS тему и Fronttools
- Запустить composer require snowdog/frontools
- Перейти в папку (ваш проект Magento 2) cd vendor/snowdog/frontools
- Запустить yarn или npm install
- Вам нужно принять решение, где вы хотите сохранить конфигурационные файлы, в папке пакета fronttools или другом месте dev/tools/frontools/config. Запустите gulp setup (в той же папкеvendor/snowdog/frontools) чтобы автоматически скопировать тестовые конфиг файлы в папку dev/tools/frontools/config также будет создан симлинк на основную папку, чтобы вам было проще искать ваши конфиг файлы
- Определение/описание вашей темы в файле настроек – themes.json.
themes.json structure
- src – полный путь к теме
- dest – полный путь к статическим файлам pub/static/[theme_area]/[theme_vendor]/[theme_name]
- locale – массив из доступных локалей
- parent – имя родительской темы
- stylesDir – (стили по умолчанию) путь к папке со стилями. По умолчанию Magento 2 использует web/css.
- disableSuffix – выключить добавление .min суффикса используйте –prod флаг.
- postcss – (по умолчанию [“plugins.autoprefixer()”]) используется массив для передачи/использования плагинов
- modules – список модулей, которые вы хотите использовать для генерации map в вашей теме
- ignore – массив – петтерны, лист игнориорвания
Пример themes.json
{ "blank": { "src": "vendor/snowdog/theme-blank-sass", "dest": "pub/static/frontend/Snowdog/blank", "locale": ["en_US"], "postcss": ["plugins.autoprefixer()"], "ignore": [".test"] } }
Компиляция SASS в CSS
Запустите команду внутри папки /tools/ вашего проекта, если папка еще не была создана, то команду gulp setup в папке /vendor/snowdog/frontools/
gulp styles
Полезные команды
- gulp clean удаление статического контента в папке /pub/static
- gulp dev запуск browserSync, babel, styles, watch tasks.
Примечания
Приобретая модули для Magento, которые имеют html шаблоны и стили/разметку, вы будете тратить дополнительные средства – время на адаптацию стилей, ибо по умолчанию, все модули которые имеют html элементы и разметку для них, разрабатываются под тему Luma, которая в свою очередь разработана на Less.
Но если ваш магазин использует оригинальную тему, вы постоянно следите за обновлениями на сайте, то даже при использовании темы на Less, вы 100% будете инвестировать на адаптацию стилей приобретенного модуля.