이 SCSS 프로젝트가 지도에서 시작하여 체계적으로 유지되는 방법

제 제품인 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!