제 제품인 LiveAPI에 대한 문서 작업을 할 때 깨끗하고 전문적인 문서를 생성하는 정적 사이트 생성기인 MkDocs를 사용하기 시작했습니다.
하지만 디자인이 다소 단조롭다는 생각이 들어서 프로젝트를 탐색하여 몇 가지 맞춤 설정을 하기로 결정했습니다.
이 여행을 통해 저는 이 건축물의 흥미로운 부분인 Sass 지도를 알게 되었습니다.
캐주얼한 수정으로 시작된 것이 이 프로젝트의 사려 깊은 디자인에 대한 더 깊은 감사로 바뀌었습니다.
이 블로그에서는 MkDocs의 Material 테마, 특히 믹스인에서 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;
이 지도는 중단점을 카테고리(모바일, 태블릿, 화면)와 하위 카테고리(세로, 가로, 소형, 중형, 대형)로 구성합니다.
단순한 정적 정의가 아니라 반응형 동작이 동적으로 생성되는 방식의 중추입니다.
테마는 일련의 기능과 믹스인을 사용하여 $break-devices 맵에서 데이터를 추출하고 활용합니다. 분석 내용은 다음과 같습니다.
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;
}
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 믹스인의 강력한 기능을 확인하기 위해 이를 사용하여 반응형 스타일을 동적으로 구현하는 방법에 대한 실제 예를 살펴보겠습니다.
기본적으로 믹스인 없이도 작은 화면에서 잘 작동하는 그리드 레이아웃을 사용하여 모바일 화면에 스타일을 적용합니다. 예:
@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 믹스인을 사용하여 특정 중단점을 타겟팅할 수 있습니다.
가로 방향 중단점까지 태블릿과 같은 작은 화면에서는 제한된 화면 공간으로 인해 사이드바와 같은 특정 요소가 잘 맞지 않을 수 있습니다.
이러한 경우 사이드바를 숨기고 왼쪽에서 팝오버로 표시하여 메인 콘텐츠의 우선순위를 지정할 수 있습니다. 예:
@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}";
}
}
.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;
}
}
화면 크기가 커질수록 콘텐츠를 표시할 수 있는 공간이 더 많아집니다.
데스크탑의 경우, 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;
@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}";
}
}
.grid {
display: grid;
gap: 16px;
grid-template-columns: repeat(1, 1fr); /* 1 column for small screens */
}
이 디자인은 확장성과 유지 관리성을 우선시하려는 작성자의 의도를 보여줍니다.
중단점을 단일 소스로 추상화하고 미디어 쿼리용 믹스인을 사용하여 다음과 같은 시스템을 만들었습니다.
MkDocs Material을 탐색하면서 프론트엔드 아키텍처의 사려 깊은 디자인에 대한 이해가 깊어졌습니다.
Sass 맵, 믹스인 및 계층적 데이터 구조의 사용은 유지 관리 및 확장 가능한 디자인 시스템의 마스터클래스입니다.
자신만의 반응형 스타일을 만들거나 개선하려면 유사한 기술을 채택해 보세요.
프로젝트에서 Sass 맵을 접했거나 사용한 적이 있나요? 여러분의 경험과 통찰력을 듣고 싶습니다!
디자인 세계에 대해 더 깊이 알고 싶으십니까? 다른 블로그 게시물을 확인하세요.
개발, IT, 운영, 디자인, 리더십 등에 대한 주간 통찰력을 구독하세요.
위 내용은 이 SCSS 프로젝트가 지도에서 시작하여 체계적으로 유지되는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
