CODEWITHSUNDEEP
cssvue.jssassnuxt.js
Patris
Patris

Reputation: 83

Overriding SASS variables in Vue component from parent

In a Vue component, you can define scoped SASS variables. Is it somehow possible to override them from the parent, such that you could customize the look of the component based on where you use it? I have tried using deep selectors and !default values, but with no success. Making the styles non-scoped is not an option.

Example, trying to change the child's color to black from parent:

<style lang="scss" scoped>
.child-component::v-deep {
  $color: #000;
}
</style>

Child:

<style lang="scss" scoped>
$color: #fff;

.text {
  color: $color;
}
</style>

Upvotes: 1

Views: 2019

Answers (1)

Patris
Patris

Reputation: 83

The current workaround I've found is to pass the value through regular CSS variables.

Parent:

<style lang="scss" scoped>
.child-component {
  --color: #000;
}
</style>

Child:

<style lang="scss" scoped>
$color: var(--color, #fff);

.text {
  color: $color;
}
</style>

Upvotes: 1

Related Questions