[英]Css file not detecting the update of data-theme in html
我將深色主題添加到我的網站,因此我在我的 footer.html 頁面中添加了一個切換開關,並將變量名稱 data-theme = 'dark' 添加到 html。 頁腳和核心 scss 文件的 scss 文件根據條件發生變化,但模塊中的 scss 文件不是 . 這是我的代碼
頁腳.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 文件可以工作,但模塊中的這些文件卻不能。
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);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.