Как передать стиль из родительского компонента дочернему?

Question

[sirinotapple]

Здравствуйте, в стилях родительского компонента есть

.wrapper{
$gap: 10vmin;
}

могу ли я кокто передать $gap дочернему элементу сразу в коде scss чтоб потом сделать в дочернем к примеру margin: $gap?

Comments

[GrayHorse]

https://stackoverflow.com/a/55368933/11468937

Answer 1

[Сергей delphinpro]

Нет. Используйте пользовательские свойства.

.wrapper {
  --gap: 10vmin;
}

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

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

Answer 2

[Aetae]

1. Какой-либо общий css можно использовать только в том случае если компоненты дети не могут существовать без компонента родителя. В таком случае выделяете отдельную папочку под такую связку компонентов, там делаете файлик <compnent-group-name>.variables.scss и импортируете его куда надо.
2. Если эти компоненты не связаны - любые управляющие и изменяющие поведение компонента вещи нужно передавать исключительно через props. Каждый отдельный компонент - чёрный ящик. У тебя должна быть возможность полностью и кардинально изменить вёрстку внутри компонента, не изменив его поведение. В vue 3 для этого даже есть удобная конструкция v-bind внутри <style>.

P.S. Ну и само собой если этот $gap глобальный параметр, можно в конфиге vue\sass-loader добавить общий для всех файл с переменными.