? ??? LiveAPI? ?? ?? ??? ? ? ???? ???? ??? ???? ?? ??? ???? MkDocs? ???? ??????.

??? ???? ?? ????? ??? ??? ????? ???? ? ?? ?? ??? ??? ??????.

? ??? ?? ?? ? ???? ???? ??? Sass ??? ?? ?????.

???? ???? ??? ?? ? ????? ?? ?? ???? ?? ? ?? ??? ??????.

? ?????? MkDocs? Material ??, ?? ????? Sass ?? ??? ?????, ??? Sass ?? ??? ???? ???? ???? ??? ????? ???????. ???? ???!

---

Sass ??? ??????

Sass ?? Python? ???? JavaScript? ??? ??? Sass? ?-? ??? ?????.

?? ???? ????? ???? ?? ???? ??? ? ????.

MkDocs Material ???? Sass ?? ??? ???? ?? ??? ???? ???? ? ?????. ?:

@use "sass:map";
@use "sass:list";
@use "sass:math";

$break-devices: (
  mobile: (
    portrait: 220px 479px,
    landscape: 480px 719px,
  ),
  tablet: (
    portrait: 720px 959px,
    landscape: 960px 1219px,
  ),
  screen: (
    small: 1220px 1599px,
    large: 1600px 1999px,
  ),
) !default;

? ??? ???? ????(???, ???, ??)? ?? ????(??, ??, ??, ??, ??)? ?????.

??? ?? ??? ??? ??? ??? ???? ???? ??? ?????.

---

MkDocs ????? Sass ?? ???? ??

??? ??? ??? ???? ???? $break-devices ??? ???? ???? ?????. ?? ??? ??? ????.

1. ??? ? ??

break-select-device ??? ??? ???? ?? ?? ????? ?? ?? ???? ?????.

?? ??? ????(?: ??? ???) ?? ??? ? ?? ?????.

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$devices}";
    }
  }
  @return $current;
}

• @for ??: ? ??? $device ??? ? ?? ???? ??? ?????? ???? ?? ??? ?? ??? ????? ???.
• @if ??: ?? ?? ??? ??? ???? true?? ???? ?????. ??? ?? ?? ?? ???? ?? ?????.
• map.get: ?? ???? ???? ?? ???? ?? Sass ?????.

2. ??? ?? ??

SCSS?? ???? ? ? ???? ????? ???? ??? ? ?? ??? ??? ?? ?????.

??? ???? ?? ????? ??? ?? ? ??? ? ???? ??? DRY(???? ???) ??? ???? ? ??? ???.

?? ??, ??? ??? ????? ???? ?? ?? ???? ??? ??? ??? ???? ? ????.

break-from-device ? break-to-device ???? ? ??? ???? ??? ??? ???? ?????. ?? ?? ??? ????.

@use "sass:map";
@use "sass:list";
@use "sass:math";

$break-devices: (
  mobile: (
    portrait: 220px 479px,
    landscape: 480px 719px,
  ),
  tablet: (
    portrait: 720px 959px,
    landscape: 960px 1219px,
  ),
  screen: (
    small: 1220px 1599px,
    large: 1600px 1999px,
  ),
) !default;

? ???? ??? ??? ?? ??? ?? ???? ?????. ?? ??? ??? ?? break-to-device ????? ??? ?? ??? ?????.

---

??? ??

break-from-device ? break-to-device ???? ??? ??? ???? ?? ?? ???? ??? ???? ???? ???? ??? ?? ?? ?? ???????.

? 1: ??? ??? ?? ??? ??

????? ??? ??? ?? ???? ? ???? ??? ????? ???? ??? ??? ???? ?????. ?:

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$devices}";
    }
  }
  @return $current;
}

? ?? ????? ?? ??? ??? ????? ????. ?? ???? ????? ??? ????? ?????.

? ? ??? ???? ????? break-from-device ???? ???? ?? ???? ???? ? ????.

---

? 2: ??? ?? ???

?? ?? ????? ???? ?? ?? ????? ??? ?? ???? ?? ????? ?? ?? ??? ? ?? ?? ? ????.

??? ?? ????? ??? ???? ???? ???? ?? ???? ????? ??? ? ????. ?:

@mixin break-from-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $min: list.nth($breakpoint, 1);

    @media screen and (min-width: $min) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

@mixin break-to-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $max: list.nth($breakpoint, 2);

    @media screen and (max-width: $max) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

• ??? ??: $break-devices ?? ??? ???? ? ?? ?? ?? ????? ?????.
• ??? ??? ??? ??? ????.

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, 1fr); /* 1 column for small screens */
}

? ?? ?? ??? ??? ? ?? ??? ?? ????? ? ??? ?? ??? ?? ??? ?? 2? ????? ??? ? ????. ?? break-from-device ???? ???? ??? ? ????:

@include break-to-device(tablet landscape) {
  .sidebar {
    display: none;
  }
}

• ??? ??? ??? ??? ????.

  @media screen and (max-width: 1219px) {
    .sidebar {
      display: none;
    }
  }

---

? 3: ???? ???

?? ??? ???? ???? ??? ? ?? ??? ? ?????.

????? ??, break-from-device ???? ???? ?? ??? ?? ??? ????? ???? 3~4?? ?? ??? ? ????.

?? ????? ??:

?? ??? 3?? ?? ??? ?? ? ?? ?? ???? ?????.

@use "sass:map";
@use "sass:list";
@use "sass:math";

$break-devices: (
  mobile: (
    portrait: 220px 479px,
    landscape: 480px 719px,
  ),
  tablet: (
    portrait: 720px 959px,
    landscape: 960px 1219px,
  ),
  screen: (
    small: 1220px 1599px,
    large: 1600px 1999px,
  ),
) !default;

• ???? ??: $break-devices ??? ???? ???? ? ?? ?? ?? ????? ?????.
• ??? ??? ??? ??? ????.

@function break-select-device($device) {
  $current: $break-devices;
  @for $n from 1 through length($device) {
    @if type-of($current) == map {
      $current: map.get($current, list.nth($device, $n));
    } @else {
      @error "Invalid device map: #{$devices}";
    }
  }
  @return $current;
}

?? ????? ??:

? ? ??? ?? 4?? ?? ??? ?? ?? ??? ???? ? ????.

@mixin break-from-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $min: list.nth($breakpoint, 1);

    @media screen and (min-width: $min) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

@mixin break-to-device($device) {
  @if type-of($device) == string {
    $device: $device;
  }
  @if type-of($device) == list {
    $breakpoint: break-select-device($device);
    $max: list.nth($breakpoint, 2);

    @media screen and (max-width: $max) {
      @content;
    }
  } @else {
    @error "Invalid device: #{$device}";
  }
}

• ???? ??: $break-devices ??? ???? ???? ? ?? ?? ?? ????? ?????.
• ??? ??? ??? ??? ????.

.grid {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(1, 1fr); /* 1 column for small screens */
}

---

???? ???

? ???? ???? ?? ???? ?????? ???? ??? ?????.

???? ?? ??? ????? ??? ??? ???? ???? ??? ?? ???? ??????.

• ????? ????: ???? ??????? ? ???? ???? ? ?????? ?? ??? ????.
• ??? ??: ??? ??? ??? ??? ??? ????? ??????.
• ??? ??: ?? ??? ????? ?? ??? ??? ????? ??? ??? ? ????.

---

?? ??

MkDocs Material? ????? ????? ????? ?? ?? ???? ?? ??? ??????.

Sass ?, ??? ? ??? ??? ??? ??? ?? ?? ? ?? ??? ??? ???? ?????????.

???? ??? ???? ???? ????? ??? ??? ??? ???.

?????? Sass ?? ???? ??? ?? ???? ???? ??? ???? ?? ????!

??? ??? ?? ? ?? ?? ?????? ?? ??? ???? ?????.

• ?????? ?? ??? ?? ??
• ??? UI ??? ? ?? ??
• ??? ?? ???

??, IT, ??, ???, ??? ?? ?? ?? ???? ?????.

? ??? ? SCSS ????? ???? ???? ????? ???? ??? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!