Incorporating Sass variables into your Vue.js application can be highly effective, especially for theming purposes. Here's an illustration of how you can set up color variables in one of my applications:
$primaryShades: (
50: #f5fef9,
100: #e6fcf1,
200: #d5fae8,
300: #c4f8df,
400: #b8f7d8,
500: #abf5d1,
600: #a4f4cc,
700: #9af2c6,
800: #91f0c0,
900: #80eeb5,
A100: #fff,
A200: #fff,
A400: #fff,
A700: #f6fffa
);
$primary: map-get($primaryShades, 500);
$primary_100: map-get($primaryShades, 100);
$primary_200: map-get($primaryShades, 200);
$primary_300: map-get($primaryShades, 300);
$primary_400: map-get($primaryShades, 400);
$primary_500: map-get($primaryShades, 500);
$primary_600: map-get($primaryShades, 600);
$primary_700: map-get($primaryShades, 700);
$primary_800: map-get($primaryShades, 800);
$primary_900: map-get($primaryShades, 900);
$error: #ef9a9a;
$success: #76c078;
/* stylelint-disable -- exports for JS don't require style rules */
:export {
primary: $primary;
error: $error;
success: $success;
}
@each $color, $value in $primaryShades {
:export {
primary#{$color}: $value;
}
}
/* stylelint-enable */
To enable global access, import the variables using a global mixin in your app:
import colors from './assets/scss/colors_vars.scss';// Update path as needed
// Inside global mixin
Vue.mixin({
data() {
return {
colors: colors
};
}
})
Then simply access these variables in your code like any other data:
toast('message to display', this.colors.error) // Using the error color in this example
You can write logic to dynamically determine and apply the right color when needed:
computed: {
notificationColor() {
if(errorCondition) {
return this.color.error
}
if(successCondition) {
return this.color.success
}
}
}
If you have defined color arrays, refer to how they can be looped over and exported in the Sass block. Accessing primary shade 50 would look like this.colors.primary50. This allows you to maintain color settings in your styles while seamlessly utilizing them in JavaScript and updating them centrally.