Компиляция SCSS, SASS и LESS: Инструкция по эксплуатации

Упрощение рабочего процесса во время программирования и верстки, сегодня является очень важным моментом в жизни каждого Web-разработчика, а все потому, что технологии не стоят на месте, и для изучения нового, естественно нужно тратить время, которое как я для себя начал замечать, является очень и очень важным – я бы даже сказал, дороже чем любое золото и бриллианты, просто мы его не так ценим думая, что времени у нас много.

Я уже давно заметил, что вовремя вёрстки большую часть времени я трачу именно на настройки CSS кода.

Типичная ситуация: с помощью Emmet я напишу огромнейшую строку, которая в итоге преобразуется в огромное DOM дерево, в котором будут присутствовать все элементы, которые требует мой макет, то тебе списки, ссылки, менюшки, блоки, а вот потом переходишь такой в css файл, и начинаешь творить, причем часами, чего по правде не должно быть.

Вот когда мне это надоело, я начал интересоваться, как ускорить этот процесс, и вот тут наткнулся на SCSS и LESS, позже уже стало интересно, что за SASS там еще такой.

Что такое SASS, SCSS и LESS

Более подробно что такое SASS, SCSS и LESS можно будет узнать в статье какая разница межу SCSS, LESS и SASS, но если рассказывать коротко, то препроцессоры, которые сегодня уже считаются целым динамическим языком стилей.

Их цель ускорить и упростить процесс верстки, так как вовремя вертки тебе очень легко будет построить дерево стилей, и самое главное, что их можно строить так, чтобы не приходилось их постоянно дублировать, копировать, и так дальше, написал целое дерево стилей для определенного блока, а дальше просто добавляем надстройки из css кода.

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

Если сравнивать SASS вместе с SCSS, то можно вполне смело сказать, что это одно и тоже самое, правда разница между ними достаточно немаленькая, потому что если в scss мы видим близкую логику с обычным css, то в sass мы не используем фигурных скобок, или точек с запитой в конце строки. Получается, что пишем все точно так же, только вот из-за отсутствия скобок и точек с запятой все кажется совсем другим.

А если сравнивать SCSS вместе с LESS, то отличия хоть и не глобальные, но все же есть, например, объявление переменных отличается, если в scss мы начинаем переменную со знаком $, то в Less используем @, кроме того, условные операторы, они есть в SCSS, но в LESS их нет, хотя есть возможность как-то через JS использовать подобные трюки (я лично сам не пользовался с ними, потому ничего не могу сказать).

Для того чтобы понять, какой выбрать для себя и что будет лучшее и практичнее, нужно просто попробовать, испытать что лучше и выбрать тот который нравится. Для себя я выбрал SCSS, но это не значит, что мне не приходится пользоваться LESS – проекты ведь бывают разные попадаются.

Как начать компилировать SCSS и другие файлы?

На самом деле если раньше для этого нужно было использовать те технологии, которые нам предоставил разработчик, то сегодня компиляция уже не составляет такой проблемы. Вкратце расскажу, как это было раньше: сначала написали код на SASS к примеру, потом через командную строку, указали через путь к файлу, компилятор обработал ну и на выхлопе имеем готовый css файлик, а сегодня это все можно настроить автоматом.

Сегодня мы пишем код, сохраняем файлик, и его сразу какой-нибудь там установленный вами Watcher компилирует, а бывает даже еще и страницу браузера обновляет сам.

В общем компиляцию scss можно настроить разными способами, и в ниже приведённом списке я не использовал прям все методы которые существуют в мире, но этого будет предостаточно для любого уважающего себя Front-end Developer’a, все которые вы увидите ниже в списке я испытал и сам, так как приходилось при работе, а некоторые я нашел в интернете при подготовке этого материала, в любом случае я испытал все на себе, для того, чтобы понимать, как это работает – не могу же я написать о чем-то чего не понимаю, а то в действительности выйдет, что эта статья — это не помощь а усложнение в вашей работе ну и моей конечно же.

Но самое главное, что результат один, вы получаете необходимый вам скомпилированный файлик в формате CSS.

Установить Ruby и компилировать через него

Этот на самом деле очень простой способ (если вы решили программировать на Ruby), мне даже по правде он немного gulp напомнил (совсем немного, но о нем я ниже расскажу).  Как установить Ruby на свой компьютер я в рамках этой статьи не буду объяснять, для этого перейдите просто по ссылке.

А вот как через него уже использовать sass компилятор я покажу в двух строчках. Еще хочу оговориться, что ходят слухи, если у вас MacOS, то Ruby там уже есть и ничего устанавливать не нужно, но об этом вы мне напишете в комментариях если знаете точно.

Все что вам нужно сделать:

  • Нажать Win+R и ввести в окошке cmd (Если линукс, то просто войти в терминал);
  • Перейдите в ту папку, в которой находится ваш файл c помощью cd, у меня это примерно выглядело так cd C://Sites, и я в той директории в которую мне нужно было попасть.
  • Ну а дальше, у тебя есть два варианта (те самые две строчки), либо скомпилировать файл одноразово, либо отслеживать его изменения и постоянно компилировать после нажатия вами CTRL+S, об этом я писал чутка выше;
  • Если хотите скомпилировать файл одноразово вводите: sass style.scss style.css где style.scss это тот файл, который вы собираетесь компилировать, а style.css, это тот файл который вы получите на выхлопе. Можно конечно дать ему и другое имя, но какой в этом смысл.
  • Если вы в этот самый момент верстаете, то каждый рад компилировать файлы отдельно, будет вообще плохим вариантом, потому вводим sass —watch styles.scss:styles.css и теперь, каждое ваше изменение файле, будет отслеживаться и сразу же компилироваться.
компиляция scss в css

В общем все настолько просто на сколько возможно, правда устанавливать Ruby только ради этого нет смысла, у меня он правда уже был установлен. Но дам подсказку, тех же результатов можно добиться и с помощью NodeJs.

Установить Prepros и компилировать через него

Самая моя любимая программа, которая решает для меня и эту проблему в том числе, это Prepros, правда есть у нее и скажем так недостатки, а именно то, что она условно платная. С одной стороны, она бесплатная, так как нет никаких ограничений, кроме надоедливой плашки со словами «Если тебе понравилось купи лицензию», которая кстати стоит 29 долларов, но можно либо просто игнорировать эту самую плашку, либо найти решение против нее в интернете, но дальше ты в курсе что делать. Как пользоваться программой для этого есть целая инструкция, а так я скажу в двух словах что просто нужно сделать.

Prepros компиляция препроцессоров scss less

Просто перетягиваешь свой проект в программу, и все, оно работает причем автоматически. Причем хочу заметить один момент.

Если у тебя не просто верстка c обычным html css (scss и less), а также JavaScript, то локальный сервер не сработает, так как он не работает с php, python или Ruby, но это не значит, что программа автоматически станет бесполезной. Просто добавляете туда папку с всеми файлами чаще сего эта папка называется assets, и компиляция вашего sass или less, будет проходить на ура.

Выходит, можно будет использовать даже в WordPress или другой крутой и известной CMS.

Потому программа и есть моим любимчиком.

Компиляция через Scout-App

Эта программа мне очень напоминает Prepros, но при этом Scout-App является полностью бесплатной ну и ее цель конечно же это только компиляция SCSS и LESS файлов. По факту обзор программы и работа с ней — это опять-таки тема одной статьи, но если коротко о ней, то все очень просто.

Scss компиляция на Scout-app

Добавляешь свой проект в программу, делаешь первичные настройки типа, какой файл компилировать и куда его поставить после компиляции. Правда, что мне не нравится в программе, это то что она ругается если вдруг я хочу компилировать файлы и сохранять их в одной и той же папке.

Обязательно нужно отделять в разные папки, что иногда вообще не кстати. А так в целом программа работает на ура, есть русский интерфейс, если вы допустите какую-то ошибку, то имеется отличное меню статуса о проектах. Так вы всегда будете проинформированы об успешных и ошибочных компиляциях. Кроме того, программу никак устанавливать не нужно, скачал, запустил и работаешь с ней.

Koala самое простое решение для компиляции SCSS и LESS

В целом, заголовок говорит все за себя. У программы есть только один недостаток, а именно то, что ее нужно устанавливать (просто скачать и нажать установить и все), но мне даже смешно было писать об этом недостатке, потому что в остальном программа абсолютно бесплатная, и свободно работает с Less,Sass, CoffeeScript и Compass Framework.

Компиляция scss с помощью Koala

Есть русский язык, ну и в отличии от предыдущей программы (Scout-app), мы можем выгружать скомпилированные файлы в той же папке, в которой мы взяли наш препроцессор.

В общем это одна из лучших бесплатных программ, делающих свое дело на ура. Все что нужно, установил и используешь. Собственно, ее я вам и рекомендую, если не собираетесь устанавливать и возиться с Prepros.

Gulp

Работа с Gulp это тема для целой серии статей как по мне, потому что не зря многие студии берут людей со знаниями и опытом работы в нем, да еще и заставляют развиваться вместе с ним.

Это реально мощный продукт, пусть настроить его не так и просто. Но он умеет не только компилировать SCSS или LESS ну и много других вещей, таких как сжатие картинок, и минификация css, js и html, перезагрузка браузера, в общем его назвали не зря комплексом сборки веб-приложений.

В общем крутой продукт для крутого Front-end Разработчика, если ты считаешь себя таким, то переходи по этой ссылке устанавливай и начинай его активно использовать, причем за это платят и не мало.

LiveReload для Sublime Text 3

Как установить и использовать LiveReload я уже писал, но в целом вместе с этим дополнением к текстовому редактору, если вы все –таки работаете в нем, то это оптимизирует ваше время в общем хорошем объёме.

Простой плагин, который мало того, что обновит браузер после того, как вы напишете что-то в файл и сохраните его, да еще и сможет компилировать ваши SCSS и LESS.

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

Webstorm, и PhpStorm компиляция

Если вы пользуетесь этой или этими программами, значит знаете, что это две родные программы, которые и по интерфейсу похожи между собой и по функционалу, тоже, кроме предназначения.

В общем IDE очень крутая, но когда я узнал, что туда можно бахнуть компилятор scss, то моему счастью вообще не было границ. А почему нет, главной целью было настроить эту всю систему, а потом просто пользуешься, и удобно, и полезно.

Правда для установки нужно немного поплясать с бубном.

  1. Сперва устанавливаем NodeJS для того, чтобы на нашем компьютере работал npm
  2. Дальше в командной строке пишем npm install node-sass –g
  3. Открываем настройки и переходим в Tools -> File Watchers и выбираемsass
  4.  Из настроек я лишь снимал галочку c track only root files, для того чтобы компилировались файлы по всему проекту, а не только те которые находятся в корне папки.
Компиляция scss и less на webstorm, phpstorm

И все на этом конец, а если вам нужен LESS, то вводим с командной строки npm install less, и проходимся по инструкции.

Все супер просто и практично.

Заключительная часть

В общем пока я писал этот материал, я включал и исключал много разных программ, но вставил только самые лучшие программы, утилиты и плагины, ну и по возможности смотрел бесплатные. Если честно, я надеюсь, что я помог тебе как-то, и если ты хоть как-то хочешь сказать спасибо, то не забудь поделиться ссылочкой на эту статью в своей социальной сети, может твои друзья тоже как-то оценят. Спасибо!

Раз в неделю мы отправляем дайджест с самыми популярными статьями.

Оставьте комментарий