将Sass变量转换为CSS变量？

Question

我可以做这个吗？

// style.scss

$primary-color: #dc4545;

div{
    background : $primary-color;
}

尝试执行以下操作：

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

有什么方式可以实现这个功能吗？

- Durga prasad patra

---

有趣的问题，这里有一个教程可能会有所帮助：https://codepen.io/jakealbaugh/post/css4-variables-and-sass - admcfajn

Answer 1

您可以在:root上定义全局变量：

:root {
  --primary-color: #dc4545; 
}

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

编辑：或者你是想混合搭配吗？

$primary-color: #dc4545;

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

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

- jerrylow

---

我知道在这个项目中使用了多少变量。但是不可能逐个更改，因为这些变量在多个文件中被使用，有没有其他的转换方式呢？ - Mr. Durga prasad patra

很不幸，SASS变量只存在于预编译中，因此为了让CSS识别该变量，您需要先将其转换为在CSS上定义。 - jerrylow

Answer 2

首先，:root 和 html 选择器基本上是相同的东西，但 :root 比 html 选择器具有更高的特异性。

html {
  
}

/*****exactly :root and html selector are same but with higher specifity(:root)*****/
:root {
  --color-primary-light: #FF3366;
  --color-primary-dark: #BA265D;
  --bakcground-color: #fff;
  --default-font-size: 16px;
  --color: blue;
  }
  
  /****************How to implement***************/
  .root-selector {
    background-color: var(--background-color);
    font-size: var(--default-font-size);
    color: var(--color);
  }

<div class="root-selector">
  Thank you buddy
</div>

- Md. A. Barik

---

:root 具有更高的特异性 --> 这是什么意思？root 不会选择任何东西，因此这里没有特异性。 - Temani Afif