What are the ways to leverage data in CSS when working with Vue?

Question

What are the ways to leverage data in CSS when working with Vue?

I'm trying to create a customized button component using Vue.
How can I access the --mainColor variable in CSS without resorting to inline styling when receiving main props? Any help would be appreciated.

<script>
import Vue from "vue";

    export default Vue.extend({
    name: "CustomButton",
    props: {
        text: {
            type: String,
            default: ""
        },
        main: {
            type: String,
            default: "#10b981"
        }
    }
});
</script>

<style lang="scss" scoped>
.btn {
    --mainColor: #10b981;
    display: inline-block;
    border: 1px solid var(--mainColor);
    color: var(--mainColor);
    &:hover {
        background-color: var(--mainColor);
        color: #fff;
    }
}
</style>

css vue.js

Answer 1

Answer №1

It may seem unlikely, but you can actually implement conditional logic in Sass using their provided example:

$light-bg: #f2ece4;
$light-txt: #036;
$dark-bg: #6b717f;
$dark-txt: #d2e1dd;

@mixin theme-colors($is-light-theme: true) {
  @if $is-light-theme {
    background-color: $light-bg;
    color: $light-txt;
  } @else {
    background-color: $dark-bg;
    color: $dark-txt;
  }
}

.banner {
  @include theme-colors($is-light-theme: true);
  body.dark & {
    @include theme-colors($is-light-theme: false);
  }
}

Explore more about conditional logic in Sass here!

Answer 2

It may seem unlikely, but you can actually implement conditional logic in Sass using their provided example:

$light-bg: #f2ece4;
$light-txt: #036;
$dark-bg: #6b717f;
$dark-txt: #d2e1dd;

@mixin theme-colors($is-light-theme: true) {
  @if $is-light-theme {
    background-color: $light-bg;
    color: $light-txt;
  } @else {
    background-color: $dark-bg;
    color: $dark-txt;
  }
}

.banner {
  @include theme-colors($is-light-theme: true);
  body.dark & {
    @include theme-colors($is-light-theme: false);
  }
}

Explore more about conditional logic in Sass here!

Answer 3

Answer №2

If you're working with Vue3, styling components is a breeze:

<template>
  <h1>WELCOME</h1>
</template>

<script>
export default {
  data() {
    return {
      h1Color: "blue",
    };
  },
};
</script>
<style>
h1 {
  color: v-bind(h1Color);
}
</style>

For more in-depth guidance, check out this resource

If you're using Vue2, following the method mentioned in Steven B's answer would be a good choice. See the details here

Answer 4

If you're working with Vue3, styling components is a breeze:

<template>
  <h1>WELCOME</h1>
</template>

<script>
export default {
  data() {
    return {
      h1Color: "blue",
    };
  },
};
</script>
<style>
h1 {
  color: v-bind(h1Color);
}
</style>

For more in-depth guidance, check out this resource

If you're using Vue2, following the method mentioned in Steven B's answer would be a good choice. See the details here

What are the ways to leverage data in CSS when working with Vue?

Answer №1

Answer №2

Similar questions

What is the best way to blend colors in CSS?

Place a paragraph element within the footer section

Is it necessary to use both Vue Router and Express when incorporating Firebase into your project?

Joining a variable to an image URL using Vue.js

The console.log() function does not accurately display the true value

Showcase text in a straight row by utilizing ng-repeat and bootstrap

Creating input fields using Vuejs

CSS Flexibility in Action

Automatically expand the input field as text is typed

How to Implement ASP.NET Authorization While Allowing Access to .css Files?

Tips for arranging vx-cards horizontally in Vuejs

Encountering a problem when attempting to connect to the LinkedIn API

What is the process for adding color to the rows of a table?

What are the best situations to utilize bootstrap and when should you avoid it?

Tips for creating a header.php and footer.php integrated with CSS files

Adjust the width of a child element to be within the bounds of its parent's width and maximum width

Tips for concealing a div upon reaching a specific scroll point, even with varying content sizes

What is the most efficient way to dynamically insert a space, break, or div at a specific height?

No content displayed as I adjust the height of a child element

Sending parameters to dynamic URLs in Vuex and Laravel