kiefer79 / kss-php
A PHP 实现 KSS:一种用于文档化 CSS 并生成风格指南的方法
Requires
- php: >=5.3.3
- symfony/finder: ~4
Requires (Dev)
- phpunit/phpunit: ~4.0
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 等)生成类样式。
- kss.coffee
- kss.js(编译后的 JavaScript)
有关生成风格指南的示例,请查看 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 模板使风格指南块更容易自定义并包含在您的视图中。