通过 
搜索
搜索chris-ware / bem-twig-extension
在BEM方法中插入静态类的Twig函数。
dev-master
2018-01-02 11:51 UTC
Requires
- twig/twig: ^2.0 | ^1.12
This package is auto-updated.
Last update: 2024-09-13 11:14:06 UTC
README
在BEM方法中插入静态类的Twig函数。
基于 [https://github.com/drupal-pattern-lab/bem-twig-extension], 但适配为普通的twig扩展
添加扩展
$twig = new Twig_Environment($loader, $options); $twig->addExtension(new Bem\Twig\BemExtension());
使用方法（4个参数）
简单块名（必需参数）
<h1 {{ bem('title') }}>
这会创建
<h1 class="title">
带有修饰符的块（可选数组，允许多个修饰符）
<h1 {{ bem('title', ['small', 'red']) }}>
这会创建
<h1 class="title title--small title--red">
带有修饰符和块名的元素（可选）
<h1 {{ bem('title', ['small', 'red'], 'card') }}>
这会创建
<h1 class="card__title card__title--small card__title--red">
带有块名但没有修饰符的元素（可选）
<h1 {{ bem('title', '', 'card') }}>
这会创建
<h1 class="card__title">
带有修饰符、块名和额外类的元素（可选 - 如果需要非BEM类）
<h1 {{ bem('title', ['small', 'red'], 'card', ['js-click', 'something-else']) }}>
这会创建
<h1 class="card__title card__title--small card__title--red js-click something-else">
仅带有额外类的元素（可选）
<h1 {{ bem('title', '', '', ['js-click']) }}>
这会创建
<h1 class="title js-click">