如何使用：root覆盖Basscss中的样式

Question

我只是使用Basscss设置我的第一个静态网站。根据建议，我不想用自己的类或ID覆盖样式，而是change the default ones using the :root element：

  

使用--button-color和调整默认颜色   --button-background-color自定义属性。

但是当我现在添加类似

的东西时

:root {
  --button-color: red;
  --button-background-color: black;
}

到我自己的外部样式表甚至index.html的标题，基本上没有任何反应。我在这里错过了一些东西，以便使用：root？

更改元素颜色

提前谢谢！

干杯， 添

Answer 1

herbigt，听起来像你错过了Basscss为处理自定义变量而假设的处理器（如cssnext或postcss）。这两个处理器都是npm模块，您可以通过相应地配置项目的package.json文件来使它们适合您的开发过程。

我建议您结帐Bassplate以了解如何自定义Basscss。

Bassplate是定制Basscss的官方样板。除了Basscss库之外，它提供的主要资源是package.json配置文件，用于设置Basscss开发环境，包括构建工具和构建命令。

构建工具

1. http-server（将您的项目提供给localhost:8080，以便您可以在浏览器中查看自己的作品），
2. watch（在进行更改时会监视文件更改并重建您的css），
3. cssnext（处理Basscss文件中的@imports和其他类似CSS4的内容。

以上三个工具列在Bassplate package.json的{​​{3}}中。

构建命令

Bassplate的package.json文件提供了命令脚本，告诉上述3个工具要做什么。您可以在package.json文件的the devDependencies section下找到这些命令。

Basscss正在展望即将推出的CSS4规范，这些规范有望包括自定义变量等，即：

:root {
  --button-color: red;
}

虽然CSS4还不是标准，但像postcss和cssnext这样的工具允许我们实现CSS4语法。您可以在Basscss文档部分the scripts section中阅读相关内容。