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

Sass для веб-разработки

Источник: «Sass For Web Development»
Написание CSS имеет решающее значение для создания красивых и функциональных веб-сайтов, но управление CSS может стать сложной задачей по мере роста размеров и сложности сайтов. Вот тут-то и появляются препроцессоры CSS, такие, как Sass. В этой статье вы познакомитесь с Sass и узнаете, как он может упростить рабочий процесс и помочь писать более эффективный и удобный код.

Использование Sass намного лучше из-за его сверхспособностей; создатели Sass называют его CSS со сверхспособностями. Мы также покажем примеры и познакомим вас с основами файловой структуры Sass, компиляцией Sass в CSS и использованием Sass с популярными CSS фреймворками, такими как Bootstrap и Foundation. К концу этой статьи вы будете иметь чёткое представление о Sass и будете хорошо подготовлены, чтобы начать использовать его в своих веб-проектах.

Что такое Sass

Sass означает Syntactically Awesome Style Sheets (Синтаксически потрясающие таблицы стилей). Sass — это препроцессор CSS, расширяющий функциональность традиционного CSS и позволяющий программистам использовать переменные, функции, примеси и другие передовые возможности делающие написание CSS более эффективным и мощным.

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

Прежде чем продолжить, упомянем несколько сокращений и их полное значение.

Основные возможности Sass

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

Переменные

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

Например, можно определить переменную основного цвета и использовать её в нескольких местах таблицы стилей:

.btn {
  background-color: $primary-color;
}

a {
  color: $primary-color;
}

Вложенность

Sass позволяет вкладывать селекторы друг в друга, что упрощает чтение и организацию кода. Например, можно вложить :hover в селектор кнопки:

.btn {
  background-color: #007bff;

  &:hover {
    background-color: #0069d9;
  }
}

В этом примере & ссылается на родительский селектор .btn, поэтому скомпилированный CSS будет иметь состояние наведения .btn:hover.

Партиалы

Sass позволяет разделить таблицы стилей на отдельные файлы, что упрощает управление и организацию кода. Эти отдельные файлы называются партиалами (partials), и их имена начинаются со знака подчёркивания. Например, мы можем создать партиал с именем _variables.scss для определения переменных:

$primary-color: #007bff;
$secondary-color: #6c757d;

Затем этот партиал можно импортировать в основной файл Sass, используя правило @use:

@use "variables";

.btn-primary {
  background-color: $primary-color;
}

.btn-secondary {
  background-color: $secondary-color;
}

Миксины

Sass позволяет определять повторно используемые блоки кода, называемые миксинами, которые можно использовать в таблице стилей. Например, можно определить миксин для стиля кнопки следующим образом:

@mixin button-style($background-color, $text-color) {
  display: inline-block;
  padding: 10px 20px;
  border-radius: 5px;
  background-color: $background-color;
  color: $text-color;
  text-decoration: none;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  cursor: pointer;

  &:hover {
    background-color: lighten($background-color, 10%);
  }
}

Затем этот миксин можно использовать для любых стилей кнопок, которые мы хотим создать:

.btn-primary {
  @include button-style;
}

.btn-secondary {
  @include button-style;
  background-color: #6c757d;
  border-color: #6c757d;

  &:hover {
    background-color: #5a6268;
    border-color: #545b62;
  }
}

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

Расширенные возможности Sass

Некоторые из расширенных возможностей Sass включают:

Функции

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

@function add($x, $y) {
  @return $x + $y;
}

.container {
  width: add(100px, 50px);
}

Функция add принимает два аргумента $x и $y, и возвращает сумму этих двух чисел. Затем свойство ширины класса .container устанавливается на результат выполнения функции add с аргументами 100px и 50px. Это приведёт к ширине 150px в CSS.

Операторы

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

$container-width: 960px;
$column-width: 200px;

.container {
  width: $container-width;
}

.column {
  float: left;
  width: percentage($column-width / $container-width);
  margin-right: $column-width - 20px;
}

В этом примере определяются две переменные: $container-width и $column-width. Затем используются математические операторы для вычисления ширины столбцов в процентах от ширины контейнера. Функция percentage() преобразует результат вычислений в процентное значение. Свойство margin-right класса .column также определяется с помощью переменной $column-width и операции вычитания.

Управляющие директивы

Управляющие директивы являются ключевыми возможностями в Sass, которые позволяют управлять потоком таблицы стилей и создавать более динамичные и повторно используемые стили. Директива @if является одной из часто используемых управляющих директив. Вот пример использования директивы @if в таблице стилей Sass:

@mixin border-radius($radius) {
  @if $radius == 0 {
    border-radius: 0;
  } @else {
    border-radius: $radius;
  }
}

.box {
  @include border-radius(10px);
}

В этом примере мы определяем миксин border-radius, принимающий ввод $radius. Мы используем директиву @if в миксине для проверки, равен ли $radius 0. Если это так, устанавливаем атрибут border-radius в 0. Если нет, устанавливаем свойство border-radius в $radius. Директива @include вызывает миксин border-radius с аргументом 10px.

Сопоставления

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

$swatches: (
  red: #ff0000,
  green: #00ff00,
  blue: #0000ff,
);

@each $name, $color in $swatches {
  .swatch-#{$name} {
    background-color: $color;
  }
}

Сопоставление $switch определяет набор цветов, которые задаются по имени. Директива @each используется для циклического просмотра сопоставления и создания CSS правил на основе имени каждого образца цвета и его значении. Полученный CSS включает классы swatch-red, swatch-green и swatch-blue, каждый из которых имеет свой фоновый цвет.

Начало работы с Sass

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

Установка Sass

Для установки Sass потребуется установить Node.js. Node.js — это среда выполнения JavaScript, позволяющая запускать JavaScript вне веб-браузера. Его можно сказать с официального сайта Node.js. Следуйте инструкциям по установке для вашей операционной системы.

После установки Node.js можно воспользоваться диспетчером пакетов Node (npm) для установки Sass. Откройте терминал или командную строку и введите следующую команду:

npm install -g sass

Это установит самую последнюю версию Sass на ваш компьютер. Параметр -g устанавливает Sass глобально, позволяя получить к нему доступ из любого каталога. После завершения установки выполните следующую команду, чтобы убедиться, что Sass установлен:

sass –-version

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

Понимание базовой структуры файлов Sass и их отношения к CSS

Файлы Sass структурированы иначе, чем обычные CSS файлы. Файлы Sass — это обычный текстовый файл с расширением .scss или .sass. Расширение .scss используется для файлов синтаксиса SCSS, а расширение .sass — для файлов синтаксиса с отступом.

Файлы Sass организованы с помощью директивы @use (ранее использовалась директива @import, но считается устаревшей и имеет некоторые недостатки), которая позволяет импортировать другие файлы Sass в основной файл. Например, если есть файл с именем _variables.scss, содержащий все переменные Sass, мы можем импортировать его в основной файл следующим образом:

@use "variables"

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

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

Компиляция Sass в CSS

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

Шаги по компиляции Sass в CSS с помощью инструмента командной строки: во-первых, создадим .scss файл для компиляции с именем styles.scss со следующим содержимым:

$primary-color: #007bff;
body {
  background-color: $primary-color;
}

Затем откроем терминал или командную строку и перейдём в каталог, где сохранён наш Sass файл. Для запуска компиляции, выполните следующую команду:

sass styles.sass styles.css

Компилятор Sass прочитает файл styles.scss и скомпилирует его в CSS файл с именем styles.css. Файл styles.css можно открыть в текстовом редакторе или веб-браузере, чтобы посмотреть скомпилированный CSS.

Использование Sass с CSS фреймворками

CSS фреймворки, такие, как Bootstrap и Foundation, обычно используются для создания адаптивных и ориентированных на мобильные устройства веб-сайтов. Они предоставляют обширную коллекцию предварительно созданных CSS и JavaScript файлов, которые можно настроить в соответствии с потребностями конкретного проекта.

Чтобы поддерживать совместимость при использовании Sass с CSS фреймворками, придерживайтесь файловой структуры фреймворка и правил именования. Вот несколько примеров того, как использовать Sass с двумя известными фреймворками, Bootstrap и Foundation:

Использование Sass с Bootstrap

Установите в каталог с вашим проектом файлы Bootstrap CSS с помощью пакетного менеджера npm:

npm install bootstrap --save

Это установит как скомпилированные файлы Bootstrap CSS, так и scss файлы.

Установите Sass с помощью Node.js: npm install -g sass. В каталоге вашего проекта создайте новый каталог с именем scss. В каталоге scss создайте файл с именем custom.scss. В этом файле импортируйте Sass файлы Bootstrap:

@use "node_modules/bootstrap/scss/bootstrap";

Это позволит импортировать Sass файлы Bootstrap в ваш custom.scss. Настройте Bootstrap, переопределив его переменные. Например, чтобы изменить основной (primary) цвет, добавьте в custom.scss следующий код:

$primary: #007bff;

Скомпилируйте custom.scss в CSS с помощью команды sass:

sass scss/custom.scss css/custom.css

Это скомпилирует custom.scss в custom.css. Подключите скомпилированный custom.css в HTML файл:

<link rel="stylesheet" href="css/custom.css">

Использование Sass с Foundation

Установите в каталог с вашим проектом файлы Foundation CSS с помощью пакетного менеджера npm:

npm install foundation-sites --save

Это установит как скомпилированные файлы Foundation CSS, так и scss файлы.

Установите Sass с помощью Node.js: npm install -g sass. В каталоге вашего проекта создайте новый каталог с именем scss. В каталоге scss создайте файл с именем custom.scss. В этом файле импортируйте Sass файлы Foundation:

@use "node_modules/foundation-sites/scss/foundation";

Настройте Foundation, переопределив его переменные. Например, чтобы изменить основной цвет, добавьте в custom.scss следующий код:

$primary-color: #007bff;

Скомпилируйте custom.scss в CSS с помощью команды sass:

sass scss/custom.scss css/custom.css

Это скомпилирует custom.scss в custom.css. Подключите скомпилированный custom.css в HTML файл:

<link rel="stylesheet" href="css/custom.css">

Sass и Scss

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

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

Как правило, Sass и SCSS имеют схожие преимущества и могут помочь в создании CSS, но выбор между ними в основном определяется личными предпочтениями и стилем кодирования.

Преимущества использования Sass с CSS фреймворками

Использование Sass с CSS фреймворками, такими как Bootstrap и Foundation, имеет различные преимущества, такие как:

Недостатки использования Sass с CSS фреймворками

Несмотря на многочисленные преимущества использования Sass с CSS фреймворками, следует учитывать и несколько недостатков:

Рекомендации по использованию Sass

Заключение

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

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

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

Дженерики (универсальные типы) в TypeScript

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

Генерация Laravel миграций из существующей базы данных