На сегодняшний день, разработчики имеют огромный список инструментов-помощников. Одним из них является 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. Внимательно проверьте файл и попробуйте скомпилируйте заново.