trzmaxim/twig-inline-styles

将内联样式表示为关联数组的Twig扩展

维护者

详细信息

github.com/trzmaxim/twig-inline-styles

源代码

问题

安装: 50

依赖: 0

建议者: 0

安全性: 0

星标: 0

关注者: 1

分支: 0

开放问题: 0

dev-master 2015-10-04 22:32 UTC

Requires

Requires (Dev)

MIT 094b252c7d01c59fe0b95315526efe0204015b79

  • Maxim Gerasimov <treizeger.woop@gmail.com>

twigcssinlinestyle

This package is not auto-updated.

Last update: 2024-09-28 17:38:36 UTC

README

用于创建和输出内联样式的Twig扩展

安装

通过 Composer

composer require "trzmaxim/twig-inline-styles": "dev-master"

use TrzMaxim\TwigInlineStyles\InlineStylesExtension;

$twig = new Twig_Environment(...);

$twig->addExtension(new InlineStylesExtension());

使用方法

样式以哈希形式呈现。样式键为驼峰命名法，厂商前缀必须以大写字母开头（如 WebkitTransition）。值是一个字符串或数字，自动添加行 "points"，但有例外（见）

{% style foo {
  fontSize: 12,
  color: 'red'
} %}

<p style="{{ foo }}"></p>

可以通过 .merge 合并样式

{% style foo {
  fontSize: 12,
  color: 'red'
} %}

{% style bar {
  color: 'green',
  padding: '10px 0',
} %}

{{ foo.merge(bar) }} {# font-size:12px;color:green;padding:10px 0; #}