问题标签 [knyle-style-sheet]

我喜欢KSS（Knyle 样式表）。我知道用 Ruby 编写的原始样式指南生成器 ，并且我已经看到了 Node和Rails 引擎的端口。

我找不到任何其他实现，但我想知道，
PHP 中是否有 KSS 样式指南生成器的实现？

^{（或者，作为旁注，任何其他语言？）}

编辑：正如janiv在评论中提到的，github 上有一个 PHP 实现。

我正在使用KSS 的 NodeJS 实现。我有以下文件结构：

我可以通过执行以下命令行指令成功生成样式指南：

我sass要解析的源文件夹styleguide也是如此，目标文件夹也是如此，--cssand--template选项告诉编译器在哪里可以找到我的主 css 文件和模板。在此过程中，文件的内容css/styles.css被复制到该文件中styleguide/public/style.css，然后由样式指南引用。这一切都很棒。

但是，样式指南生成和引用的 css 文件现在位于与原始 css 文件不同的文件夹结构中（它距根目录深两层而不是一层），因此对该images文件夹的任何引用现在都无效。有没有办法解决这个问题，而无需将我的原始 css 文件放在目录中的另一个文件夹中css以模仿 styleguide 文件夹结构（这将是一个巨大的 hack）？

此外，任何其他对普通 html 标记中的图像的引用（源自 scss 注释）都必须进行调整以引用调整后的文件夹结构，因此并不表示我的代码在现实生活中的实现。有没有办法解决这个问题？

谢谢

所以我采用了 KSS 模板并对其进行了修改以符合我们的需要。但现在我有一个小问题。每个部分都在生成，我让它为我构建目录。但是，如果我有一个包含 6 种输入变体的部分，例如“输入”，我需要它能够在我的侧导航中选择子部分并在目录的主要部分下创建子部分。

这是我的代码现在的样子。生成每个部分等时一切都很好，但我不知道如何在左侧导航下创建子部分。当然我不想手动编码，因为我使用的是 KSS。

当然，这是使用适当的 scss 文件生成的内容。如您所见，“输入”有很多变化，但在左侧目录中只有一个主要的“输入”部分。

我正在使用 kss-node 构建样式指南，但我想对不同的部分页面使用不同的标记（即不同的修饰符），我该如何实现呢？

我的 index.html 模板是这样做的：

我如何获得一个部分页面来使用它：

而不是这个：

我尝试了以下代码之类的东西，其中包含用于车把的条件“if”助手，但没有运气：

我的 KSS 看起来像这样：（显然图标是不同的）

我有一个使用 SCSS 的 Angular 4 应用程序，我们想使用KSS Styleguide自动创建样式指南。问题是 KSS 需要指向已编译的 CSS 文件，以便它可以显示样式的预览。但是，由于 Angular 4 使用 webpack，样式被转储到 JS 文件而不是 .css 文件中。

我的一个想法是创建一个单独的任务来构建 KSS 并将 SASS 编译成专门用于 KSS 的 css 文件。我想确保它的编译方式与 Angular 编译它的方式相同。我不知道如何创建这个任务。

或者也许有为 Angular 构建的 KSS 的替代版本？

更新：

我尝试了@jonrsharpe 提供的解决方案，但我收到了找不到 css 文件的错误。这是我添加到 package.json 的内容

这是我收到的错误消息

我已经验证正在创建 css 文件，但它好像找不到它。

更新 2

不要忘记添加任务的剩余部分，--source 和--destination。添加了这些，现在它工作得很好！

我开始使用Keith Grant 的CSS in Depth作为 KSS 的参考。

在 10.1.4，作者写道

在 css 目录中，在 css/homepage.md 处创建一个新文件。这将是 Markdown 中的一个文件，用作模式库的介绍。将此列表复制到文件中。

现在运行npm run build，关于主页内容的警告应该消失了。

关键是警告对我来说并没有消失，

确实docs/index.html在浏览器中打开会显示目录的内容。

如果它可能相关，这里是npm run kss命令的完整输出：

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

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

令我失望的是，文档库采用了color而不是background-color，从而导致无法阅读的白底白字，如下所示（蓝色是我用鼠标所做的选择）：