Интернет магазин на Magento 2 в версии из коробки по умолчанию поддерживает только Less – CSS препроцессор –  динамический язык стилей, который разработал Alexis Sellier. Он был создан под влиянием языка стилей Sass и в свою очередь, оказал влияние на его новый синтаксис «SCSS», в котором также использован синтаксис, являющийся расширением и не поддерживает SASS

Зачем в Magento 2 использовать SASS?

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% будете инвестировать на адаптацию стилей приобретенного модуля.