mcpField
S
svelte-styling

svelte-styling

github.com/spences10设计与 UI1688 次安装15 周前更新
代码仓库

关于 svelte-styling

面向 Svelte 开发者的样式技能，涵盖组件 CSS。内容涉及动态 CSS 值、子组件样式以及条件类名模式。

主要功能

  1. 01用 `style:` 设置 CSS 变量
  2. 02通过 CSS 属性设置子组件样式
  3. 03将 `:global` 用作备用方案
  4. 04使用数组或对象设置条件类名

适用场景

  1. 01从 JavaScript 设置动态布局值
  2. 02设置子组件或库组件样式
  3. 03选择作用域或全局 CSS 模式

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/spences10/skills --skill svelte-styling

安装后在 Claude Code 中输入/svelte-styling确认已加载。

附带文件references/styling-patterns.md

详细介绍

Svelte 样式

快速开始

CSS 中的 JS 变量： 使用 style: 指令从 JavaScript 设置 CSS 自定义属性。

<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>

参考文件

备注

  • 默认情况下，所有 <style> 块的作用域都限定在组件内
  • 动态值请使用 style: 指令，而非内联样式字符串
  • 为子组件设置样式时，优先使用 CSS 自定义属性，而非 :global
  • 对于条件类名，优先在 class={...} 中使用类数组或对象
  • 上次验证： 2026-05-14

评论

支持 Markdown