Опубликовано:

SASS vs CSS

Источник: «SASS Or Native CSS? A Comparison»
CSS уже не тот, что в 1996 году, и SASS тоже вырос с момента своего создания — какому из них отдать предпочтение сегодня? Мы рассмотрим плюсы и минусы обоих вариантов.

CSS прошёл долгий путь с момента появления в 1996 году. В начале истории языка разработчикам приходилось использовать препроцессоры вроде Sass, облегчающие работу с языком. Среди них были переменные, функции, циклы и условия.

Сегодня CSS сильно отличается от того, что мы видели в 1996 году. С появлением таких функций, как переменные, медиа-запросы и вложенная стилизация, разработчикам больше не нужно полагаться на Sass и другие препроцессоры, как это было раньше.

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

Вложенные стили

Вложенность — это возможность, характерная для таких препроцессоров, как Sass. Некоторые разработчики перешли на Sass только из-за поддержки вложенной стилизации. Вложенность не только упрощает создание стиля, но и делает его более "естественным". Для примера представим, что у вас есть следующий HTML:

<aside>
  <h3>Page Contents</h3>
  <ul>
    <li>Introduction</li>
    <li>Using Loops in JavaScript</li>
    <li>Writing Conditional statements</li>
  </ul>
</aside>

Если вы хотите стилизовать элементы <li> внутри элемента <ul>, поскольку Sass поддерживает вложенность, вы можете сделать следующее:

ul
    background-color: red

    li
        list-style: none

Раньше CSS не мог это сделать, и приходилось прибегать к следующему способу:

ul {
  background-color: red;
}

ul li {
  list-style: none;
}

Теперь вложенность поддерживается CSS, поэтому код будет выглядеть следующим образом:

ul {
  background-color: red;

  li {
    list-style: none;
  }
}

При анализе приведённого выше кода браузер автоматически добавляет пробелы между ul и li.

Это отлично работает, но как быть в ситуациях, когда нужно стилизовать вложенный псевдокласс? Следующий код не будет работать.

div {
  background-color: red;

  :hover {
    text-decoration: underline;
  }
}

Поскольку браузер автоматически добавляет пробелы между вложенным селектором и его родителем, результат анализа селектора будет выглядеть так: div :hover. Чтобы предотвратить такое поведение, добавьте символ & перед вложенным селектором.

div {
  background-color: red;

  &:hover {
    text-decoration: underline;
  }
}

Символ & называется "селектором вложенности", определяющим прямую связь между дочерним элементом и его предком.

Функции и миксины в Sass

Функции — одно из главных преимуществ Sass. Многие функции Sass доступны во встроенных модулях, которые необходимо загрузить перед использованием. Загрузить функцию можно с помощью правила @use.

Некоторые модули включают модуль sass:math, позволяющий работать с числами, модуль sass:string для работы со строками и модуль sass:color, используемый для работы с цветом. Однако не все функции содержатся в модулях. Некоторые функции, например if, доступны глобально.

Например, ниже показано, как можно манипулировать строками с помощью модуля sass:string.

@use "sass:string"

div:after
  display: block
  content: string.quote(Hello)

В приведённом выше блоке кода мы загружаем модуль sass:string с помощью директивы @use, а затем после загрузки модуля применяем стилизацию к псевдоэлементу div:after. Свойству content присваивается результат выражения string.quote(Hello) из загруженного модуля.

Это приведёт к следующему результату:

div:after {
  display: block;
  content: "Hello";
}

Прежде чем перейти к более сложному примеру, давайте рассмотрим, как определить пользовательскую функцию в Sass. Для определения пользовательских функций нужно написать @function и указать имя функции.

Вы можете вернуть значение из функции с помощью правила @return. Определим пользовательскую функцию, вычисляющую площадь квадрата в зависимости от длины его стороны. Длина стороны — это значение, передаваемое в функцию в качестве параметра.

@function calculate-square-area($side-length)
  @return $side-length * $side-length

div
  width: calculate-square-area(40)
  height: calculate-square-area(40)

Приведённый выше код приводит к следующему результату:

div {
  width: 1600;
  height: 1600;
}

Теперь рассмотрим, как можно создать нечто более сложное с помощью функций и миксинов в Sass. Миксины определяются с помощью директивы @mixin. Как и функции, они могут принимать параметры, но, в отличие от функций, они не возвращают значение.

Вместо этого миксины пригодятся, когда необходимо сгруппировать связанные правила стиля. Посмотрите на следующий код и попробуйте догадаться, что происходит:

@use "sass:string"


// Функция для создания класса кнопки на основе типа кнопки
@function generate-button-class($type)
  @return string.quote("button-" + $type)


// Определение стиля кнопки
@mixin button-style($type)
  .#{generate-button-class($type)}
    padding: 10px
    border: 1px solid #333
    background-color: if($type == "primary", #3498db, #e74c3c)
    color: #fff
    text-decoration: none
    display: block
    cursor: pointer

    &:hover
      background-color: darken(if($type == "primary", #3498db, #e74c3c), 10%)

// Применение стилей кнопок к различным типам кнопок
@include button-style("primary")
@include button-style("secondary")

В приведённом выше коде происходит довольно много вещей, поэтому давайте разберём его на части. Во-первых, функция generate-button-class принимает аргумент $type и конкатенирует его со строкой "button-".

Далее миксин button-style получает параметр $type и использует интерполяцию .#{generate-button-class($type)} для вставки результата функции generate-button-class в строку.

Синтаксис интерполяции (#{<выражение>}) удобен, когда нужно динамически генерировать имена классов или значения свойств в строке.

Глобальная функция if() проверяет, является ли параметр $type "primary", и устанавливает background-color значение #3498db, если условие true, и #e74c3c в противном случае.

И наконец, директива @include используется для применения стилей, определённых в миксине. В результате приведённого выше блока кода должно получиться следующее:

.button-primary {
  padding: 10px;
  border: 1px solid #333;
  background-color: #3498db;
  color: #fff;
  text-decoration: none;
  display: block;
  cursor: pointer;
}
.button-primary:hover {
  background-color: #217dbb;
}

.button-secondary {
  padding: 10px;
  border: 1px solid #333;
  background-color: #e74c3c;
  color: #fff;
  text-decoration: none;
  display: block;
  cursor: pointer;
}
.button-secondary:hover {
  background-color: #d62c1a;
}

Функции и At-правила в CSS

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

Среди встроенных функций CSS можно отметить linear-gradient для создания градиентных фонов, calc для выполнения вычислений в значениях свойств, а также функции min и max для работы с минимальными и максимальными значениями. В отличие от Sass, в CSS нет возможности определить пользовательскую функцию.

В CSS предусмотрена поддержка at-правил, представляющих собой специальные инструкции, предваряемые символом "@", которые изменяют поведение CSS. Некоторые из наиболее популярных at-правил, которые можно встретить в современной кодовой базе, включают: @media, @font-face, @keyframes, @supports и @import. Вот как можно использовать каждое из них:

Инструменты сборки и рабочий процесс

Для применения Sass в современной кодовой базе JavaScript необходимо, чтобы на компьютере был установлен Node.js и менеджер пакетов Node (NPM). С NPM установка Sass проста — достаточно выполнить в терминале следующую команду:

npm install -g sass

После успешной установки Sass необходимо использовать компилятор Sass для конвертирования .sass файла в .css файл, который сможет разобрать браузер. Общий синтаксис выглядит следующим образом:

sass <путь-к-sass-файлу> <css-файл-с-результатом>

Если вы хотите конвертировать styles.sass в styles.css, сделайте следующее:

sass styles/styles.sass styles/styles.css

Использование Sass с инструментами сборки, такими как Webpack, требует наличия загрузчиков, таких как css-loader и sass-loader, а также загрузчик MiniCssExtractPlugin.

CSS, в отличие от Sass, не требует дополнительного этапа сборки. CSS — это язык стилей, понятный веб-браузерам, и его не нужно компилировать или обрабатывать, прежде чем он будет интерпретирован браузером.

Взвешивая плюсы и минусы: Sass vs. CSS

Подведём итоги.

Преимущества Sass

Недостатки Sass

Преимущества CSS

Возможные недостатки CSS

Sass vs. CSS: Что нужно учесть

Заключение

Принимая решение между Sass и CSS, нужно учитывать все нюансы проекта и опыт команды. CSS прошёл долгий путь, и для большинства случаев использования может оказаться, что в препроцессоре вроде Sass нет необходимости. Помните, что всегда можно поэкспериментировать с обоими инструментами, чтобы понять, какой из них подходит вам или вашему проекту больше всего. Главное — найти то, что лучше всего подходит именно вам и вашей уникальной ситуации.

Предыдущая Статья

Оптимизация webpack в CI

Следующая Статья

Создание приложения Node.js с TypeScript