javascript - Css 文件未检测到 html 中数据主题的更新

Question

我正在向我的网站添加深色主题，因此我在我的 footer.html 页面中添加了一个切换开关，它向 html 添加了一个变量名称 data-theme = 'dark'。页脚和核心 scss 文件的 scss 文件正在根据条件更改，但模块中的 scss 文件不是。这是我的代码

Footer.html

<footer class="ev-md-container ev-footer ev-dark-bg">
<div class="grad-container rm-grad-pad">
    <div class="row">
        <div class="col l6 s12">
            <h5 class="white-text">EvalAI</h5>
            <p class="text-light-gray">Evaluating state of the art in AI</p>
            <ul class="inline-list">
                <li><a class="text-light-gray" href="https://github.com/Cloud-CV/EvalAI" target="_blank"><i class="fa fa-github"></i></a></li>
                <li><a class="text-light-gray" href="https://twitter.com/project_cloudcv" target="_blank"><i class="fa fa-twitter"></i></a></li>
                <li>
                <div class="switch">
                    <label class="darktheme_text">
                        <input  type="checkbox" id="switch" name="theme">
                        <span class="lever"></span>
                        Dark Mode
                    </label>
                </div>
                </li>
                <!-- <li><a class="text-light-gray" href="#!"><i class="fa fa-facebook" target="_blank"></i></a></li> -->
            </ul>
            <p><a class="text-white">© CloudCV {{year}}</a></p>
        </div>
        <div class="col l4 offset-l0 s12">
            <h5 class="white-text">Links</h5>
            <ul>
                <li><a class="text-light-gray" ui-sref="about-us">About Us</a></li>
                <li><a class="text-light-gray" ui-sref="contact-us">Contact Us</a></li>
                <li><a class="text-light-gray" ui-sref="our-team">Our Team</a></li>
                <li><a class="text-light-gray" ui-sref="get-involved">Get Involved</a></li>
                <li><a class="text-light-gray" ui-sref="privacy_policy">Privacy Policy</a></li>
                <li><a class="text-light-gray" href="https://cloudcv.org">CloudCV Website</a></li>
            </ul>
        </div>
        <div class="col l2 s12">
            <h5 class="white-text">Stats</h5>
            <ul>
                <li>
                   <a class="github-button" href="https://github.com/Cloud-CV/EvalAI" data-icon="octicon-star" data-size="large" data-show-count="true" aria-label="Star Cloud-CV/EvalAI on GitHub">Star</a>
                 </li>
                <li>
                   <a class="github-button" href="https://github.com/Cloud-CV/EvalAI/fork" data-icon="octicon-repo-forked" data-size="large" data-show-count="true" aria-label="Fork Cloud-CV/EvalAI on GitHub">Fork</a>
                </li>
            </ul>
        </div>
    </div>
</div>
</footer>
<script>
var checkbox = document.querySelector('input[name=theme]');
checkbox.addEventListener('change', function() {
if(this.checked) {
    trans()
    document.documentElement.setAttribute('data-theme', 'dark')
} else {
    trans()
    document.documentElement.setAttribute('data-theme', 'light')
}
})
let trans = () => {
document.documentElement.classList.add('transition');
window.setTimeout(() => {
    document.documentElement.classList.remove('transition')
}, 1000)
}
</script>

无法正常工作的 scss 文件

/*font variable*/

$rob-light: 200;
$rob-med: 300;
$rob-reg: 400;
$rob-bold: 600;

/*blue shades*/

$light-gray: #adb4d0;
$med-gray: #3c3e49;
$dark-gray: #252833;
$dust-gray: #1a1b1f;
$blue: #3B9EB9;
$wait-blue:#5843A3;

/*green shades*/

$med-green: #74DB70;

/*red shades*/
$med-red: #DB3232;

/*black shades*/

$shadow-black: #dedede;
$light-black: #9d9d9d;
$med-black: #4d4d4d;
$dark-black: #4d4d4d;

/*orange shades*/

$highlight: #ffaf4b;
$highlight-dark: #ff7b2e;
$med-orange: #DF9C3E;
$hover-orange: #DA8F27;

/*transparent*/

$transparent: rgba(0, 0, 0, 0);

/*link colors*/

$light-link: #fff;
$med-link: #9ca3be;
$dark-link: #252833;

/*link hover colors*/

$link-hover-dark: #ffaf4b;
$link-hover-light: #fff;

/*loader variable*/

$loader-size: 70px;
$loader-dot-size: ($loader-size / 5);
$loader-height: $loader-dot-size;
$loader-dot-color: #ffaf4b;

/*border color*/

$border-color-light: #e3e3e3;

/*Screen Size Variables*/

$med-screen: 992px;
$small-screen: 600px;

/*grad new variables*/

$grad-super-light: #fafafa; 
$grad-light-black: #dcdcdc;
$grad-sec-gray: #45334e;

/*shadow colors*/

$super-light-shadow: #ececec;
html[data-theme = "dark"] {
 $dark-black: #fff;
}

这是来自上面文件的一段代码，它应该可以工作但没有

html[data-theme = "dark"] {
 $dark-black: #fff;
}

我不明白其他 scss 文件可以工作，但模块中的这些文件不能。

Answer 1

问题

Sass 是 CSS 的预处理器。

Sass 变量在最终输出的 CSS 中是不存在的。它们仅在 Sass 预处理期间可用，不会在最终 CSS 中打印。任何变量都将被它代表的值替换。

你输入的 Sass:

html[data-theme = "dark"] {
    $dark-black: #fff;
}

输出的 CSS:

html[data-theme = "dark"] {}

实际上，它会从 CSS 中完全忽略它，因为它是一个空规则集。

---

可能的解决方案

使用 CSS 变量。 CSS 变量将在最终的 CSS 中输出。

html {
    --themed-color: #4d4d4d;
}

html[data-theme = "dark"] {
    --themed-color: #fff;
}

$dark-black: var(--themed-color);