css的media中间值,元素类中的CSS @media-使用CSS变量

我正在创建一个脚本，该脚本允许我在类中提供媒体大小和填充/边距值，而不是在.css文件中的每个@media内创建类。

到目前为止，这：

Test

像这样的灵魂工作：

@media (max-width: 600px) {

.s-padding-0-30-60-0 {

padding: 0px 30px 60px 0px !important;

}

}

这是我的所有代码：

index.html：

Index

red

green

blue

default.css：

:root {

--padding_value: 0px;

--margin_value: 0px;

--s_padding_value: 0px;

--s_margin_value: 0px;

--m_padding_value: 0px;

--m_margin_value: 0px;

--l_padding_value: 0px;

--l_margin_value: 0px;

--xl_padding_value: 0px;

--xl_margin_value: 0px;

--cor: #ff0000;

}

@media (max-width: 600px) {

.s-padding {padding: var(--s_padding_value)}

.s-margin  {margin : var(--s_margin_value)}

}

@media (min-width: 601px) {

.m-padding {padding: var(--m_padding_value)}

.m-margin  {margin : var(--m_margin_value)}

}

该脚本可以工作，但是div不会获得新的填充值。我需要“重新加载” .css文件吗？div是否不应该因为该类而具有新的填充？