0

假设我打算创建一个采用暗模式的网页。一个非常小的页面可能如下所示:

:root {
  --fg-color: white;
  --bg-color: black;
}

body {
  color: var(--fg-color);
  background-color: var(--bg-color);
}

.simple {
  border: 1px solid;
  text-align: center;
}
<html>
  <body>
    <h2 class="simple">Hello world!</h2>
  </body>
</html>

现在假设我想通过 KSS 记录它。我会在.module' 规则集之前添加这些注释行(中间留一个空行):

/*
Simple

Markup:
<h2 class="simple">some text</h2>

Styleguide Simple.simple
*/

.simple {
  border: 1px solid;
  text-align: center;
}

令我失望的是,文档库采用了color而不是background-color,从而导致无法阅读的白底白字,如下所示(蓝色是我用鼠标所做的选择): enter image description here

4

2 回答 2

1

KSS 项目的官方 GitRepo 最后一次更新是在 2016 年,其中大部分提交是在 8 年前 的 2012-2013年进行的。

2016, let alone 2013, was long before CSS Custom Properties were widely supported by browsers so it's no surprise that it's choking - though it's interesting that it seemed to recognize color: var() but not background-color: var().

I'd call-it-quits and just document your CSS manually. The project seems dead. And the project's author and maintainer seems more interested in funding innovative food production systems than running an open-source project.

...or you could fork it and try to update it with the past 8 years of advances to CSS and stay on the maintenance treadmill.

于 2021-08-31T19:57:58.490 回答
0

The other answer clearly explains the current situation: the project is dead.

For what concerns possible workarounds

I've found one that kinda works: setting color and background-color in :root rather than in body affects the KSS documentation page, thus resulting in accurate representation of the modules in the library. On the other hand, the KSS-specific stuff is negatively affected by this. But I still find the result better than having white on white as I described in the question.

Here's the result, where the back ground dark color applies to the whole page: enter image description here

One that works slightly better consists in setting color and background-color both in body (not in :root) and .kss-modifier__wrapper:

enter image description here

于 2021-09-01T17:02:38.893 回答