SASS : первое знакомство с препроцессорами. Начало работы.

Подготовка учебного макета


Для того, чтобы понять как работать с SASS, сделаем небольшую заготовку учебного макета.
Создадим папку project, внутри неё файл index.html, в котором мы пропишем базовую структуру нашего макета.
Также внутри этой папки создайте папки css и sass, внутри которых создайте файлы стилей style.css и style.sass
Всю получившуюся структуру проекта вы можете увидеть на скриншоте ниже в левой его части (скриншот сделан в редакторе кода Visual Studio Code)



Так как браузер не понимает напрямую файл sass, то мы по-прежнему на странице сайта подключаем файл стилей с расширением css.
В нашем случае мы подключаем в заголовке страницы наш файл style.css

Код

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Знакомство с SASS</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
   
</body>
</html>

А стили мы будем писать в файле style.sass. Написанные нами sass стили будут обработаны препроцессором и записаны в подключенный на страницу файл style.css.
Каким образом? Это мы сейчас и рассмотрим.

Компиляция SASS в CSS в редакторе кода Visual Studio Code


Как происходит преобразование SASS-кода в CSS-стили мы будем рассматривать на примере редактора кода Visual Studio Code.
Для этого нам нужно его запустить и установить плагин Live Sass Compiler. После его установки в нижней части программы появится кнопка Watch Saas, она как раз и запускает в работу компилятор.

Настройки плагина Live Sass Compiler

Настройки плагина прописываются в файле settings.json, для этого нужно сначала зайти в Settings, далее в раздел Extensions и затем в списке находим Live Sass Compiler, жмём на ссылку Edit in settings.json и попадаем в файл settings.json, в котором уже прописаны какие-то настройки программы.

Ставим запятую после последней строки и будем дописывать настройки для компилятора нашего:

"liveSassCompile.settings.formats": [
{
"format": "compressed",
"extensionName": ".min.css",
"savePath": "~/../css/"
}
],
"liveSassCompile.settings.autoprefix": [
"> 1%",
"last 2 versions"
]


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

Зачем нам файл css в сжатом виде? Это оптимизация для более быстрой загрузки css-файла, сжатый файл весит меньше, поэтому в коде файла index.html давайте вместо style.css подключим файл style.min.css

Код

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Знакомство с SASS</title>
  <link rel="stylesheet" href="css/style.min.css">
</head>
<body>
   
</body>
</html>

Второй блок настроек нужен для того, чтобы для браузеров в CSS-стили автоматически добавлялись префиксы (например, transform преобразуется в -ms-transform). Это необходимо для браузеров, не поддерживающих определённые CSS-свойства.

Настройки этого блока говорят, что выбираются браузеры с долей использования более 1%, причём берутся последние две версии основных браузеров.

Работа с SASS на конкретном примере


Давайте теперь посмотрим на каком-нибудь простом конкретном примере, как же работать в SASS-файле и как написанное в нём скомпилировать и перевести в стандартный CSS-файл.

Откройте файл index.html и добавьте между тегами body вот такой нехитрый код:

Код

  <div class="container">
  <div class="container_header">
  <div class="container_header_left">
  <p>Привет! Я левый контейнер!</p>
  </div>
  <div class="container_header_right">
  <p>Привет! Я правый контейнер!</p>
  </div>
  </div>
  <div class="container_footer">
  <p>Привет! Я футер и расположен под двумя контейнерами!</p>
  </div>
  </div>

Это каркас нашего макета, он максимально простой, и выглядеть он после того, как мы пропишем ему стили, будет таким образом:



Открываем наш файл style.sass, мы в нём будем прописывать css-стили. Сравните, как прописываются стили в SASS(слева на скриншоте) и CSS(справа):



Первое, что бросается в глаза - это отсутствие в SASS фигурных скобок и точек с запятой при написании стилей.

Составные классы типа .container_header уже не встречаются, вместо этого прописывается родительский класс, например, .container, а составной класс оформляется как &_header, где символ & заменяет имя родительского класса.
По аналогии записывается класс типа .container_header_left (вместо символов & подразумеваются названия родительских классов, например, для &_left символ & - это класс header)
Отступы при этом отображают уровень вложенности элементов.

Хорошо, напишем стили с левой стороны скриншота в файл style.sass (не забывайте сохранять правильные отступы)

Как нам их перевести в нормальный CSS-формат? А очень просто: сохраняем изменения в файле style.sass и нажимаем на кнопку Watch Saas.

Обратите внимание, что у нас автоматически создались новые файлы в папке проекта: это нужный нам style.min.css и style.min.css.map

Если вы сейчас откроете файл style.min.css, то увидите стандартный CSS-код, который скомпилировался из SASS файла, в котором мы его прописывали. И он, так как нам и нужно было, в сжатом, минифицированном виде.



И если сейчас открыть страницу в браузере, то она будет уже оформлена как положено, так как подключенный файл со стилями style.min.css не пустой, а содержит все те стили, что мы прописывали в SASS-файле.

Теперь, если вы и дальше будете прописывать какие-то еще стили в файле style.sass, вам будет достаточно сохранить изменения в этом файле, а в файл style.min.css новые стили добавятся автоматически (при условии, что Watch Sass включена)

Комментарии к материалу: