Sass变量更改为css变量？答案

【问题标题】：Sass variable change to css variable?Sass变量更改为css变量？
【发布时间】：2019-02-04 17:52:35
【问题描述】：

我该怎么做？

// style.scss

$primary-color: #dc4545;

div{
    background : $primary-color;
}

尝试这样做：

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

这有可能吗？

【问题讨论】：

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

标签： css webpack sass

【解决方案1】：

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

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

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

编辑：或者你想混搭？

$primary-color: #dc4545;

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

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

【讨论】：

我知道这个项目中使用了多少变量。但是不可能一一更改，因为这些变量的使用不止一个文件，因此任何其他转换方式也是如此。
不幸的是，SASS 变量仅存在预编译，因此 CSS 能够识别您需要先将其转换为在 CSS 上定义的变量。

【解决方案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>

【讨论】：

:root with higher specificity --> 你这是什么意思？ root 不会选择任何内容，所以这里没有特殊性