SCSS变量不生效

Question

我目前正在努力理解为什么我对系统颜色的更改没有生效。

这是我在 chrome 中看到的图像。

但这正是我期望看到的

我有三个文件variables.scss、bootstrap.scss 和branding.scss。这是我的 Angular 项目中主 styles.scss 中的导入列表。

这是我的进口清单。

@import "styles/variables";
@import "../../../node_modules/bootstrap/scss/bootstrap";
@import "styles/branding";

我的变量的片段

/* =====================================
    General Colours
===================================== */

$color-black: rgb(0,0,0);
$color-white: rgb(255,255,255);

/* System Backgrounds
===================================== */
$color-lm-bg-primary:   #8E8E93;
$color-lm-bg-secondary: #8E8E93;
$color-lm-bg-tertiary:  #8E8E93;

/* System Greys
===================================== */
$color-lm-grey-1:   #8E8E93;
$color-lm-grey-2:   #AEAEB2;
$color-lm-grey-3:   #C7C7CC;
$color-lm-grey-4:   #D1D1D6;
$color-lm-grey-5:   #E5E5EA;
$color-lm-grey-6:   #F2F2F7;

/* System Tints
===================================== */
$color-lm-blue:     #007AFF;
$color-lm-green:    #34C759;
$color-lm-indigo:   #5856D6;

最后这是我的branding.scss

:root {

    /* General backgrounds and colours
    ===================================== */
    --bg-primary-color:     $color-lm-bg-primary;
    --bg-secondary-color:   $color-lm-bg-secondary;
    --bg-tertiary-color:    $color-lm-bg-tertiary;
    --text-color:           $color-black;

    /* General backgrounds and colours
    ===================================== */
    --button-primary-bg:        $color-lm-blue;
    --button-secondary-bg:      $color-white;
    --button-green-bg:          $color-lm-green;
    --button-red-bg:            $color-lm-red;

    --button-primary-color:     $color-white;
    --button-secondary-color:   $color-lm-blue;
    --button-green-color:       $color-white;
    --button-red-color:         $color-white;
}

html,
body {
        background-color: var(--bg-primary-color);
        color: var(--color-text);
}

/* Button Classes
===================================== */
body .btn-primary-theme {
  background-color: var(--button-primary-bg);
  color: var(--button-primary-color);
}

我真的不明白为什么它没有生效，我看不到任何明显的东西可以进一步复杂化问题，chrome 的开发人员工具显示以下内容。

该图像是按钮类

这是引导颜色。

未来的目的是添加浅色和深色主题，但那是另一个时间了。

任何帮助将不胜感激。

Answer 1

有一种特殊的语法适合您的目的：https ://sass-lang.com/documentation/writing-changes/css-vars

$accent-color: #fbbc04;

:root {
  // WRONG, will not work in recent Sass versions.
  --accent-color-wrong: $accent-color;

  // RIGHT, will work in all Sass versions.
  --accent-color-right: #{$accent-color};
}

您需要包装 SCSS 变量才能#{$color}正确转译。