Изменение переменной Sass на переменную CSS?

Question

Как я могу это сделать?

// style.scss

$primary-color: #dc4545;

div{
    background : $primary-color;
}

Попробуйте сделать это:

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

Возможно ли это как-нибудь?

Answer 1

Прежде всего: 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>

Answer 2

Вы можете определить глобальные переменные в :root:

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

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

Редактировать: Или вы пытались смешивать и сопоставлять?

$primary-color: #dc4545;

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

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