SvelteKit：如何通过SASS嵌套在父组件控制子组件类（无需导出）

1. 不导出类也不用:global()，父组件能否使用子组件的类？ #

不行。SvelteKit默认开启组件样式作用域，子组件的类名会被自动添加唯一哈希前缀（比如.one会变成.one-abc123），父组件的样式仅作用于自身作用域内的元素，无法匹配子组件中带哈希的类名。所以不做额外处理的话，父组件没法直接控制子组件的这些类样式。

2. 仅在外层.one加:global()，用SASS嵌套控制子类是否可行？ #

你给出的写法不可行，因为子组件的.one是作用域化的（带哈希前缀），父组件的:global(.one)会寻找不带哈希的.one元素，根本匹配不到子组件的<ul>。

如果想用SASS嵌套同时控制这三个类，推荐用Svelte的深度选择器:deep()（兼容旧版::v-deep），它能穿透组件样式作用域，匹配子组件内的元素。正确写法如下：

<style lang="scss">
  :deep(.one) {
    background-color: orange;
    .two {
      font-size: 2rem;
    }
    .three {
      font-size: 1rem;
    }
  }
</style>

:deep(.one)会生成能匹配子组件中带哈希的.one的选择器，嵌套的.two和.three也会自动关联到子组件内的对应元素，刚好满足你在父组件用SASS嵌套控制子组件多类样式的需求。

要是你坚持想用:global()，得在子组件里把.one设为全局类（写成<ul class=":global(one)">），但这样会让.one变成全局作用域，容易引发样式冲突，灵活性不如深度选择器。

内容的提问来源于stack exchange，提问作者jeff