@mixin выберите определенный заполнитель, используя аргумент

Question

Я пытаюсь использовать миксин с аргументом и внутри заполнителя. Идея состоит в том, чтобы использовать одну строку кода для выбора определенного заполнителя в классе. На самом деле, я не знаю, есть ли другой лучший способ сделать это, может быть, с помощью функции или другой. Я учу Sass, поэтому я пытаюсь экспериментировать.

HTML

<div class='wrap'>
  <div class='box'></div>
  <div class='box'></div>
</div>

SCSS

// VAR
$size-xs: 30px;
$size-s: 50px;
$size-m: 70px;

$color-1: orange;
$color-2: rgb(34,139,86);

@mixin box($val) {
  %box-one {
    width: $size-s;
    height: $size-s;
    background: $color-1;
    margin: auto;
    border-radius: 6px;
  }
  %box-two {
    width: $size-s;
    height: $size-s;
    background: $color-2;
    margin: auto;
    border-radius: 6px;
  }
  .box {
    @extend #{$val} !optional;
  }
}

.wrap {
  width: 100%;
  height: 100px;
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
  @include box(box-one);
}

спасибо!

Answer 1

В настоящее время ваш код не работает, потому что вы забыли поставить % перед #{$val}:

.box {
  @extend %#{$val} !optional;
}

Во всяком случае, не стоит помещать селекторы-заполнители в миксин, потому что каждый размиксин называется, вы создаете новые селекторы.Это означает, что, например, если вы добавите:

.randomSelector {
  @include box(box-one);
}

Вы получите:

.wrap .box { ... }
.randomSelector .box { ... }

Вместо:

.randomSelector .box, .wrap .box { ... }

Поэтому я бы порекомендовал вам вывести его на экстернализацию.%box-one и %box-two.

И последнее: если единственное различие между этими двумя классами - это свойство background, возможно, лучше использовать один класс, перегруппировавший свойства commons:

.box {
  width: $size-s;
  height: $size-s;
  margin: auto;
  border-radius: 6px;
}

%box-one {
  background: $color-1;
}

%box-two {
  background: $color-2;
}

@mixin box($val) {
  .box {
    @extend %box-#{$val} !optional;
  }
}

.wrap {
  width: 100%;
  height: 100px;
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
  @include box(one);
}

Если у вас есть больше стилей ящиков, вы даже можете динамически создавать заполнители:

$boxStyles: (
  one: $color-1,
  two: $color-2
);

@each $box, $style in $boxStyles {
  %box-#{$box}  {
    background: $style;
  }
}