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