许多设计系统都是从颜色和尺寸等基本设计标记开始的，这些标记可以轻松转换为 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）mixin 的一个很好的用例（不幸的是，目前原生 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-component 类的任何组件中的每个 h2 和 h3 都将获得 所有 在其包含的 mixin 中定义的样式 — font-family、font-size、font-weight、line-height —我们可以通过添加一些填充来自由扩展它（您可以使用@use从外部文件导入）。如果有必要（或者如果你想让设计师眼花缭乱），你也可以覆盖任何 mixin 值。
这是我在 dictionary.com 构建设计系统时采用的方法。它确实有助于简化我们今年早些时候推出的主页（thesaurus.com！）和浏览页面（/browse/light 是典型的例子）的重新设计工作。
利用 mixins 在您的设计系统中创建强大的构建块。
以上就是How to create typography tokens for a design system using Sass mixins的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2853963.html
