Is it feasible to utilize a prop for styling in Vue using SCSS/SASS?

Question

Is it feasible to utilize a prop for styling in Vue using SCSS/SASS?

I am currently working on enabling custom theming for my component that utilizes bootstrap. I am aiming to define its $primary tag in SCSS within the section of the Vue component. Currently, my styling setup looks like this:

<style scoped lang="scss">
$primary: #FF1493;
// Bootstrap and its default variables
@import "../../node_modules/bootstrap/scss/bootstrap";
// BootstrapVue and its default variables
@import "../../node_modules/bootstrap-vue/src/index.scss";

@import "src/assets/custom.scss";
</style>

My goal is to make that hex code adaptable based on a prop received by the component. Thank you for your assistance.

Following advice from a comment, an attempt was made but did not yield the desired outcome:

<template>
 <div style="style="{ '--test': #ff1493 }"">
 </div>
</template>

<style scoped lang="scss">
$primary: var(--test);
// Bootstrap and its default variables
@import "../../node_modules/bootstrap/scss/bootstrap";
// BootstrapVue and its default variables
@import "../../node_modules/bootstrap-vue/src/index.scss";

@import "src/assets/custom.scss";
</style>

This resulted in a compile error in the SCSS:

SassError: argument `$color` of `darken($color, $amount)` must be a color
        on line 181 of node_modules/bootstrap/scss/_variables.scss, in function `darken`
        from line 181 of node_modules/bootstrap/scss/_variables.scss
        from line 9 of node_modules/bootstrap/scss/bootstrap.scss
        from line 201 of D:\Documents\Code\SiliconGit\src\components\SiDialog.vue

javascript css vue.js sass bootstrap-4

Answer 1

Answer №1

Following the suggestion of Emad Ahmed, I implemented their solution and it worked perfectly for me.
Here is how my component is structured;

<template>
    <div id="a" :style="cssVars">
        <p>Hello there</p>
    </div>
</template>

<script>
    export default {
        name: "css-change",
        props: {
            init_color: {
                required: false,
                type: String,
                default: '#ff0000'
            }
        },
        data() {
            return {
                color: this.init_color
            }
        },
        computed: {
            cssVars () {
                return{
                    /* variables you want to pass to css */
                    '--color': this.color,
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
#a{
    background-color: var(--color);
}
</style>

I have included Bootstrap in my project with this line in package.json: "bootstrap": "4.4.1"

Answer 2

Following the suggestion of Emad Ahmed, I implemented their solution and it worked perfectly for me.
Here is how my component is structured;

<template>
    <div id="a" :style="cssVars">
        <p>Hello there</p>
    </div>
</template>

<script>
    export default {
        name: "css-change",
        props: {
            init_color: {
                required: false,
                type: String,
                default: '#ff0000'
            }
        },
        data() {
            return {
                color: this.init_color
            }
        },
        computed: {
            cssVars () {
                return{
                    /* variables you want to pass to css */
                    '--color': this.color,
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
#a{
    background-color: var(--color);
}
</style>

I have included Bootstrap in my project with this line in package.json: "bootstrap": "4.4.1"

Is it feasible to utilize a prop for styling in Vue using SCSS/SASS?

Answer №1

Similar questions

Issue with jQuery clone(): original content's radio button toggling display function not functioning as intended

Simultaneous appearance of multiple jQuery dialogs

Curved edges, Layering, Content overflow restriction

Arrange list items dynamically using ajax

An illustration of a skeleton alongside written content in neighboring sections

Trigger javascript function after clicking on two buttons

Dynamic website featuring fixed background with content transitioning through clicks or scrolls

React - The `component` prop you have supplied to ButtonBase is not valid. Please ensure that the children prop is properly displayed within this customized component

"Setting up a filter for the first row in an Excel-like table using a pin header

Display elements with a particular class using jQuery

The animation in Material UI does not smoothly transition with the webkit scrollbar

What is the best way to notify the user about the input in the textbox?

Issue with triggering blur event in Internet Explorer while using Angular 2+

Guide to changing the background colors of multiple elements when hovered over by the mouse?

Controlling the file system on a local level through browser-based JavaScript and Node.js

Retrieving Dropdown Value in Bootstrap 5: How to Obtain the Selected Item's Value from the Dropdown Button

Not all dynamic content is loaded through Ajax requests on a single domain

Implementing a jQuery selector feature in a headless browser like PhantomJS

Differences between HTML viewports and media queries

Unlocking Secret Data with External JavaScript