스키마

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

    개요

    Schemas are like recipes. They are simple Sass maps, similar to JSON that allow us to define all properties a theme might use. Those properties can be colors, elevation levels, roundness, etc. Anything a theme consumes can be described as a schema, then passed to the global or component theme. A component schema can extend an existing component schema and override its properties.

    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,
);

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

    Let's take the background property for example. It tells the avatar theme what the default background should be.

    The background can be assigned any value, that is, a value that can be assigned to the CSS background-color property. You can also assign a map to background, like in the sample above. When you assign a map to the background property, the map should contain functions as the key names (e.g. color), and arguments for the functions as values for said keys. We do this to be able to resolve the values later on, when the avatar theme is being built. See, because we don't know the palette a user might pass to the avatar theme, we should be able to resolve it later on, only when the palette is known.

    Extending Schemas

    As you saw from the example above. Schemas are simple maps and as such can be extended by overriding some of their properties. You might want to extend the material avatar schema by only changing its background property, without having to copy all other properties manually. This is easily done using the extend function we provide.

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

    Now the value of $my-avatar-schema will contain all properties of $_light-avatar, but the value for background will have be 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

    We use the light and dark schemas accordingly with the light and dark palettes to create the component themes. For example, using the $light-material-schema along with the $light-material-palette will help us create all of the light material component themes. And vice versa - using the $dark-material-schema along with the $dark-material-palette will give us the dark material component themes.

    Consuming Schemas

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

    Individual component schemas are bundled up in a global schema map for all components we have. So the $light-avatar schema is stored in the $material-avatar variable, which is then used in the global $light-material-schema. The $light-material-schema map contains all component names as keys, and their corresponding schemas as values. The $light-material-schema looks something like this:

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

    We do this so we can pass the entire $light-material-schema to the theme mixin. So for instance if we wanted to modify the $light-material-schema by replacing the default component schema the avatar component uses we might do:

    $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
);

    Currently, the most common use case for schemas is when we want a specific element to have a different theme than the global one. For example, if we had $light-material-schema applied for our global theme, and we wanted only one specific avatar component to use $light-indigo-schema we can do the following:

    // 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

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