Для чего нужно написание CSS класса через амперсанд в Saas?

Для чего нужно написание CSS класса через амперсанд в Saas?

Амперсанд (&) в SCSS — это селектор родителя, который позволяет избежать повторения полного селектора и создавать вложенные правила. Это инструмент для DRY кода и лучшей организации стилей.

Основное использование: вложенные селекторы

Без амперсанда (много повторений):

.button {
  padding: 10px 20px;
  background: blue;
  color: white;
}

.button:hover {
  background: darkblue;
}

.button:active {
  background: navy;
}

.button.primary {
  background: green;
}

.button.disabled {
  opacity: 0.5;
}

С амперсандом в SCSS (DRY):

.button {
  padding: 10px 20px;
  background: blue;
  color: white;

  &:hover {
    background: darkblue;
  }

  &:active {
    background: navy;
  }

  &.primary {
    background: green;
  }

  &.disabled {
    opacity: 0.5;
  }
}

Амперсанд заменяется на родительский селектор (.button).

Использование с модификаторами БЭМ

SCSS с модификаторами (рекомендуется):

.card {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;

  &__header {
    font-size: 20px;
    font-weight: bold;
  }

  &__body {
    margin: 15px 0;
  }

  &__footer {
    color: #666;
  }

  &--primary {
    background: #f0f8ff;
  }

  &--error {
    border-color: red;
    background: #ffe0e0;
  }

  &--disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
}

Компилируется в:

.card { ... }
.card__header { ... }
.card__body { ... }
.card__footer { ... }
.card--primary { ... }
.card--error { ... }
.card--disabled { ... }

Вложенные селекторы для дочерних элементов

.navbar {
  display: flex;
  background: #333;

  & > li {
    color: white;
    padding: 10px;

    &:hover {
      background: #555;
    }
  }

  & a {
    text-decoration: none;
    color: white;

    &:visited {
      color: #ccc;
    }
  }
}

Компилируется в:

.navbar { ... }
.navbar > li { ... }
.navbar > li:hover { ... }
.navbar a { ... }
.navbar a:visited { ... }

Несколько амперсандов для сложных селекторов

Комбинирование амперсандов:

.btn {
  padding: 10px;
  border: none;
  cursor: pointer;

  &:hover {
    background: #eee;

    & svg {
      transform: scale(1.1);
    }
  }

  &:disabled,
  &.disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  & + & {
    margin-left: 10px;
  }
}

Амперсанд в конце селектора (контекстные стили)

Применение класса родителя к потомкам:

.form-field {
  margin-bottom: 15px;

  .form-compact & {
    margin-bottom: 8px;
  }

  .form-large & {
    margin-bottom: 20px;
  }
}

Компилируется в:

.form-field {
  margin-bottom: 15px;
}

.form-compact .form-field {
  margin-bottom: 8px;
}

.form-large .form-field {
  margin-bottom: 20px;
}

Полезно для изменения стилей в зависимости от контекста.

Практический пример: компонент Input

.input {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 16px;
  transition: all 0.3s;

  // Состояния
  &:focus {
    outline: none;
    border-color: #0066cc;
    box-shadow: 0 0 0 3px rgba(0, 102, 204, 0.1);
  }

  &:disabled {
    background: #f5f5f5;
    color: #999;
    cursor: not-allowed;
  }

  // Модификаторы размера
  &--small {
    padding: 6px 10px;
    font-size: 12px;
  }

  &--large {
    padding: 14px 16px;
    font-size: 18px;
  }

  // Модификаторы ошибки
  &--error {
    border-color: #d32f2f;

    &:focus {
      box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.1);
    }
  }

  // Значок справа
  & + .input-icon {
    margin-left: -30px;
    pointer-events: none;
  }
}

Переменные в селекторах с амперсандом

$button-states: (
  'primary': #007bff,
  'success': #28a745,
  'danger': #dc3545,
  'warning': #ffc107
);

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;

  @each $state, $color in $button-states {
    &--#{$state} {
      background: $color;
      color: white;

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

      &:active {
        background: darken($color, 20%);
      }
    }
  }
}

Частая ошибка: забывчивость амперсанда

// НЕПРАВИЛЬНО: создаёт новый селектор вместо вложенного
.card {
  padding: 20px;

  :hover { // это не &:hover!
    background: #eee;
  }
}

// Компилируется в:
// .card { ... }
// .card :hover { ... } <- это ВСЕ :hover элементы внутри .card

// ПРАВИЛЬНО:
.card {
  padding: 20px;

  &:hover { // с амперсандом
    background: #eee;
  }
}

// Компилируется в:
// .card { ... }
// .card:hover { ... } <- селектор самого card

Амперсанд в современном Tailwind CSS

В Tailwind используется @apply с амперсандом:

@layer components {
  .btn {
    @apply px-4 py-2 rounded-lg font-semibold transition-all;

    &:hover {
      @apply shadow-lg;
    }

    &:active {
      @apply scale-95;
    }

    &.primary {
      @apply bg-blue-600 text-white;

      &:hover {
        @apply bg-blue-700;
      }
    }
  }
}

Ключевые выводы

• Амперсанд (&) заменяет селектор родителя — избегаешь повторений
• Используй & для :hover, :active, :focus — вложи в компонент
• Модификаторы БЭМ с & — разделяй вариации компонента
• Контекстные стили — амперсанд в конце селектора
• DRY код — одна логика в одном месте, легче поддерживать

Правильное использование амперсанда создаёт чистый, структурированный и поддерживаемый SCSS код.