SCSS/SASS — это препроцессоры CSS, которые расширяют возможности стандартных стилей. Они позволяют использовать переменные, вложенные селекторы, миксины, функции и другие удобные инструменты, делая код более структурированным и легким в поддержке. SCSS — это синтаксис, похожий на CSS, а SASS — более лаконичный вариант с отступами. Оба варианта компилируются в обычный CSS, который понимают браузеры. Эти технологии значительно ускоряют разработку и упрощают работу с большими проектами.

Для себя я выберу SASS, мне больше понравился его синтаксис.

Установка препроцессора SCSS/SASS

Мне не очень понрвился вариант ставить сторонее приложение для работы с препроцессорами, я пойду по старинке и буду делать все через консоль, тем более что я на Линуксе ;)

На windows все ставится через choco на OS X через brew, а на Linux через npm пакеты.

npm install -g sass

Нужно не забыть прописать sudo, если у вас Линукс вы и без меня это прекрасно знаете.

После установки проверим как все прошло командой sass --version если все в порядке, выдаст версию например 1.85.0

После установки Sass вы можете легко преобразовывать ваш код в CSS с помощью команды sass. Для этого достаточно указать Sass, где находится исходный файл с расширением .scss или .sass, и куда сохранить скомпилированный CSS.

Например, выполнив команду sass input.scss output.css в терминале, вы даете Sass указание взять файл input.scss, обработать его и создать готовый CSS-файл с именем output.css. Это позволяет быстро генерировать стили, которые браузеры смогут корректно интерпретировать.

sass input.scss output.css

Мы можем отслеживать изменения в конкретных файлах или папках, используя флаг --watch. Этот флаг указывает Sass автоматически перекомпилировать CSS каждый раз, когда в отслеживаемых файлах происходят изменения. Например, чтобы следить за изменениями в файле input.scss и автоматически обновлять output.css, достаточно запустить команду:

sass --watch input.scss output.css

Это избавляет от необходимости вручную перекомпилировать код после каждого изменения, что значительно ускоряет процесс разработки.

Также мы можем отслеживать изменения в целых папках, указав пути к исходной директории и папке для сохранения скомпилированных CSS-файлов. Для этого нужно разделить пути двоеточием. Например:

sass --watch app/sass:public/stylesheets

Эта команда заставит Sass следить за всеми файлами в папке app/sass и автоматически компилировать их в CSS, сохраняя результат в директорию public/stylesheets. Это особенно удобно при работе с большими проектами, где файлы стилей разбиты на множество компонентов.