SASS/SCSS Mixins

$primary-color: #fc556f;
$secondary-color: #fd9c84;
$gradient: linear-gradient(to right, $primary-color, $secondary-color);

// Sets width and height in one line
@mixin size($width, $height: $width) {
  width: $width;
  height: $height;
}

// Usage examples:
.square { @include size(100px); }      // 100px x 100px
.rectangle { @include size(150px, 80px); } // 150px x 80px

// Shorthand for common flexbox properties
@mixin flexbox(
  $align: flex-start,
  $justify: flex-start,
  $flex-direction: row,
  $wrap: nowrap
) {
  display: flex;
  align-items: $align;
  justify-content: $justify;
  flex-direction: $flex-direction;
  flex-wrap: nowrap;
}

// Usage examples:
.center { @include flexbox(center, center); }
.space-between { @include flexbox(center, space-between); }