loi-phan-internship/practice/practice-02/src/styles/abstracts/_mixins.scss

%d-flex {
  display: flex;
}

%absolute {
  position: absolute;
}

@mixin base-icon-menu {
  @include size(36px, 3px);

  background: #000000;
  border-radius: 10px;
  transition: 0.3s;
}

@mixin icon-menu {
  @include base-icon-menu;
  @extend %absolute;

  content: "";
  right: 0;
}

@mixin flex-layout(
  $justify: null,
  $align: null,
  $direction: null,
  $gap: null,
  $wrap: null
) {
  @if $justify != null {
    justify-content: $justify;
  }

  @if $align != null {
    align-items: $align;
  }

  @if $direction != null {
    flex-direction: $direction;
  }

  @if $gap != null {
    gap: $gap;
  }

  @if $wrap != null {
    flex-wrap: $wrap;
  }
}

@mixin size($width: null, $height: null) {
  @if $width != null {
    width: $width;
  }

  @if $height != null {
    height: $height;
  }
}

@mixin set-absolute-and-location(
  $top: null,
  $left: null,
  $right: null,
  $bottom: null
) {
  @if $top != null {
    top: $top;
  }

  @if $left != null {
    left: $left;
  }

  @if $right != null {
    right: $right;
  }

  @if $bottom != null {
    bottom: $bottom;
  }
}