Sass 믹스인을 사용하여 디자인 시스템용 타이포그래피 토큰을 만드는 방법

많은 디자인 시스템은 CSS 변수(또는 Sass, Less 등)로 쉽게 변환할 수 있는 색상 및 크기와 같은 기본 디자인 토큰으로 시작합니다.

// tokens.scss
$primary-text-color: #aaa;
$secondary-text-color: #ccc;

$size-s: 8px;
$size-m: 16px;

// some-component.scss
.some-component {
    color: $primary-text-color;
    padding: $size-s $size-m;

    h4 {
        color: $secondary-text-color;
    }
}

토큰 컬렉션에 다음으로 논리적으로 추가되는 것은 글꼴입니다. 그리고 위의 패턴을 글꼴에 적용할 수 있지만, 제가 만난 대부분의 디자이너는 타이포그래피를 전체적으로 생각합니다. 글꼴과 무게는 크기와 줄 높이에 영향을 미칩니다. 이는 모두 패키지 거래입니다.

즉, 타이포그래피는 클래스로 취급됩니다. 이는 Sass(또는 Less) 믹스인의 훌륭한 사용 사례입니다(불행히도 현재 기본 CSS에는 이에 상응하는 것이 없습니다).

예:

// tokens.scss
$font-sans-serif: Aria, Helvetica, sans-serif;

$size-s: 8px;
$size-m: 16px;
$size-l: 24px;
$size-xl: 48px;

@mixin heading-sans-serif-l {
    font-family: $font-sans-serif;
    font-size: $size-l;
    font-weight: 700;
    line-height: 1.3;
}

@mixin heading-sans-serif-xl {
    font-family: $font-sans-serif;
    font-size: $size-xl;
    font-weight: 700;
    line-height: 1.4;
}

// some-component.scss
@use "tokens";

.some-component {

    h2 {
        @include tokens.heading-sans-serif-xl;

        padding: $size-l $size-xl;  
    }

    h3 {
        @include tokens.heading-sans-serif-l;

        padding: $size-s $size-m;   
    }   
}

some-comComponent 클래스가 있는 구성 요소 내의 모든 h2 및 h3은 포함된 믹스인 내에 정의된 모든 스타일(글꼴 계열, 글꼴 크기, 글꼴 두께, 줄 높이)을 가져옵니다. 패딩을 추가하여 자유롭게 확장할 수 있습니다(@use를 사용하여 외부 파일에서 가져옵니다). 필요한 경우(또는 디자이너의 눈을 경련하게 만들고 싶은 경우) 믹스인 값을 덮어쓸 수도 있습니다.

제가 Dictionary.com에서 디자인 시스템을 구축할 때 취했던 접근 방식입니다. 이는 올해 초에 출시된 우리 홈(Thesaurus.com도 마찬가지입니다!)과 검색 페이지(/browse/light가 전형적인 예)의 재설계 작업을 간소화하는 데 확실히 도움이 되었습니다.

믹스인을 활용하여 디자인 시스템 내에서 강력한 구성 요소를 만드세요.

위 내용은 Sass 믹스인을 사용하여 디자인 시스템용 타이포그래피 토큰을 만드는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!