如何在sass中使用css变量？答案

【问题标题】：How to use css variables in sass?如何在sass中使用css变量？
【发布时间】：2023-02-11 00:55:37
【问题描述】：

我想在 sass 中定义和使用 ss 变量。我的解决方案是错误的。为什么？

:root {
  --color-main: #79abbc;
 }

$primary: #{var(--color-main)};

【问题讨论】：

您不会直接使用 var 而不是将其分配给 sass var 然后使用它吗？
@Pete 稍后我会在样式组件中需要它
那么为什么不改变 css var 呢？ jsfiddle.net/sycdzh5f/1
我们可以使用更多关于您要实现的目标的上下文，因为目前看起来您正在使用三种不同的样式方法。
您不能将 CSS var for value 影响到 SASS var。您可能以错误的方式使用 vars 进行推理。你可以在this post获取更多信息。如果您在开发方面需要进一步的帮助，您可以根据上下文编辑您的问题或提出新的问题。

标签： css sass

【解决方案1】：

CSS 变量，也称为 CSS 自定义属性，也可以在 Sass 中使用。要在 Sass 中使用 CSS 变量，您需要使用“--”前缀声明它们，就像在纯 CSS 中一样。

下面是如何在 Sass 中使用 CSS 变量的示例：

 :root {
      --primary-color: #4caf50;
      --secondary-color: #ff9800;
    }
    
    .btn {
      background-color: var(--primary-color);
      color: var(--secondary-color);
      padding: 1em;
      border-radius: 0.25em;
    }

在本例中，“:root”选择器用于定义两个 CSS 变量，“--primary-color”和“--secondary-color”。然后使用“var()”函数在“.btn”类中引用这些变量。

您还可以使用 Sass 变量和函数动态更改 Sass 中 CSS 变量的值。例如：

$primary-color: #4caf50;
$secondary-color: #ff9800;

:root {
  --primary-color: $primary-color;
  --secondary-color: $secondary-color;
}

.btn {
  background-color: var(--primary-color);
  color: var(--secondary-color);
  padding: 1em;
  border-radius: 0.25em;
}

.btn-danger {
  --primary-color: darken($primary-color, 10%);
  --secondary-color: darken($secondary-color, 10%);
}

在此示例中，CSS 变量的值是使用 Sass 变量设置的，然后在“:root”选择器中引用这些变量。然后使用“darken()”函数动态更改“.btn-danger”类中 CSS 变量的值。

【讨论】：

它使用 scss 变量编译为 css，这将是不可读的， :root { --primary-color: $primary-color; }