zen coding

最新推荐文章于 2025-09-10 17:59:49 发布

weixin_34226182

最新推荐文章于 2025-09-10 17:59:49 发布

阅读量65

点赞数

CC 4.0 BY-SA版权

文章标签： python

原文链接：https://my.oschina.net/uniquejava/blog/353935

本文深入探讨了webstorm的使用，并介绍了zencoding这一工具的流行趋势及其实用特性，包括规则详解、实例应用及CSS部分的支持，旨在帮助开发者高效地进行网页开发。

2019独角兽企业重金招聘Python工程师标准>>>

自从用了webstorm后才开始关注zen coding，没想到已经流行Ｎ久了。
规则：

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*5will output<li>tag five times.
Item numbering with $ character:li.item$*3will 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
divtag name can be omitted when writing element starting from ID or CLASS:#content>.sectionis the same asdiv#content>div.section.
(v0.7) Text support:p>{Click }+a{here}+{ to continue}.

实例：
div#page>div.logo+ul#navigation>li*5>a
生成

<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>

div.photo*3
生成

<div class="photo"></div>
<div class="photo"></div>
<div class="photo"></div>

更进一步，div也可省掉，就是说上面的代码在webstorm中只要输入.photo*3再按下tab键就能自动生成。

div>img+(.photoSummary>.photo$*3)+.summaryClear
生成

<div>
    <img src="" alt=""/>
    <div class="photoSummary">
        <div class="photo1"></div>
        <div class="photo2"></div>
        <div class="photo3"></div>
    </div>
    <div class="summaryClear"></div>
</div>

常用的还有
table+, select+