Разница между Mixin и Placeholder в SASS

В SASS Mixin и Placeholder очень похожи. Они могут содержать комбинацию свойств css и могут быть повторно использованы во многих местах, подобно переменным, помогающим сократить наш код. Однако на самом деле они работают по-разному.

  • Миксин — копирует миксин в то место, где он используется.

  • Placeholder — копирует селекторы, использующие placeholder, в то место, где объявлен placeholder.

Рассмотрим следующий пример:
Мы объявили миксин bananaColor, а также placeholder coffeeBackground.

Они используются следующими классами:
.paragraph1 использует bananaColor.
.paragraph2 использует bananaColor и coffeeBackground.
.paragraph3 использует coffeeBackground.

Файл SASS:

@mixin bananaColor {
  color: #f5c725;
  font-weight: 600;
}

%coffeeBackground {
  background-color: #b46427;
  padding: 10px;
}

.paragraph1 {
  font-size: 20px;
  height: 100px;

  @include bananaColor;
}

.paragraph2 {
  font-size: 20px;
  height: 100px;

  @include bananaColor;
  @extend %coffeeBackground
}

.paragraph3 {
  font-size: 20px;
  height: 100px;

  @extend %coffeeBackground
}
Вход в полноэкранный режим Выход из полноэкранного режима

Html-файл:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div>
            <p class="paragraph1">paragraph 1</p>
            <p class="paragraph2">paragraph 2</p>
            <p class="paragraph3">paragraph 3</p>
        </div>
    </body>
</html>
Войти в полноэкранный режим Выйти из полноэкранного режима

Результат выглядит так:

Давайте сравним, как SASS компилирует код.

Для Mixin он копирует объявленные свойства mixin в места, где они используются.

Для placeholders он копирует селекторы(.paragraph2, .paragraph3) в placeholder, где они объявлены.

В заключение мы видим, что Mixin и Placeholder буквально делают все наоборот.

Логика Mixin может быть более интуитивной и понятной, чем у Placeholer. Однако это может привести к увеличению объема CSS-кода, поскольку Mixin просто копирует объявленные элементы везде, в то время как Placeholder копирует только селекторы.

Кроме того, Mixin может работать как функция. Мы также можем передавать параметры в Mixin, в то время как в Placeholder мы не можем использовать параметры.

Mixin и Placeholder действительно могут помочь нам организовать и сократить наш код SASS. Мы можем выбрать использование Mixin или Placeholder в зависимости от наших реальных сценариев.

Оцените статью
Procodings.ru
Добавить комментарий