我怎样才能做到这一点?
// style.scss
$primary-color: #dc4545;
div{
background : $primary-color;
}
试着这样做:
div{
background : var(--primary-color)
}
这是可能以任何方式?
您可以定义在:root
全局变量:
:root {
--primary-color: #dc4545;
}
div {
background: var(--primary-color);
}
编辑:还是你想混搭?
$primary-color: #dc4545;
:root {
--primary-color: #{$primary-color};
}
div {
background: var(--primary-color);
}
首先:根和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>