时间戳

首页 > 解决方案 > CSS3：同时使用 SCSS 和 CSS 变量

css - CSS3：同时使用 SCSS 和 CSS 变量

问题描述

我有两组变量：

/* CSS Variables */
:root {
    --black : #000000;
    --white : #FFFFFF;
    --primary : #2957C8;
}

和

/* SCSS variables from a variables.scss file */
$black: var(--black);
$white: var(--white);
$primary: var(--primary);

两者都出于某些遗留原因而存在。在许多现有的 scss 文件中，我发现

@import '~variables.scss';
div {
  background: $white;
  color: $primary;
}

我可以转到每个文件，将 scss 变量交换为 css 变量：

div {
  background: var(--white);
  color: var(--primary);
}

这样做有什么好处？我最终可以删除该variables.scss文件。它将删除所有scss import

您还看到其他优点吗？

这里的问题是这组颜色实际上要大得多，并且由数百个不同的项目共享。所以我需要 100% 确定，进行交换将是有益的。

标签： csssass

解决方案

推荐阅读