关于 svelte-styling
为 Svelte 组件样式编写提供指导，重点包括动态 CSS 自定义属性、子组件样式、作用域样式，以及 `:global` 的适用场景。
主要功能
- 01用 `style:` 设置动态 CSS 变量
- 02向子组件传递 CSS 自定义属性
- 03将 `:global` 用作备用方案
- 04了解组件作用域样式
适用场景
- 01设置 Svelte 组件的动态样式值
- 02自定义子组件外观
- 03选择自定义属性或 `:global`
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/svelte-styling确认已加载。
附带文件references/styling-patterns.md
详细介绍
Svelte 样式
快速开始
在 CSS 中使用 JS 变量： 使用 style: 指令设置 CSS 自定义属性，
并从 JavaScript 传入值。
<script>
let columns = $state(3);
</script>
<div style:--columns={columns}>
{@render children()}
</div>
<style>
div {
display: grid;
grid-template-columns: repeat(var(--columns), 1fr);
}
</style>
设置子组件样式
首选方式： 将 CSS 自定义属性作为组件属性传递：
<Child --color="red" --spacing="1rem" />
<h1>Hello</h1>
<style>
h1 {
color: var(--color, blue);
margin: var(--spacing, 0);
}
</style>
备用方式： 无法使用自定义属性时（例如，库组件），使用 :global：
<div>
<LibraryComponent />
</div>
<style>
div :global {
h1 { color: red; }
}
</style>
参考文件
- styling-patterns.md - 完整的 CSS 模式和技巧
注意事项
- 默认情况下，所有
<style>块的样式作用域都限定在组件内 - 动态值请使用
style:指令，而不是内联样式字符串 - 为子组件设置样式时，优先使用 CSS 自定义属性，而不是
:global - 上次验证时间： 2026-03-12
评论
支持 Markdown