font 믹스인 예시

_mixins.scss

@use "sass:meta" as *;
@use "sass:list";
@use "sass:string";

@function get-value($props, $key) {
    $index: list.index($props, $key);
    @if $index != null {
        $value: list.nth($props, $index + 1);
        @return if(type-of($value) != string, $value, string.unquote($value));
    } @else {
        @return null;
    }
}

@mixin set-key-value($props, $prop, $types) {
    @each $key in $types {
        #{$prop}: get-value($props, $key);
    }
}

@mixin font($props) {
    @if type-of($props) != list {
        @error "$props #{$props} 타입은 list만 허용합니다.";
    }
    @include set-key-value($props, font-weight, w fw weight);
    @include set-key-value($props, font-style, s fs style);
    @include set-key-value($props, font-size, z fz size);
    @include set-key-value($props, line-height, l lh height);
    @include set-key-value($props, font-family, f ff family);
    @include set-key-value($props, color, c color);
}

main.scss

@use 'mixins' as *;

.demo1 {
    @include font(w 200);
}

.demo2 {
    @include font(fz 10px c red);
}

.demo3 {
    @include font(
        lh 1.5
        s normal
        ff 'Pretendard, "Spoqa Hans Sans Neo", sans-serif'
    )
}

result.css

.demo1 {
  font-weight: 200;
}

.demo2 {
  font-size: 10px;
  color: red;
}

.demo3 {
  font-style: normal;
  line-height: 1.5;
  font-family: Pretendard, "Spoqa Hans Sans Neo", sans-serif;
}