SCSS (Sassy CSS) — популярный препроцессор CSS, расширяющий возможности традиционного CSS. Одной из мощных функций SCSS являются миксины, которые позволяют повторно использовать блоки кода в таблицах стилей. В этой статье мы рассмотрим различные методы объявления параметров по умолчанию для примесей в SCSS, а также приведем примеры кода, иллюстрирующие каждый подход.

Метод 1: использование директив @if и @else

@mixin button($color: blue, $background: white) {
  background-color: $background;
  color: $color;
  // mixin code...
}

Использование:

.button {
  @include button($color: red);
}

Метод 2: использование @each и карты

$button-styles: (
  color: blue,
  background: white
);
@mixin button($style: $button-styles) {
  @each $property, $value in $style {
    #{$property}: $value;
  }
// mixin code...
}

Использование:

.button {
  @include button($style: (color: red));
}

Метод 3: использование @function и @return

@function button-defaults($color: blue, $background: white) {
  @return (
    color: $color,
    background: $background
  );
}
@mixin button($style: button-defaults()) {
  @each $property, $value in $style {
    #{$property}: $value;
  }
// mixin code...
}

Использование:

.button {
  @include button($style: (color: red));
}

Метод 4. Использование %placeholders

%button-defaults {
  color: blue;
  background: white;
}
@mixin button() {
  @extend %button-defaults;
  // mixin code...
}

Использование:

.button {
  @include button();
}

Метод 5. Использование директивы @content

@mixin button($color: blue, $background: white) {
  background-color: $background;
  color: $color;
  // mixin code...
  @content;
}

Использование:

.button {
  @include button($color: red) {
    // additional styles specific to .button
  };
}

В этой статье мы рассмотрели несколько методов объявления параметров по умолчанию для примесей в SCSS. Каждый метод обеспечивает гибкость в определении значений по умолчанию для параметров примеси, что позволяет легко настраивать и повторно использовать код. Используя эти методы, разработчики могут повысить производительность и удобство обслуживания таблиц стилей SCSS.

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