Mixin useFlex

Mixiny w preprocesorze Sass powstały, aby ułatwić nam życie. Pozwalają na grupowanie kodu i używanie go wielokrotnie. 

W kodzie CSS często używam display: flex; i po jakimś czasie zauważyłam, że elementy flexboxa w łatwy sposób można użyć jako mixin. Poniżej znajduje się przykładowy kod:

@mixin useFlex ($alignItems, $justifyContent) {
  align-items: $alignItems;
  display: flex;
  justify-content: $justifyContent;
}

No dobrze, a co w przypadku, gdy nie chcemy użyć wszystkich właściwości podanych jako argumenty. Z pomocą przychodzą nam wartości domyślne argumentów naszego mixina oraz instrukcja warunkowa if. Wtedy kod może wyglądać tak:

@mixin useFlex (
  $alignItems: "",
  $flexDirection: "",
  $flexWrap: "",
  $justifyContent: "",
) {
  display: flex;
  @if $alignItems != "" {
    align-items: $alignItems;
  }
  @if $flexDirection != "" {
    flex-direction: $flexDirection;
  }
  @if $flexWrap != "" {
    flex-wrap: $flexWrap;
  }
  @if $justifyContent != "" {
    justify-content: $justifyContent;
  }
}