Specify child in a parent in svelte

Question

I am trying to replicate the page loading template from here

HTML

Normal CSS style

/* 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);
    }
  }
}

I tried to alter into the svelte style by using example specifying child like .loading:global(loading__ring) but this is exactly where I am getting the error saying

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

How do I alter specifying child &__ringor.loading:global(loading__ring) and &:first-child in svelte

/* 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);
    }
  }
}

user_15388872 · Answer

I don't see why you would need the :global() flag, if you have everything inside one component REPL - only the scss has to be converted to normal css (or scss added to the Svelte project)
(the body tag here needs the :global(body) because it's not in the component scope. If you want to make this a loading component, you would probably better add a background element and style this instead)

Specify child in a parent in svelte

1 Answers