Пропустить вперед

Освежить информацию о миксинах
Проблема
Решение: Селекторы заполнителей

Освежить информацию о миксинах

Миксин @mixin — это функция At Rule в SASS/SCSS, которая позволяет вам определять стили так, как будто они содержатся в глобальном классе, доступ к которому можно получить из других таблиц стилей.

В качестве основного примера, вы пишете их следующим образом (обычно в таблице стилей под названием mixins.scss):

// mixins.scss
@mixin guest-avatar {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 2px solid orange;
}

Чтобы получить доступ к ним из другого места, импортируйте таблицу стилей @mixin и используйте @include следующим образом:

// about.component.scss

@import '../scss/mixins.scss';

img {
  @include guest-avatar;
}

Проблема

• Вы не можете ссылаться на @mixin в пределах одной таблицы стилей
• Иногда вам нужна повторяемость, чтобы вы могли вносить изменения в стили только в верхней части таблицы стилей (выходя за рамки базовых $variables).

Решение: Селекторы-заместители

С помощью селекторов placeholder вы можете определить тот же псевдокласс с % перед селектором:

// some.component.scss

%rounded-top {
  border-radius: 8px 8px 0px 0px;
  padding: 1rem;
  padding-bottom: 3rem;
}

Теперь вы можете ссылаться на селектор в той же таблице стилей, где он был определен:

// some.component.scss

%rounded-top {
  border-radius: 8px 8px 0px 0px;
  padding: 1rem;
  padding-bottom: 3rem;
}

.bottom-sheet {
  @extend %rounded-top;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

Вот и все. Вот и все.

Риа