Доброго времени суток, я учусь веб разработке, именно фронтенд части, слышал, что есть такая штука как sass, и что это более удобная штука чем обычный css, подскажите что это и как установить себе.
Доброго, sass это модуль включенный в Haml, по сути это метаязык основанный на css который создан для того что бы была возможность абстрагировать css код и упростить файлы каскадных таблиц стилей.
Сам по себе язык имеет два разных синтаксиса, sass - в нем отсутствуют фигурные скобки, а вложенные элементы реализованы с помощью отступов, SCSS использует скобки как в css. Одна из особенностей sass это вложенные правила которые облегчают процесс создания и редактирования вложенных селекторов.
Если используешь Node.js то можешь установить Sass с помощью npm, просто введи:
npm install -g sass
Sass это очень хорошая вещь! Советую выучить его. На днях писал статью про него:
Sass — это метаязык на основе CSS, предназначенный для увеличения уровня абстракции CSS кода и упрощения файлов каскадных таблиц стилей.
Sass относится к категории препроцессоров CSS. На данный момент является одним из самых популярных препроцессоров. “Больших игроков” на этом поле не так много!!!! Я выделил бы их всего три: LESS, SASS(SCSS) и Stylus.
Да бытует мнение что препроцессоры уже “отжили” свое, но я смею с этим не согласиться. Ванильный CSS хорошо но в крупных проектах показывает себя не с лучшей стороны. Как бы то ни было препроцессоры лучше знать.
Давайте перейдем к делу!
Прежде чем написать свой первый SASS(SCSS) код и конвертировать его в обычный CSS нам нужно установить Ruby. Да-да, именно Ruby! Именно с помощью него код SCSS компилируется в CSS. Идем на официальный сайт Ruby и качаем (https://rubyinstaller.org/). Какую версию устанавливать решать Вам, если вы не смогли сразу определиться прочитайте рекомендации прямо на сайте Ruby. На момент написания статьи вышла версия Ruby Devkit 2.5.1-2 но я предпочитаю использовать более стабильные версии и устанавливаю Ruby Devkit 2.4.4-2. Установку запускаю в стандартном режиме и понеслась....
На завершающем этапе Вас спросит хотите ли вы установить среду разработки MSYS? Дело хозяйское! Решать Вам я ей не пользуюсь. Лично я пользуюсь командной строкой и IDE. Так что самый последний пункт я пропускаю. Привожу галочку run MSYS в неактивное состояние и финиширую.
Теперь пришла очередь установки самого SASS. Я работаю под Windows поэтому и описывать буду под него же. Заходим в командную строку. Есть 2 способа через меню пуск или нажимаем win r и вписываем cmd жмем Enter. В открывшемся командном окне пишем:
gem install sass
Sass у нас установлен. Далее следует установить framework. Их у нас достаточно много и опять же только от ваших предпочтений зависит что устанавливать. В моем случае Compass.
gem install compass
Дальше есть небольшой список команд который Вам понадобится при работе с SASS. Каждый в деталях описывать не буду да они этого и не требуют.
compass init
- установка проект compass, предварительно нужно перейти в папку с проектом
compass watch
- автоматическая генерация из sass в css.
Основывается на данных внесенных в файл config.rb
# Set this to the root of your project when deployed:
#корневая папка проекта - указывает, что это текущая папка
http_path = "/"
#папка в которую будет попадать готовый css
css_dir = "css"
#папка из которой берутся исходники sass
sass_dir = "sass"
Для меня лично стало большим преимуществом, что в нем намного легче ограничить область видимости свойств и скорость верстки на порядок увеличивается!
сайт на русском - https://sass-scss.ru/documentation/
А кроме Ruby можно как-то ещё скомпилировать SCSS в CSS, или это единственный, скажем, инструмент для этой задачи?
Лично на своем опыте я не пробовал встречал компиляторов для scss не на ruby. Можно попробовать less он генерируется с помощью js.