CODEWITHSUNDEEP
javascriptcsssassvue.js
LiranC
LiranC

Reputation: 2480

vue.js - bind sass styling from one component to another

this question is about vue.js, that operates on a boilerplate that using webpack configuration.

i need to dynamically pass sass variables from component father to component son (for the simplicity of naming).

on component father i have access to $color variable from the style tag. and i'm calling to son component using this html template:

// father component
    <template>
        <son></son>
    </template>
    <style lang='sass' scoped>
        @import 'assets/sass/color';
    </style>

imported sass variable, $color need to come from father and change the background of son

let's say son is just a simple div.

// son component
    <template>
        <div></div>
    </template>

    <style lang=sass scoped>
        div {
            width: 200px;
            height: 200px;
        }
    </style>

what's the correct way to do it?

Upvotes: 1

Views: 1329

Answers (2)

Aer0
Aer0

Reputation: 3907

Besides of your scoped stylings you could also use global ones in the same component which would get exposed to the child component. Just add a new style tag to your component, without using the scoped key.

Your component could look somehow like that.

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

Source

Upvotes: 0

MehulJoshi
MehulJoshi

Reputation: 889

you can import sass and use binding like,

<p v-bind:style="[baseStyles, overrideStyles]">
baseStyles and overrideStyles
</p>

EDIT

or you can do something like

<template>
    <div v-bind:class="$style.my_component">Hello</div>
</template>
<style module>
    .my_component {
        color: purple; // still the best color ever
    }
</style>

Upvotes: 1

Related Questions