Svelte 最新中文文档教程（13）—— 样式

前言

Svelte，一个非常“有趣”、用起来“很爽”的前端框架。从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目，也是我做个人项目的首选技术栈。
目前 Svelte 基于 Svelte 5 发布了最新的官方文档，但却缺少对应的中文文档。为了帮助大家学习 Svelte，为爱发电翻译了官方文档。
我同时搭建了 Svelte 最新的中文文档站点：https://svelte.yayujs.com ，如果需要辅助学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
虽说是翻译，但个人并不喜欢严格遵守原文，为了保证中文阅读流畅，会删减部分语句，对难懂的部分也会另做补充解释，希望能给大家带来一个好的中文学习体验。
欢迎围观我的“网页版朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。
作用域样式


Svelte 组件可以包含一个 [/code]优先级

每个作用域选择器都会因为添加作用域类（例如 .svelte-123xyz）而获得 0-1-0 的优先级增加。这意味着（例如）在组件中定义的 p 选择器会优先于全局样式表中定义的 p 选择器，即使全局样式表是后加载的。
在某些情况下，作用域类必须多次添加到选择器中，但在第一次出现之后，它会以 :where(.svelte-xyz123) 的形式添加，以避免进一步增加优先级。
作用域关键帧

如果组件定义了 @keyframes，名称将会使用相同的哈希方法限定在组件作用域内。组件中的任何 animation 规则也会相应地进行调整：

1. [/code][size=5]全局样式[/size]
3. [size=4]:global(...)[/size]
5. 要在全局范围内为单个选择器应用样式，请使用 :global(...) 修饰符：
6. [code]

复制代码

如果你想创建全局可访问的 @keyframes，你需要在关键帧名称前加上 -global-。
编译时 -global- 部分会被移除，然后在代码的其他地方可以直接使用 my-animation-name 来引用该关键帧。

1. [/code][size=4]:global[/size]
3. 要将样式全局应用于一组选择器，可以创建一个 :global {...} 块：
4. [code]

复制代码

[!NOTE] 上面的第二个示例也可以写成等效的 .a :global .b .c .d 选择器，其中 :global 之后的所有内容都是未限定作用域的，不过更推荐使用嵌套形式。

自定义属性

你可以将 CSS 自定义属性（静态和动态的）传递给组件：

1. [/code]上面的代码本质上会被转换成这样：
2. [code]<svelte-css-wrapper >
3. <g >
4.   <Slider
5.     bind:value
6.     min={0}
7.     max={100}
8.   />
9. </g><Slider
10. <g >
11.   <Slider
12.     bind:value
13.     min={0}
14.     max={100}
15.   />
16. </g><g >
17.   <Slider
18.     bind:value
19.     min={0}
20.     max={100}
21.   />
22. </g>bind:value
23. <g >
24.   <Slider
25.     bind:value
26.     min={0}
27.     max={100}
28.   />
29. </g><g >
30.   <Slider
31.     bind:value
32.     min={0}
33.     max={100}
34.   />
35. </g>min={0}
36. <g >
37.   <Slider
38.     bind:value
39.     min={0}
40.     max={100}
41.   />
42. </g><g >
43.   <Slider
44.     bind:value
45.     min={0}
46.     max={100}
47.   />
48. </g>max={100}
49. <g >
50.   <Slider
51.     bind:value
52.     min={0}
53.     max={100}
54.   />
55. </g>/>
56. </svelte-css-wrapper>

复制代码

对于 SVG 元素，它会使用<svelte-css-wrapper >
<g >
  <Slider
    bind:value
    min={0}
    max={100}
  />
</g><Slider
<g >
  <Slider
    bind:value
    min={0}
    max={100}
  />
</g><g >
  <Slider
    bind:value
    min={0}
    max={100}
  />
</g>bind:value
<g >
  <Slider
    bind:value
    min={0}
    max={100}
  />
</g><g >
  <Slider
    bind:value
    min={0}
    max={100}
  />
</g>min={0}
<g >
  <Slider
    bind:value
    min={0}
    max={100}
  />
</g><g >
  <Slider
    bind:value
    min={0}
    max={100}
  />
</g>max={100}
<g >
  <Slider
    bind:value
    min={0}
    max={100}
  />
</g>/>
</svelte-css-wrapper>替代：

1. <svelte-css-wrapper >
2. <g >
3.   <Slider
4.     bind:value
5.     min={0}
6.     max={100}
7.   />
8. </g><Slider
9. <g >
10.   <Slider
11.     bind:value
12.     min={0}
13.     max={100}
14.   />
15. </g><g >
16.   <Slider
17.     bind:value
18.     min={0}
19.     max={100}
20.   />
21. </g>bind:value
22. <g >
23.   <Slider
24.     bind:value
25.     min={0}
26.     max={100}
27.   />
28. </g><g >
29.   <Slider
30.     bind:value
31.     min={0}
32.     max={100}
33.   />
34. </g>min={0}
35. <g >
36.   <Slider
37.     bind:value
38.     min={0}
39.     max={100}
40.   />
41. </g><g >
42.   <Slider
43.     bind:value
44.     min={0}
45.     max={100}
46.   />
47. </g>max={100}
48. <g >
49.   <Slider
50.     bind:value
51.     min={0}
52.     max={100}
53.   />
54. </g>/>
55. </svelte-css-wrapper>

复制代码

在组件内部，我们可以使用 var(...) 来读取这些自定义属性（并提供后备值）：

1. [/code]你不[i]必须[/i]直接在组件上指定这些值；只要自定义属性在父元素上定义，组件就可以使用它们。通常在全局样式表中的 :root 元素上定义自定义属性，这样它们就可以应用于整个应用程序。
2. [indent][!NOTE] 虽然额外的元素不会影响布局，但它[i]会[/i]影响任何使用 > 组合器来直接定位组件容器内元素的 CSS 选择器。
3. [/indent][size=5]

复制代码

Svelte 中文文档

本篇已收录在掘金专栏 《Svelte 中文文档》，该系列预计 40 篇。
系统学习 Svelte，欢迎入手小册《Svelte 开发指南》。语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！
此外我还写过 JavaScript 系列、TypeScript 系列、React 系列、Next.js 系列、冴羽答读者问等 14 个系列文章， 全系列文章目录：https://github.com/mqyqingfeng/Blog
通过文字建立交流本身就是一种缘分。欢迎围观我的“网页版朋友圈”、加入“低调务实优秀中国好青年”前端社群，分享技术，带你成长。

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！