Sass: Mixin или Placeholder?

По сути, вы пишете его в точности как класс, за исключением того, что вы ставите префикс с символом % Кроме того, он следует тем же правилам именования, что и классы.

Теперь, если вы попытаетесь скомпилировать SCSS, вы не увидите этот пример кода в сгенерированном файле. Как я уже сказал: заполнители не компилируются в источник .

Так что пока этот заполнитель абсолютно бесполезен. Вы не сможете использовать его, если не посмотрите на сторону @extend Директива @extend Вот как вы используете это:

 .container {
  @extend %center;
}

Сделав это, Sass получит содержимое заполнителя %center.container Как я уже сказал, вы также можете расширить существующие селекторы CSS (в дополнение к местозаполнителям SCSS) следующим образом:

 .table-zebra {
  @extend .table;

  tr:nth-of-type(even) {
    background: rgba(0,0,0,.5);
  }
}

Это очень распространенный вариант использования директивы @extend В этом случае мы просим класс .table-zebra.table Расширение селекторов очень удобно, когда вы разрабатываете свой сайт / приложение в модульных компонентах.

Какой использовать?

Таким образом, остается вопрос: какой из них вы должны использовать? Ну, а что касается всего в нашей области: это зависит . Это зависит от контекста и того, что вы в конечном итоге пытаетесь сделать.

Лучший совет: если вам нужны переменные, используйте миксин. В противном случае, расширить заполнитель. Для этого есть две причины:

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

Рассмотрим самый первый пример в этой статье:

 @mixin center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.container {
  @include center;
}

.image-cover {
  @include center;
}

Это приведет к следующему выводу CSS:

 .container {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.image-cover {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

Заметьте дубликат CSS? Это не принесет большого вреда, если будут дублированы только три строки, но если у вас есть миксины, сбрасывающие десятки строк CSS и многократно используемые в проекте, эти три строки могут легко стать равными 300. Что если мы обновим наш пример, чтобы вместо этого использовать заполнитель?

 %center {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.container {
  @extend %center;
}

.image-cover {
  @extend %center;
}

Теперь это сгенерированный CSS:

 .container, .image-cover {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

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

С другой стороны, если вы хотите написать одни и те же свойства в разных местах, но с разными значениями (размерами, цветами и т. Д.), Лучше всего использовать миксин. Если у вас есть группа как фиксированных значений, так и значений переменных, попробуйте комбинацию обоих.

 %center {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

@mixin skin($color, $size) {
  @extend %center;
  background: $color;
  height: $size;
}

a { @include skin(pink, 10em) }
b { @include skin(blue, 90px) }

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

 a, b {
  margin-left: auto;
  margin-right: auto;
  display: block;
}

a {
  background: pink;
  height: 10em;
}

b {
  background: blue;
  height: 90px;
}

Вывод

Так что у вас есть это. Надеюсь, я дал понять, не только для чего нужны миксины и заполнители, но также и когда вы должны их использовать и как они будут влиять на скомпилированный CSS.

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

Эта статья была переведена на французский язык Пьером Шоффе на La Cascade