автор Toni_Dev

Руководство для начинающих по Sass

Метки:

В этой статье вы узнаете основы препроцессора SASS/SCSS, что это такое и как использовать его возможности для быстрого написания стилей. Предполагается, что вы уже знакомы с основами HTML, CSS. Браузеры пока не поддерживают SASS/SCSS напрямую, поэтому здесь мы будем пользоваться плагином Live Sass Compiler для компиляции в CSS. Этот плагин является расширением редактора кода VS Code.

Навигация по статье

Что такое Sass?

SASS — это расширение стандартного языка стилей CSS, в котором есть много полезных возможностей. Создан он для того, чтобы упростить написание стилей (например, с ними удобно верстать сайты). SASS помогает придерживаться философии DRY (Don’t repeat yourself — не повторяй себя) при написании CSS.

Sass предоставляет компилятор, который позволяет нам писать таблицы стилей с использованием двух разных синтаксисов: с отступом и кавычками (SCSS). Давайте посмотрим на каждый сейчас.

Компиляция Sass

Важно понимать, что браузеры не понимают Sass-код напрямую. Как и в целом препроцессоры. Sass компилируется в чистый CSS-код. Как все Sass-стили сводят в один общий index.sass, который потом компилируется index.css. За счет этого повышается скорость загрузки страницы, ведь браузеру намного легче подключить стили одним файлом, чем считывать их по отдельности.

Есть несколько способов, чтобы скомпилировать Sass:

Плагин Live Sass Compiler в VS Code (рассмотрим этот способ)
Пакет NPN Node-sass (используется в среде Node.JS)
Сервис Koala

Синтаксис с отступом

Это старый синтаксис с отступом, в котором отсутствуют фигурные скобки и точки с запятой. Он имеет расширение файла .sass.

div
    h1
        font-size: 22px
        color: #111
        margin-bottom: 15px
    h2
        font-size: 18px
        color: #222
        margin-bottom: 10px
    p
        font-size: 16px
        color: #111
        line-height: 1.5

Синтаксис SCSS

Это более новый и популярный синтаксис. По сути, это подмножество синтаксиса CSS3. Это означает, что вы можете написать обычный CSS с некоторыми дополнительными функциями. Из-за его расширенных функций его часто называют Sassy CSS. Он имеет расширение файла .scss.

div {
  h1 {
    font-size: 22px;
    color: #111;
    margin-bottom: 15px;
  }
  h2 {
    font-size: 18px;
    color: #222;
    margin-bottom: 10px;
  }
  p {
    font-size: 16px;
    color: #111;
    line-height: 1.5;
  }
}

В этой статье используется синтаксис SCSS, поскольку он более популярен.

Особенности Sass

Вот некоторые особенности, которые делают Sass настоящим CSS со сверхспособностями

Переменные в Sass

Вы можете объявлять переменные в Sass. Это одна из сильных сторон Sass, поскольку мы можем определять переменные для различных свойств и использовать их в любом файле.

Преимущество здесь в том, что если это значение изменится, вам просто нужно обновить одну строку кода. Это делается путем присвоения имени переменной символа доллара, $ а затем ссылки на нее в другом месте вашего кода.

$dark-color: #111;

.btn {
  color: $dark-color;
}

.box {
  color: $dark-color;
}

Вложение в Sass

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

В CSS

.content {
  width: 800px;
}

.content p {
  font-size: 16px;
  line-height: 1.5;
}

.content a {
  text-decoration: none;
  color: #0000ff;
}

.content a:hover {
  color: #4242ff;
}

.content__box {
  width: 200px;
  height: 200px;
  background-color: #eee;
}

С помощью Sass приведенный выше код можно записать так:

.content {
  & p {
    font-size: 16px;
    line-height: 1.5;
  }
  & a {
    text-decoration: none;
    color: #0000ff;
    &:hover {
      color: #4242ff;
    }
  }
  &__box {
    width: 200px;
    height: 200px;
    background-color: #eee;
  }
}

В приведенном выше коде Sass вы можете заметить символ амперсанда. Это называется родительским селектором.

Родительский селектор &— это специальный селектор, изобретенный Sass, который используется во вложенных селекторах для ссылки на внешний селектор.

Итак, в случае кода выше, родительский селектор & будет ссылаться на родителя .content. Заметьте, что мы можем вкладывать больше одного элемента. Например, у нас есть ссылка a и для того, чтобы прописать состояние при наведении (hover) мы можем внутри этого элемента сослаться на родитель и добавить ему :hover.

Импорты

Это одна из многих замечательных функций Sass, которая дает вам преимущество.

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

Чтобы объявить такой фрагмент, мы начнем имя файла с подчеркивания _и добавим его в другой файл Sass с помощью директивы @import.

Например, если у нас есть _reset.scss, _header.scss и _footer.scss, мы можем импортировать их в основной файл SCSS main.scss.

@import "reset";
@import "header";
@import "footer";

Заметьте, что символы подчеркивания и .scss не добавляются. Это потому, что Sass автоматически предполагает, что вы имеете в виду файл .sass или .scss.

Миксины

Еще одна серьезная проблема с CSS заключается в том, что вы часто будете использовать одну и ту же группу стилей. Миксины позволяют инкапсулировать группу стилей и применять эти стили в любом месте вашего кода с помощью ключевого слова @include. Примером использования примесей является использование Flexbox.

@mixin flex-wrapper {
  display: flex;
  justify-content: space-between;
}

.header {
  @include flex-wrapper;
}

.cards {
  @include flex-wrapper;
}

Функции и операторы Sass

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

Также есть поддержка математических операторов, таких как +, —, \, *, /и %, которые мы можем использовать с функцией calc.

@use "sass:math";

@function pxToRem($pxValue) {
  @return math.div($pxValue, 16px) * 1rem;
}

div {
  width: pxToRem(480px); // получим 30rem
}

Настройка Sass для локальной разработки

Nеперь, когда мы узнали о «теоретических» аспектах Sass, давайте перейдем к коду, чтобы лучше понять, как он работает. В этом разделе вы узнаете, как настроить локальную среду разработки.

Как я говорил в начале статьи: мы будем использовать редактор кода VS Code и расширение Live Sass Compiler.

Устанавливаем расширение Live Sass Compiler

В VS Code в левой панели переходим в раздел Extensions (Расширения) и находим плагин Live Sass Compiler. Устанавливаем его.

Попробуем написать SCSS-код и скомпилировать его

Теперь создайте файл test.scss и напишите туда любой код с синтаксисом SCSS. После чего нажмите кнопку Watch Sass в нижней панели.

Рядом с файлом test.scss должен скомпилироваться CSS файл.

Настройки для плагина

Чтобы файл CSS компилировался в другом месте заходим CTRL + SHIFT +P -> Open Setting (JSON).

Вставляем настройки в settings.json:

"liveSassCompile.settings.generateMap": false,
"liveSassCompile.settings.formats": [
  {
    "format": "expanded",
    "extensionName": ".css",
    "savePath": "~/../css/"
  }
],
"liveSassCompile.settings.autoprefix": ["> 1%", "last 10 versions"],
"liveSassCompile.settings.showOutputWindow": true,
"liveServer.settings.AdvanceCustomBrowserCmdLine": ""

Здесь:

format – расширенный, ужатый и т.д.
savePath – путь для сохранения CSS