在 svelte 的 parent 中指定 child

Question

我正在尝试从 here

复制页面加载模板

HTML

<div class="loading">
  <div class="loading__ring">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path>...../path></svg>
  </div>
<div class="loading__ring">
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve"><path>......</path></svg>
  </div>
</div>

普通CSS风格

/* Demo */
body {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#ecf0f1, #fff);
}

/* Animation */
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Variables */
$loader-size: 100px;

/* Loading Icon */
.loading {
  width: $loader-size;
  height: $loader-size;

  &__ring {
    position: absolute;
    width: $loader-size;
    height: $loader-size;
    
    &:first-child {
      transform: skew(30deg,20deg);
    }

    &:last-child {
      transform: skew(-30deg,-20deg) scale(-1, 1);

      svg {
        animation-delay: -0.5s;
      }
    }

    svg {
      animation: rotate 1s linear infinite;
      fill: rgba(0, 0, 0, 0.2);
    }
  }
}

我试图通过使用 example 指定 child 来改变苗条风格，例如 .loading:global(loading__ring) 但这正是我收到错误提示

的地方

Internal server error: /Users/mypc/Documents/testingsveltenvite/v2/src/App.svelte:18:2 Identifier is expected

如何在 svelte

中更改指定 child &__ring 或 .loading:global(loading__ring) 和 &:first-child

/* Loading Icon */
.loading {
  width: var(--size);
  height: var(--size);

  .loading:global(loading__ring) {
    position: absolute;
    width: var(--size);
    height: var(--size);
    
    &:first-child {
      transform: skew(130deg,15deg);
    }

    &:last-child {
      transform: skew(-130deg,-1deg) scale(-1, 1);

      svg {
        animation-delay: -0.91s;
      }
    }

    svg {
      animation: rotate 4s linear infinite;
      fill: rgba(0, 0, 0, 0.2);
    }
  }
}

Answer 1

我不明白为什么你需要 :global() 标志，如果你把所有东西都放在一个组件中 REPL - 只有 scss 必须转换为正常 css（或 scss 添加到 Svelte 项目中）
（这里的 body 标签需要 :global(body) 因为它不在组件范围内。如果你想让它成为一个加载组件，你最好添加一个背景元素并改为设置样式）

<script>
    import {path} from './path'
</script>

<div class="loading">
    <div class="loading__ring">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
            {@html path}
        </svg>
    </div>
    <div class="loading__ring">
        <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 100 100" style="enable-background:new 0 0 100 100;" xml:space="preserve">
            {@html path}
        </svg>
    </div>
</div>

<style>
    :global(body) {
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        background: linear-gradient(#ecf0f1, #fff);
    }

    /* Animation */
    @keyframes rotate {
        to {
            transform: rotate(360deg);
        }
    }

    /* Variables */
    :root {
        --size: 100px;
    }

    /* Loading Icon */
    .loading {
        width: var(--size);
        height: var(--size);
    }

    .loading__ring {
        position: absolute;
        width: var(--size);
        height: var(--size);
    }

    .loading__ring:first-child {
        transform: skew(30deg,20deg);
    }

    .loading__ring:last-child {
        transform: skew(-30deg,-20deg) scale(-1, 1);
    }

    .loading__ring:last-child svg {
        animation-delay: -0.5s;
    }

    .loading__ring svg {
        animation: rotate 1s linear infinite;
        fill: rgba(0, 0, 0, 0.2);
    }
</style>

在 svelte 的 parent 中指定 child

Specify child in a parent in svelte

css

svelte