Mam następujące MIXIN SASS:

@mixin absoluteCenterVertical {
  position: absolute;
  top:50%;
  transform: translateY(-50%);
}

Chcę być w stanie przejść dodatkowe właściwości transformacji do mojego miksera, więc mogę go użyć

.element {
  @include absoluteCenterVertical(rotate(45deg))
}

Który się skompiluje

.element {
  position: absolute;
  top:50%;
  transform: translateY(-50%) rotate(45deg);
}

Jak można to osiągnąć?

1
Boris Grunwald 18 lipiec 2020, 21:36

1 odpowiedź

Najlepsza odpowiedź

Możesz użyć argumenty z miksinami.

@mixin absoluteCenterVertical($extraTransformVals:) {
  transform: translateY(-50%) $extraTransformVals;
}

Jednak powyższe wymaga jednak, aby przejść argument z @include absoluteCenterVertical(rotate(90)); lub cokolwiek możesz przejść. Jeśli nie przekazujesz argumentu, Sass da błąd podczas kompilacji.

Jeśli chcesz mieć Opcjonalny argument tak, że miksin działa bez przekazywania argumentu takiego jak @include absoluteCenterVertical;, musisz podać wartość domyślną za pomocą składni {X1}}

Oto jeden sposób, w jaki możesz to zrobić:

@mixin absoluteCenterVertical($extraTransformVals: noExtraValues) {
  @if $extraTransformVals == noExtraValues {
    transform: translateY(-50%);
  } @else {
    transform: translateY(-50%) $extraTransformVals;
  }
}
2
miir 18 lipiec 2020, 20:04