时间戳

首页 > 解决方案 > 如何使用 postCSS 创建基于 HTML 类的 CSS 颜色主题解决方案

css - 如何使用 postCSS 创建基于 HTML 类的 CSS 颜色主题解决方案

问题描述

我正在开发一个应用程序，根据 HTML 元素上的类，应该应用不同的颜色主题。我们正在使用 postCSS 并且需要支持 IE11。

我尝试了两个不同的插件postcss-custom-properties和postcss-css-variables，它们都给出了相似的结果......

例如，当给定以下输入时：

:root {
    --color: red;
}
:root.green {
    --color: green;
}

p {
    color: var(--color);
}

postcss-css-variables将产生以下输出：

p {
    color: red;
}

但我希望得到这样的输出：

p {
    color: red;
}

html.green p {
    color: green;
}

根据实际结果，我认为不可能创建一个可以通过切换类来切换的颜色主题。

PostCSS 主题解决方案似乎专注于在构建时生成主题。在我们的应用程序中，每个用户都可以选择自己的颜色主题，并且应该能够在不刷新页面的情况下切换主题。因此，它需要是基于 CSS 类的解决方案，并且所有颜色/类排列都应该在提供的 CSS 中。

是否有可能使用 postCSS 实现我正在寻找的东西？

（如果我们可以放弃对 IE11 的支持......那么我们可以只依赖 css 变量......）

标签： csspostcsscss-variables

解决方案

不确定这是否适合您，但您可以仅使用 css 来做到这一点。

$(document).ready(function(){
  $('#red').on('click', function(){
    $('html').removeClass();
    $('html').addClass('red');
  });
  $('#green').on('click', function(){
    $('html').removeClass();
    $('html').addClass('green');
  });
});
html.green p {
    color: green;
}

html p,
html.red p{
    color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="red">Red</button>
<button id ="green">Green</button>

<p>This is my paragraph</p>

推荐阅读