文章/答案/技术大牛

发布

社区首页 >问答首页 >SASS/SCSS -主体上的颜色开关不工作

问SASS/SCSS -主体上的颜色开关不工作
EN

Stack Overflow用户

提问于 2020-10-17 16:33:50

回答 1查看 226关注 0票数 0

我想建立一个简单的主题颜色切换器在CSS与萨斯预处理器。例如，当我单击一个按钮时，背景颜色会从白色切换为黑色/黑色切换为白色。该功能适用于我的div、我的按钮，但不适用于我的身体(其上设置了背景颜色)。你知道为什么吗？

谢谢

HTML

<body>
    <div class="container">
        <button class="toggle-btn">Toggle theme</button>
    </div>
</body>

CSS/SCSS

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: inherit;
}

:root {
    font-size: 14px;
}

body {
    box-sizing: border-box;

    min-height: 100vh;

    display: flex;
    justify-content: center;
    align-items: center;

    .dark-theme & {
        background-color: black;
    }
}

.container {
    border: 2px solid red;

    height: 500px;
    width: 1000px;

    display: flex;
    justify-content: center;
    align-items: center;

    transition: all .3s;

    .dark-theme & {
        background-color: black;
    }
}

.toggle-btn {
    background-color: black;
    color: white;
    padding: 15px;

    .dark-theme & {
        background-color: white;
        color: black;
    }
}

const toggleBtn = document.querySelector('.toggle-btn');

toggleBtn.addEventListener('click', () => document.body.classList.toggle('dark-theme'));

code

css

sass

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-10-17 16:44:25

你写的是

body {
    .dark-theme & {
        background-color: black;
       }
    }

这意味着主体元素的暗主题类名inside。更改为&.dark-theme，&表示within主体元素。

body {
 &.dark-theme {
        background-color: black;
    }
  }

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/64400517

复制

相似问题

问SASS/SCSS -主体上的颜色开关不工作
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SASS/SCSS -主体上的颜色开关不工作EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问SASS/SCSS -主体上的颜色开关不工作
EN