Использование SASS вместо LESS на Magento2

Использование SASS вместо LESS на Magento2

Интернет магазин на 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 himself

eBay Search VP, M2 product technical lead

SASS более мощный, чем 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

  1. Запустить composer require snowdog/frontools
  2. Перейти в папку (ваш проект Magento 2) cd vendor/snowdog/frontools
  3. Запустить yarn или npm install
  4. Вам нужно принять решение, где вы хотите сохранить конфигурационные файлы, в папке пакета fronttools или другом месте dev/tools/frontools/config. Запустите gulp setup (в той же папкеvendor/snowdog/frontools) чтобы автоматически скопировать тестовые конфиг файлы в папку dev/tools/frontools/config также будет создан симлинк на основную папку, чтобы вам было проще искать ваши конфиг файлы
  5. Определение/описание вашей темы в файле настроек – 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% будете инвестировать на адаптацию стилей приобретенного модуля.