«Директивы Sass» относятся к специальным командам или инструкциям на языке препроцессора Sass (синтаксически удивительные таблицы стилей). Эти директивы используются для управления компиляцией и поведением кода Sass.

Вот несколько часто используемых директив Sass и примеры кода:

1. @import: директива @import используется для включения других файлов Sass в текущий файл.

@import "variables.scss";
@import "mixins.scss";

2. @extend: Директива @extend используется для совместного использования стилей между селекторами. Это позволяет одному селектору наследовать стили от другого селектора.

.btn {
  background-color: blue;
  color: white;
}
.btn-primary {
  @extend .btn;
  font-weight: bold;
}

3. @mixin и @include: директива @mixin используется для определения повторно используемых блоков стилей, а директива @include используется для включения этих миксинов в селекторы.

@mixin border-radius($radius) {
  border-radius: $radius;
}
.btn {
  @include border-radius(4px);
}

4. @if, @else if и @else: эти директивы используются для условных операторов в коде Sass.

$background-color: red;
body {
  @if $background-color == red {
    background-color: $background-color;
  } @else if $background-color == blue {
    background-color: $background-color;
  } @else {
    background-color: white;
  }
}

5. @for и @each: эти директивы используются для цикла и перебора списков или диапазонов значений.

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}
$colors: red, green, blue;
@each $color in $colors {
  .text-#{$color} {
    color: $color;
  }
}