스키마

스키마는 구성 요소 테마가 사용하는 모든 속성을 나열하는 간단하고 선언적인 방법입니다.

개요

스키마는 레시피와 같습니다. 이들은 JSON과 유사한 간단한 Sass 맵으로, 테마가 사용할 수 있는 모든 속성을 정의할 수 있게 해줍니다. 그 속성들은 색상, 고도 높이, 둥글음 등이 될 수 있습니다. 테마가 소비하는 모든 것은 aschema로 설명한 후 전역 또는 구성 주제로 전달될 수 있습니다. 컴포넌트 스키마는 기존 컴포넌트 스키마를 확장하고 그 속성을 덮어쓸 수 있습니다.

CSS 스타일 규칙이나 CSS 변수가 중복되지 않는 방식으로 구성 요소의 기본 테마 속성을 변경하려는 경우 스키마를 사용해야 합니다.

가벼운 Material Avatar 스키마를 살펴보겠습니다.

$light-avatar: (
    background: (
        color: (
            'gray',
            400,
            0.54,
        ),
    ),
    color: (
        color: (
            'gray',
            800,
            0.96,
        ),
    ),
    icon-color: (
        color: (
            'gray',
            800,
            0.96,
        ),
    ),
    border-radius: rem(8px),
    size: (
        sizable: (
            rem(40px),
            rem(64px),
            rem(88px),
        ),
    ),
    default-size: 1,
);

위의 예에서 볼 수 있듯이 구성 요소 스키마는 아바타 테마가 사용하는 속성을 정의합니다. 구체적인 색상 팔레트 맵을 참조하지 않고 아바타가 사용해야 하는 색상을 규정할 뿐입니다.

예를 들어 부동산을background 살펴보겠습니다. 아바타 테마에 기본 배경이 무엇이어야 하는지 알려줍니다.

는background CSSbackground-color 속성에 할당할 수 있는 값을 할당할 수 있습니다.위 샘플처럼 맵background을 할당할 수도 있습니다. 속성에background 매핑을 할당할 때, 매핑에는 키 이름(예:color function)과 해당 키의 값으로 함수 인자를 포함해야 합니다. 이렇게 하는 이유는 나중에 아바타 테마를 만들 때 값을 해결할 수 있기 때문입니다. 사용자가 아바타 테마에 어떤 팔레트를 전달할지 알 수 없기 때문에, 팔레트가 알려졌을 때만 나중에 해결할 수 있어야 합니다.

Extending Schemas

위 예시에서 보셨듯이요. 스키마는 단순한 맵이기 때문에 일부 속성을 덮어쓰면 확장할 수 있습니다. 재질 아바타 스키마를 속성만 변경background 하는 방식으로 확장하는 것이 좋을 수 있습니다. 다른 모든 속성을 수동으로 복사하지 않고도 말이죠. 이 기능은 저희가extend 제공하는 기능을 사용하면 쉽게 할 수 있습니다.

$my-avatar-schema: extend($light-avatar, (
    background: limegreen
));

이제 의$my-avatar-schema 값은 의$_light-avatar 모든 속성을 포함하지만, 의background 값은 반드시 가 되어야limegreen 한다.

Predefined Schemas

우리는 테마 사전 설정에서 사용하는 사전 정의된 밝은 스키마와 어두운 스키마를 제공합니다.

라이트 스키마
- $light-material-schema
- $light-fluent-schema
- $light-bootstrap-schema
- $light-indigo-schema
다크 스키마
- $dark-material-schema
- $dark-fluent-schema
- $dark-bootstrap-schema
- $dark-indigo-schema

우리는 빛과 어둠 스키마를 빛과 어둠 팔레트와 함께 사용해 구성 주제를 만듭니다. 예를 들어, 와$light-material-schema 함께 사용하는$light-material-palette 것은 모든 빛 재료 구성 요소 테마를 만드는 데 도움이 됩니다. 반대로, 함께$dark-material-schema 사용$dark-material-palette 하면 어두운 물질 구성 요소 테마가 나옵니다.

Consuming Schemas

지금까지 우리는 컴포넌트 스키마가 무엇이고 어떻게 생성할 수 있는지 보여줬지만, Sass 프로젝트에서 스키마를 사용하는 방법에 대해서는 다루지 않았습니다.

개별 컴포넌트 스키마는 우리가 가진 모든 컴포넌트에 대한 전역 스키마 맵에 묶여 있습니다. 그래서 스키마는$light-avatar 변수에$material-avatar 저장되고, 그 변수는 글로벌$light-material-schema 변수에 사용됩니다. 맵은$light-material-schema 모든 컴포넌트 이름이 키로, 해당 스키마를 값으로 포함합니다. 대략 이런 식으로 보입니다$light-material-schema:

$light-material-schema: (
    action-strip: $material-action-strip,
    avatar: $material-avatar,
    badge: $material-badge,
    ...
);

이렇게 하는 이유는 전체$light-material-schema를 믹싱에theme 전달하기 위해서입니다. 예를 들어, 아바타 컴포넌트가 사용하는 기본 컴포넌트 스키마를 교체하여 수정$light-material-schema 하고 싶다면, 다음과 같이 할 수 있습니다:

$my-light-schema: extend($light-material-schema, (
    avatar: $my-avatar-schema
));

이제 모든 것을 전역 테마 믹스인에 전달할 수 있습니다.

// styles.scss
@include theme(
    $schema: $my-light-schema,
    $palette: $default-palette
);

글로벌 테마의 아바타는 이제 배경에 라임그린을 사용합니다.

버튼 스키마와 같은 일부 구성 요소 스키마에는 원형성에 대한 속성 정의가 있습니다. 즉, 모든 버튼의 기본 버튼 원형률을 변경할 수 있습니다.

개별 구성 요소 테마가 위에서 만든 스키마를 어떻게 사용할 수 있는지 살펴보겠습니다.

$my-avatar-theme: avatar-theme(
    $schema: $my-avatar-schema
);

현재 스키마의 가장 일반적인 사용 사례는 특정 요소가 전역 테마와 다른 테마를 가질 때 사용됩니다. 예를 들어, 글로벌 테마를 신청했$light-material-schema 는데 특정 아바타 컴포넌$light-indigo-schema 트만 사용하고 싶다면, 다음과 같은 작업을 할 수 있습니다:

// We only get the avatar part of the light-indigo-schema
$indigo-avatar: map.get($light-indigo-schema, avatar);

// We include the specific schema to a class which we can then set on the avatar component that we want
.indigo-avatar {
    @include css-vars(
        avatar-theme(
            $schema: $indigo-avatar
        )
    );
}

Conclusions

스키마에는 테마 기능 및 믹스인에 비해 테마 라이브러리에 대한 더 깊은 지식이 필요하지만 생성된 CSS의 크기를 늘리지 않고도 구성 요소 테마를 선언할 수 있습니다. 스키마 사용의 또 다른 이점은 단순한 Sass 맵이므로 재사용 및 확장이 가능하다는 것입니다. 구성 요소 스키마를 혼합하고 일치시켜 전역 테마 스키마를 생성할 수 있습니다.

우리는 내부적으로 스키마를 사용하여 Material, Bootstrap, Fluent 및 Indigo에 대해 사전 번들로 제공되는 다양한 테마를 생성하는 변형을 만듭니다.

API Overview

Additional Resources

우리 커뮤니티는 활동적이며 항상 새로운 아이디어를 환영합니다.