zoukankan      html  css  js  c++  java
  • Zen Coding — a new way of writing HTML and CSS code

    zen-coding - Set of plugins for HTML and CSS hi-speed coding - Google Project Hosting

    Zen Coding — a new way of writing HTML and CSS code

    Follow us on Twitter @zen_coding

    New version 0.7 is available (March 13, 2011), read release notes for more info.

    Zen Coding is an editor plugin for high-speed HTML, XML, XSL (or any other structured code format) coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions—similar to CSS selectors—into HTML code. For example:

    div#page>div.logo+ul#navigation>li*5>a

    ...can be expanded into:

    <div id="page">
            <div class="logo"></div>
            <ul id="navigation">
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
                    <li><a href=""></a></li>
            </ul>
    </div>

    Read more about current Zen Coding syntax

    Abbreviation engine has a modular structure which allows you to expand abbreviations into different languages. Zen Coding currently supports CSS, HTML, XML/XSL and HAML languages via filters.

    Current features of abbreviation engine

    • ID and CLASS attributes: div#page.section.main.
    • Custom attributes: div[title], a[title="Hello world" rel], td[colspan=2].
    • Element multiplication: li*5 will output <li> tag five times.
    • Item numbering with $ character: li.item$*3 will output <li> tag three times, replacing $ character with item number.
    • Multiple '

    characters in a row are used as zero padding, i.e.: li.item$$li.item001

  • Abbreviation groups with unlimited nesting: div#page>(div#header>ul#nav>li*4>a)+(div#page>(h1>span)+p*2)+div#footer. You can literally write a full document markup with just a single line.
  • Filters support
  • div tag name can be omitted when writing element starting from ID or CLASS: #content>.section is the same as div#content>div.section.
  • (v0.7) Text support: p>{Click }+a{here}+{ to continue}.
  • To better understand how Zen Coding works, watch demo video and read Smashing Magazine tutorial.

    Zen Coding isn’t only a decent abbreviation engine, it also provides some very useful actions for HTML-coder’s every day needs, like: Wrap with Abbreviation, Tag Balancing, Toggle Comment, Remove Tag etc. Read more about available actions.

    Officially supported editors

    These plugins are developed by Zen Coding team and guarantee to have full support of all Zen Coding latest features.

    Third-party supported editors

    These plugins are using official Zen Coding engine and developed by third-party developers. Thus, no guarantee that they support all latest ZC features.

    Unofficial implementations

    These plugins are developed by third-party and has their own ZC engine implementation, which leads to different feature set and abbreviation syntax. Zen Coding team has no relation to this projects.

查看全文
  • 相关阅读:
    启动一个线程是用run()还是start()? .
    多线程有几种实现方法?同步有几种实现方法?
    同步和异步有何异同,在什么情况下分别使用他们?举例说明。
    abstract的method是否可同时是static,是否可同时是native,是否可同时是synchronized?
    写clone()方法时,通常都有一行代码,是什么?
    解释Spring支持的几种bean的作用域。
    Spring结构?
    说说hibernate的三种状态之间如何转换?
    测试用例设计的原则是什么?目前主要的测试用例设计方法有哪些?
    一套完整的测试应该由哪些阶段组成?
  • 原文地址:https://www.cnblogs.com/lexus/p/2400191.html
  • Copyright © 2011-2022 走看看