SCSS 变量未生效答案

【问题标题】：SCSS variable not taking effectSCSS 变量未生效
【发布时间】：2021-10-03 22:40:44
【问题描述】：

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

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

但这是我期望看到的

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

这是我的进口清单。

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

我的变量的 sn-p

/* =====================================
    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 的开发人员工具显示以下问题。

这个图片是按钮类

这个是引导颜色。

未来的目的是添加明暗主题，但那是另一次了。

任何帮助将不胜感激。

【问题讨论】：

标签： html css angular sass

【解决方案1】：

有一个特殊的语法用于您的目的：https://sass-lang.com/documentation/breaking-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} 才能正确转译。

【讨论】：