На сегодняшний день, разработчики имеют огромный список инструментов-помощников. Одним из них является Sass. В этой записи я подробно распишу что это такое, для чего его используют и как вам лично начать им пользоваться.
Если вы уже знакомы с Sass/Scss, установили его и готовы начать пользоваться им, то вы можете прочитать вот эту запись — «Основы Sass/Scss». В ней я описываю все тонкости препроцессора, а так же как правильно пользоваться им.
Что такое Sass?
Sass — это разновидность препроцессора, который поможет вам во время разработки front-end части. Факт в том, что CSS файлы становятся все больше и больше и через некоторое время с ними становится сложнее работать.
Sass был создан для того, чтобы решить эту проблему. Используется простой синтаксис (который почти полностью схож с обычным CSS), но при всем при этом добавлено много разных возможностей.
Например, чтобы не прописывать одно и тоже свойство несколько раз, можно создать один элемент и далее уже подключать этот элемент к другим классам, а так же много другое. Это лишь маленькая часть того, что можно делать.
Как установить Sass?
Чтобы начать использовать Sass вам нужно скачать и установить Ruby с официального сайта, прописать одну команду в консоль (чтобы установить Sass) и все готово. Ниже весь процесс расписан поэтапно.
- Устанавливаем Ruby. Заходим на официальный сайт в раздел загрузки, выбираем билд (версию) Windows и скачиваем. Например, я использую Windows 7 (64 битовую), поэтому я буду скачивать Ruby 2.2.4 (x64).
- Следуйте всем указаниям установщика.
- После успешной установки Ruby откройте Windows консоль и пропишите
gem install sass
и после этого запустится процесс установки Sass. Если во время установки у вас выдает ошибку, то попробуйте поменятьgem
наsudo
и в итоге у вас должна получиться вот такая строкаsudo gem install sass
.
Тестируем
После того как вы установили Sass, вам нужно убедиться, что вы сделали все правильно. Сделать это можно в два простых этапа.
- Откройте командную строку Windows
- Пропишите туда
sass -v
. Если вы все правильно установили, то у вас должно появиться что-то вроде такой строкиSass 3.4.19 (Selective Steve)
.
PS. Если у вас ничего не выводиться, возможно вы не находитесь в правильной директории. Для начала вам нужно прописать cd
и дальше путь до того места куда вы установили Ruby. В моем случае это будет вот так cd D:\Programs\Ruby22\bin\
. После того как вы попадете в эту директиву, вам нужно прописать sass -v
. Если у вас все равно ничего не показывает, то повторите процесс установки с самого начала и после чего вернитесь снова сюда.
Применяем Sass в работе
Для начала давайте создадим простой файл, который будет называться style.scss и внутри мы напишем следующее:
.main-wrapper { width: 1024px; margin: 0 auto; .sidebar { float: left; width: 30%; } .container { width: 67%; float: right; } }
Обратите внимание, что формат файла .scss, а не .css. Для .scss используется немного другой синтаксис, но он элементарный и вполне понятный с самого начала (если вы раньше когда-либо использовали css). А если вы читаете эту статья, я ожидаю, что вы уже знакомы с ним.
И так продолжим с style.css:
- Откройте Windows консоль, с помощью
cd
команды вам нужно переместиться в папку с Ruby, которая называетсяbin
, (выше я уже описывал как это можно сделать) - Внутри консоли пропишите
sass --watch
и далее перетащите файл style.scss в консоль и она автоматически вставить путь до style.scss файла и уже после нажмите Enter.
В итоге должно получиться примерно так же как показано на скриншоте выше.
PS. Конечно же у вас папки и путь могут различаться. - После ввода команды из второго этапа, на экрана у вас должно появиться что-то похожее на это:
>>> Sass is watching for changes. Press Ctrl-C to stop. write C:\Users\ateshabaev\Desktop\style.css write C:\Users\ateshabaev\Desktop\style.css.map
Это будет означать, что Sass скомпилировал SCSS файл, создал из него два других. Первый это style.css и второй — style.css.map. И теперь вы можете зайти в папку где лежит style.scss и проверить наличие этих файлов и если вы откроете style.css, то вы должны увидите следующее:
.main-wrapper { width: 1024px; margin: 0 auto; } .main-wrapper .sidebar { float: left; width: 30%; } .main-wrapper .container { width: 67%; float: right; } /*# sourceMappingURL=style.css.map */
Как вы можете заметить, Sass взял все содержимое файла style.scss и сделал из него обычный CSS файл.
Так же обратите внимание, что в scss, все стили пишутся в древовидном виде (то есть класс внутри класса).
Например это:
.main-wrapper { display: block; .sidebar { float: left; width: 30%; .block { display: none; } } }
Превратиться в:
.main-wrapper { display: block; } .main-wrapper .sidebar {float: left; width: 30%;} .main-wrapper .sidebar .block {display: none; }
Конечно же SCSS намного удобнее.
Вот некоторые из плюсов SCSS:
- Группирование стилей
- Возможность быстро найти нужный класс/id
- Использование одних и тех же стилей в нескольких местах
Вы намерное спросите, а что такое --watch
? Данная команда принуждает Sass следит за каждым изменением style.scss. То есть каждый раз, когда вы будите сохранять новую копию этого файла, Sass обратит на это внимание и скомпилирует свежую версию CSS.
PS. Если у вас уже имеется скомпилированая версия CSS в той же папке где и style.scss, то он их перезапишет на более новую.
Важные моменты
В этом разделе, я хочу дать несколько советов, которые вам могут пригодиться.
Совет 1
Для того, чтобы создать CSS файл, изначально нужно создать SCSS файл в котором указывать стили для компиляции CSS.
Совет 2
Если во время компиляции у вас возникает ошибка, скорее всего вы ошиблись в синтаксисе Sass. Внимательно проверьте файл и попробуйте скомпилируйте заново.
Источники
Официальный сайт Sass — http://sass-lang.com/guide.
Официальный сайт Ruby — http://rubyinstaller.org/