SCSS Mixins

Responsive design

$breakpoints: (
  "3xl": 1680px,
  "2xl": 1440px,
  "xl": 1279px,
  "lg": 1024px,
  "md": 768px,
  "sm": 640px,
  "xs": 475px,
  "xxs": 350px,
);

@mixin media($breakpoint, $param: max-width) {
  @if map-get($breakpoints, $breakpoint) {
    @media screen and ($param: map-get($breakpoints, $breakpoint)) {
      @content;
    }
  } @else {
    @media screen and ($param: $breakpoint) {
      @content;
    }
  }
}

Usage

// screen width < 640px
@include media("sm") {
  background: red;
}

// screen width > 640px
@include media("sm", min-width) {
  background: red; // 640px
}

// screen width < 999px
@include media("999px") {
  background: red;
}

Import Fonts

I usually use WOFF2 for web development because it provides excellent font compression, leading to faster loading times and better performance. WOFF2 allows me to maintain high-quality typography across different devices and browsers while optimizing bandwidth usage.

Convert fonts to WOFF2

@mixin font-face($font-family, $weight) {
  @font-face {
    font-family: "#{$font-family}";
    @if $weight == 200 {
      src: url("../fonts/#{$font-family}-Thin.woff2") format("woff2");
    } @else if $weight == 300 {
      src: url("../fonts/#{$font-family}-Light.woff2") format("woff2");
    } @else if $weight == 400 {
      src: url("../fonts/#{$font-family}-Regular.woff2") format("woff2");
    } @else if $weight == 500 {
      src: url("../fonts/#{$font-family}-Medium.woff2") format("woff2");
    } @else if $weight == 600 {
      src: url("../fonts/#{$font-family}-SemiBold.woff2") format("woff2");
    } @else if $weight == 700 {
      src: url("../fonts/#{$font-family}-Bold.woff2") format("woff2");
    } @else if $weight == 800 {
      src: url("../fonts/#{$font-family}-ExtraBold.woff2") format("woff2");
    } @else if $weight == 900 {
      src: url("../fonts/#{$font-family}-Black.woff2") format("woff2");
    }
    font-weight: #{$weight};
    font-display: swap;
  }
}

Usage

@include font-face("Inter", 400);

// Output:
// @font-face {
//   font-family: 'Inter';
//   src: url("../fonts/Inter-Thin.woff2") format("woff2");
//   font-weight: 400;
//   font-display: swap;
// }

Flex Box

@mixin flex-col($align: center, $justify: center, $gap: 0px) {
  display: flex;
  flex-direction: column;
  align-items: $align;
  justify-content: $justify;
  gap: $gap;
}

@mixin flex-row($justify: center, $align: center, $gap: 0px) {
  display: flex;
  align-items: $align;
  justify-content: $justify;
  gap: $gap;
}

@mixin center($direction: row, $gap: 0) {
  display: flex;
  flex-direction: $direction;
  align-items: center;
  justify-content: center;
  gap: $gap;
}

Usage

@include flex-row(flex-start, center, 20px);

// Output:
// display: flex;
// align-items: center;
// justify-content: flex-start;
// gap: 20px;

Grid

@mixin grid-cols($cols, $gap: 0px) {
  display: grid;
  grid-template-columns: repeat($cols, 1fr);
  gap: $gap;
}

Usage

@include grid-cols(4, 20px);

// Output:
// display: grid;
// grid-template-columns: repeat(4, 1fr);
// gap: 20px;

Spacing

@mixin space-x($margin: 0.25rem) {
  & > :not([hidden]) ~ :not([hidden]) {
    --space-x-reverse: 0;
    margin-right: calc($margin * var(--space-x-reverse));
    margin-left: calc($margin * calc(1 - var(--space-x-reverse)));
  }
}

@mixin space-y($margin: 0.25rem) {
  & > :not([hidden]) ~ :not([hidden]) {
    --space-y-reverse: 0;
    margin-top: calc($margin * calc(1 - var(--space-y-reverse)));
    margin-bottom: calc($margin * var(--space-y-reverse));
  }
}

Usage

@include space-x(20px);

// Output:
// div > :not([hidden]) ~ :not([hidden]) {
//   --space-x-reverse: 0;
//   margin-right: calc(20px * var(--space-x-reverse));
//   margin-left: calc(20px * calc(1 - var(--space-x-reverse)));
// }