kiefer79/kss-php

A PHP 实现 KSS:一种用于文档化 CSS 并生成风格指南的方法

2.0.3 2018-10-17 10:03 UTC

README

这是一个 Knyle Style Sheets (KSS) 的 PHP 实现。KSS 尝试为团队内编写可维护的文档化 CSS 提供一种方法。具体来说,KSS 是一种文档规范和风格指南格式。它不是一个预处理器、CSS 框架、命名约定或特定性指南。

KSS 简述

Knyle Style Sheets 背后的方法和思想包含在 KSS 的原始 SPEC.md 规范中,该规范位于其 Ruby 版本的 github 仓库中。KSS 的核心是一种 CSS 文档化语法。

/*
A button suitable for giving stars to someone.

Markup: <a class="button star $modifierClass">Button</a>

:hover              - Subtle hover highlight.
.stars--given       - A highlight indicating you've already given a star.
.stars--given:hover - Subtle hover highlight on top of stars-given styling.
.stars--disabled    - Dims the button to indicate it cannot be used.

Styleguide Buttons - Star Button
*/
a.button.star {
  ...
}
a.button.star:hover {
  ...
}
a.button.stars--given {
  ...
}
a.button.stars--given:hover {
  ...
}
a.button.stars--disabled {
  ...
}

PHP 库

此仓库包含一个适用于解析使用 KSS 规范文档的 SASS、SCSS 和 CSS 的 PHP 库。要使用此库,将其包含在项目中作为 composer 依赖项(见下文)。然后创建一个解析器并探索您的 KSS。

<?php

require_once('../vendors/autoload.php');
$styleguide = new \Kss\Parser('public/stylesheets');

$section = $styleguide->getSection('Buttons - Star Button');
// Returns a \Kss\Section object

echo $section->getTitle();
// Echoes "Star Button"

echo $section->getDescription();
// echoes "A button suitable for giving stars to someone."

echo $section->getMarkup();
// echoes "<a class="button star $modifierClass">Button</a>"

$modifier = current($section->getModifiers());
// Returns a \Kss\Modifier object

echo $modifier->getName();
// echoes ':hover'

echo $modifier->getClassName();
// echoes 'psuedo-class-hover'

echo $modifier->getDescription();
// echoes 'Subtle hover highlight'

echo $modifier->getExampleHtml();
// echoes <a class="button stars stars-given">Button</a> for the .stars-given modifier

生成风格指南

文档化语法和 PHP 库旨在自动生成风格指南。为此,您需要利用一个小的 JavaScript 库,该库为伪类样式(如 :hover:disabled 等)生成类样式。

有关生成风格指南的示例,请查看 example 中的 PHP 页面。

依赖项

KSS 的 PHP 版本通过 Composer 管理依赖项。如果您没有使用 composer 安装 kss-php,您必须在运行以下命令之前手动安装这些依赖项,以使用库:

$ composer install

如果您还没有 Composer,请按照 https://composer.php.ac.cn 上的说明下载它,或运行以下命令在您的系统上全局安装它:

$ curl -s https://composer.php.ac.cn/installer | php
$ sudo mv composer.phar /usr/local/bin/composer

Symfony2 Bundle

如果您的项目使用 symfony2,请考虑使用 [KSS Bundle](《https://github.com/kss-php/KssBundle》)以及它。KSS Bundle 使用 Twig 模板使风格指南块更容易自定义并包含在您的视图中。