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

Question

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

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

Answer 1

您可以将 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 中无缝使用它们，并在一处更改它们。