How to pass style from parent component to child?

Question

Sass

Hello, in the styles of the parent component there is

.wrapper{
$gap: 10vmin;
}

Can I somehow pass $gap to the child element right away in the scss code, so that later I can do margin: $gap in the child for example?

Answer 1

No. Use custom properties.

.wrapper {
  --gap: 10vmin;
}

.children {
  margin: var(--gap);
}

<div class="wrapper">
  <div class="children">
    <!-- Применится margin: 10vmin -->
  </div>
</div>

Answer 2

1. Any common css can only be used if the child components cannot exist without the parent component. In this case, allocate a separate folder for such a bunch of components, make a file there <compnent-group-name>.variables.scssand import it where necessary.
2. If these components are not connected, any things that control and change the behavior of the component must be passed exclusively through props. Each individual component is a black box. You should be able to completely and drastically change the layout inside a component without changing its behavior. In vue 3, there is even a handy construct for this v-bindinside <style>.
PS Well, of course, if this is a $gapglobal parameter, you canconfig vue\sass-loader add a file with variables common to all.