萨斯变量变化的CSS变量?

问题描述 投票:1回答:2

我怎样才能做到这一点?

// style.scss

$primary-color: #dc4545;

div{
    background : $primary-color;
}

试着这样做:

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

这是可能以任何方式?

css webpack sass
2个回答
1
投票

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

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

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

编辑:还是你想混搭?

$primary-color: #dc4545;

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

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

0
投票

首先:根和html选择基本相同的事情,但:根比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>
© www.soinside.com 2019 - 2024. All rights reserved.