60. SASS/SCSS basics

CSS: Основы SASS/SCSS

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

Зачем использовать SASS/SCSS?

1. Повторное использование кода: С помощью переменных, примесей и наследования можно избежать дублирования стилей.
2. Организация: Разбивайте большие CSS-файлы на более мелкие, управляемые части.
3. Динамичность: Используйте логику, циклы и условия для генерации стилей.
4. Читаемость: Структурированный код легче читать и понимать.

Основные возможности SASS/SCSS

1. Переменные

SASS-переменные начинаются с символа $ и позволяют хранить значения (цвета, размеры шрифтов, отступы и т.д.) для многократного использования. Это значительно упрощает изменение глобальных стилей.

_variables.scss

$primary-color: #007bff;
$secondary-color: #6c757d;
$font-stack: 'Helvetica Neue', Helvetica, Arial, sans-serif;
$base-spacing: 16px;

// style.scss
.container {
  background-color: $primary-color;
  padding: $base-spacing;
  font-family: $font-stack;
  color: lighten($secondary-color, 20%); // Встроенные функции SASS, например, для работы с цветом
}

.button {
  background-color: $primary-color;
  color: white;
  padding: $base-spacing / 2 $base-spacing;
  border-radius: 4px;
}

Сравнение: CSS Custom Properties (--var-name: value;) также предлагают переменные, но SASS-переменные обрабатываются на этапе компиляции, а CSS Custom Properties — в браузере. SASS-переменные могут использоваться для логики (например, в условиях), в то время как CSS Custom Properties — нет.

2. Вложенность (Nesting)

Позволяет вкладывать CSS-селекторы друг в друга, отражая HTML-структуру. Это улучшает читаемость и уменьшает дублирование селекторов. Символ & используется для ссылки на родительский селектор.

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      display: inline-block;

      a {
        display: block;
        padding: 6px 12px;
        text-decoration: none;
        color: $primary-color;

        &:hover { // Вложенность для псевдоклассов, например :hover, :focus
          background-color: lighten($primary-color, 30%);
        }
      }
    }
  }
}

3. Примеси (Mixins)

Примеси (@mixin) позволяют создавать переиспользуемые блоки CSS-деклараций. Вы можете передавать им аргументы, что делает их очень гибкими. Для использования примеси применяется директива @include.

@mixin flex-center($direction: row) {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: $direction;
}

@mixin button-styles($bg-color, $text-color: white) {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: $bg-color;
  color: $text-color;
  cursor: pointer;
  transition: background-color 0.3s ease;

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

.header {
  @include flex-center; // Использование mixin без аргументов
  height: 80px;
  background-color: $secondary-color;
}

.footer {
  @include flex-center(column); // Использование mixin с передачей аргумента
  padding: 20px;
  background-color: darken($secondary-color, 10%);
}

.btn-primary {
  @include button-styles($primary-color);
}

.btn-secondary {
  @include button-styles($secondary-color, #333);
}

4. Частичные файлы и импорт (@import)

Для организации кода SASS позволяет разбивать стили на более мелкие файлы, называемые “частичными файлами” (partials). Их имена начинаются с нижнего подчеркивания (например, _buttons.scss). Эти файлы затем импортируются в основной файл без указания расширения и нижнего подчеркивания.

style.scss

@import 'variables';   // Импорт _variables.scss
@import 'mixins';      // Импорт _mixins.scss
@import 'base';        // Импорт _base.scss
@import 'components/buttons'; // Импорт _components/_buttons.scss
@import 'layout/header';

body {
  font-family: $font-stack;
  color: #333;
}

5. Расширение/Наследование (@extend)

Директива @extend позволяет одному селектору наследовать все стили другого селектора. Это полезно, когда у нескольких элементов есть общие стили, но при этом они имеют и свои уникальные особенности. Используйте заполнители (placeholder selectors), начинающиеся с %, чтобы избежать генерации лишнего CSS-кода, если заполнитель не используется.

%message-base { // Заполнитель, не будет сгенерирован в CSS, если не используется
  border: 1px solid;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 5px;
}

.success-message {
  @extend %message-base; // Наследование стилей от заполнителя
  border-color: green;
  color: green;
  background-color: lighten(green, 40%);
}

.error-message {
  @extend %message-base;
  border-color: red;
  color: red;
  background-color: lighten(red, 40%);
}

.warning-message {
  @extend %message-base;
  border-color: orange;
  color: orange;
  background-color: lighten(orange, 40%);
}

Типичные ошибки

• Чрезмерная вложенность: Глубокая вложенность (более 3-4 уровней) делает код трудночитаемым и может генерировать избыточные и специфичные селекторы. Стремитесь к плоской структуре.
• Неправильное использование @extend: Если вы расширяете селектор, который используется во многих местах, это может привести к нежелательному раздуванию сгенерированного CSS. Обычно @mixin предпочтительнее для повторного использования свойств, а @extend — для семантического наследования общих стилей.
• Использование @import для каждого мельчайшего файла: Большое количество @import может замедлить компиляцию, хотя современные версии SASS оптимизированы. Лучше группировать связанные частичные файлы по функционалу.

🎯 Практика

1. Создайте файл _config.scss и определите в нем переменные для цветов, шрифтов и стандартных отступов.
2. Создайте файл _buttons.scss. Используйте миксин @mixin button-base($bg-color) для создания базового стиля кнопок, а затем примените его к классам .btn-primary и .btn-secondary, используя цвета из _config.scss.
3. В style.scss импортируйте _config.scss и _buttons.scss. Примените вложенность для стилей кнопки, например, для состояния :hover.

💡 Совет

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

Практика

Попробуйте примеры в интерактивном редакторе (используются CSS Custom Properties для демонстрации концепций SASS):