Svelte 最新中文文档教程（12）—— 样式相关 style 与 class
前言
Svelte，一个非常“有趣”、用起来“很爽”的前端框架。从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：
Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目，也是我做个人项目的首选技术栈。
目前 Svelte 基于 Svelte 5 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Svelte，为爱发电翻译了官方文档。
我同时搭建了 Svelte 最新的中文文档站点：https://svelte.yayujs.com ，如果需要辅助学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。
欢迎围观我的“网页版朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。
style:
style: 指令提供了在元素上设置多个样式的简写方式。
值可以包含任意表达式：
允许使用简写形式：
可以在单个元素上设置多个样式：
要将样式标记为 important，使用 |important 修饰符：
当 style: 指令与 style 属性组合使用时，指令将优先生效：
class
在元素上设置类名有两种方式：class 属性和 class: 指令。
属性
原始值的处理方式与其他属性相同：
[!NOTE]由于历史原因，假值（如
false和NaN）会被转换为字符串（class="false"），但class={undefined}（或null）会导致属性被完全省略。在 Svelte 的未来版本中，所有假值都将导致class被省略。
对象和数组
从 Svelte 5.16 开始，class 可以是对象或数组，并使用 clsx 转换为字符串。
如果值是一个对象，则会添加真值的键：
如果值是一个数组，真值会被合并：
注意，无论我们使用数组还是对象形式，我们都可以用一个条件同时设置多个类，这在使用 Tailwind 等工具时特别有用。
数组可以包含数组和对象，clsx 会将它们展平。这对于合并本地类和 props 特别有用，例如：
该组件的用户可以灵活地混合使用对象、数组和字符串：
class: 指令
在 Svelte 5.16 之前，class: 指令是在元素上条件设置类的最便捷方式。
与其他指令一样，当类名与值相同时，我们可以使用简写形式：
[!NOTE] 除非你使用的是较旧版本的 Svelte，否则建议避免使用
class:，因为属性形式更强大且更易于组合。
Svelte 中文文档
本篇已收录在掘金专栏 《Svelte 中文文档》，该系列预计 40 篇。
系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog
通过文字建立交流本身就是一种缘分。欢迎围观我的“网页版朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。
版权声明: 本文为 InfoQ 作者【冴羽】的原创文章。
原文链接:【http://xie.infoq.cn/article/2eb8119d8e990e4981be1afa3】。文章转载请联系作者。
还未添加个人签名 2019-01-25 加入
分享前端技术。掘金前端领域关注数 Top 1，GitHub 中国区 Top 30，Blog 30K Star。至今写过 14 个系列文章，全网千万阅读，主页地址：yayujs.卡木
评论