时间戳

首页 > 解决方案 > 如何在 Vue 模板的 javascript 中访问 SCSS 颜色变量？

javascript - 如何在 Vue 模板的 javascript 中访问 SCSS 颜色变量？

问题描述

在我的应用程序中，我有一个组件通知。我通过 mixin 方法在其他组件中调用通知toast('message to display', 'color-variable')。我想要实现的是我的通知组件具有“颜色变量”的背景颜色。问题是颜色变量是在 scss 文件中设置的。从 scss 代码中，我可以使用 function 获取它们color('color-name')，但是，我不知道如何从我的 vue 模板的 javascript 中动态使用该 scss 函数。

我试图通过:style="{'background-color': color(${notification.status})来实现这一点}"，但它不起作用。有没有办法在视图模板中访问 scss vars 作为数据？

标签： javascriptvue.jssass

解决方案

您可以将 sass 变量导出到您的 vue.js 应用程序中。我发现这对主题变量特别有效。这是我在其中一个应用程序中使用的颜色变量设置示例：

$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 need/want style rules applied to this block. */
:export {
  primary: $primary;
  error: $error;
  success: $success;
}

@each $color, $value in $primaryShades {
  :export {
    primary#{$color}: $value;
  }
}

/* stylelint-enable */

然后，如果您想要全局访问，您可以通过全局 mixin 将它们导入您的应用程序：

import colors from './assets/scss/colors_vars.scss';// edit for your location

// in some global mixin
Vue.mixin({
  data() {
    return {
      colors: colors
    };
  }
})

最后在您的代码中访问它们，就像您访问任何其他数据位一样：

toast('message to display', this.colors.error) // in this example I am applying the error color

因此，您可以编写所需的任何逻辑，以便在需要时生成正确的颜色。

computed: {
   notificationColor() {
     if(errorCondition) {
      return this.color.error
    }
     if(successCondition) {
      return this.color.success
    }
  }
}

如果您定义了颜色数组，您可以使用 scss 块查看如何循环它们并导出。以访问主色调 50 为例this.colors.primary50。因此，您可以将颜色设置保留在您的样式中，但在您的 js 中无缝使用它们并在一个地方进行更改。

推荐阅读