http://www.web008.net

CSS代码的法子

Zen Coding: 风度翩翩种高效编写HTML/CSS代码的主意

2012/05/17 · CSS · 2 评论 · CSS

斯拉维尼亚语原稿:Smashing Magazine,翻译:前端观察

在本文中我们将呈现豆蔻年华种新的施用仿CSS选拔器的语法来火速支付HTML和CSS的办法。它由Sergey Chikuyonok开发。

你在写HTML代码(饱含富有标签、属性、援用、大括号等)上海消防费微微时间?如若你的编辑器有代码提示功用,你编写的时候就能够轻易些,但就算如此你仍然要手动敲入相当多代码。

在JavaScript方面,当大家想要在三个页面上收获有些特定的因素时,大家就能遇上形似的标题,我们亟须写过多代码,那就变得难于爱抚和重 用。JavaScript框架应际而生,它们同期引进了CSS选择器引擎。现在,你可以利用简便的CSS表明式来获取DOM成分,那很帅。

只是,假若你不光能够用CSS的选取器布局和永世成分,还能够浮动代码会什么?比方,倘若你这么写:

CSS

 div#content>h1+p

1
 div#content>h1+p

…然后就能够看来这么的出口:

XHTML

<div id="content"> <h1></h1> <p></p> </div>

1
2
3
4
<div id="content">
<h1></h1>
<p></p>
</div>

些微吸引吧?前日,小编将向你介绍Zen Coding,生龙活虎组用于快捷HTML和CSS编码的工具。最初由Vadim Makeev在2009年4月提出(文章为俄文),由鄙人(也等于自己)开荒了数月并最后落得比较早熟的气象。Zen Coding由两个基本器件组成:一个缩写扩充器(缩写为像CSS同样的选取器)和上下文非亲非故的HTML标签对相称器。看一下这一个演示录制来看一下它们能为您做些什么。

[youku id=”XMTM4NDQwNzgw”]

注意:该录像原版位于Vimeo,可是要看的话供给翻[和谐]墙先,地址在这里地:,上边的录疑似本身忙碌从Vimeo上下载下来上传到优酷的,上传后品质竟被大降价扣了,囧。youtube上也是有风流罗曼蒂克份录制,是基于Aptana的示范,同样很优异:。PS:貌似youtube要比Vimeo翻[和谐]墙轻巧些,但是怎么样翻[和谐]墙不在本站研究范围。

假诺您想跳转到详细介绍和使用指南,请看一下示范页面并随时下载你适用的插件:

Demo

●Demo (使用 Ctrl + , 展开缩写,供给JavaScript扶植)

●汉语版演示

下载(完全扶植)

●Aptana (跨平台);

●Coda, via TEA for Coda (Mac);

●Espresso, via TEA for Espresso (Mac);

下载(部分援救,只帮助“展开缩写”)

TextMate(只好用于Mac机,Windows能够使用E-text编辑器代替);

●TopStyle;

●Sublime Text;

●GEdit;

●Dreamweaver CS4

●editArea在线编辑器;

●Zen Coding在线编辑器中文版

今日让大家看一下那一个工具是哪些做事的吗。

开展缩写

举行缩写作用将相近CSS的采取器转变为XHTML代码。术语“缩写”恐怕会有的难以知晓。为啥不直接称之为“CSS选用器”呢?嗯,首要原因是语义化:“选用器”意为选择有的事物,可是在那间我们实在是生成 一些东西,是写一个长代码的非常的短的代表。其次,它只是利用真实的CSS选用器语法的贰个小的子集,并增加了有的新的操作符。

这里是一个支撑的习性和操作符的列表:

●E

要素名称(div, p);

●E#id

使用id的元素(div#content, p#intro, span#error);

●E.class

接受类的成分(div.header, p.error.critial). 你也能够合作使用class和idID: div#content.column.width;

●E>N

后人元素(div>p, div#footer>p>span);

●E+N

手足成分(h1+p, div#header+div#content+div#footer);

●E*N

要素倍增(ul#nav>li*5>a);

●E$*N

条约编号 (ul#nav>li.item-$*5);

正如您能收看的,你曾经知道怎么利用Zen Coding了:只是些三个总结的仿CSS接收器(呃,“缩写”抱歉),就如那样…

…然后调用”展开缩写”行为。

此处有多少个新扩大的操作符:成分倍增和条文编号。例如,如若你想生成5个<li>成分,你能够总结的写位li*5。它也将大器晚成律重写全体子 代元素。假使您想写4个<li>成分,每一个里面都有三个<a>标签,你就足以轻便的写为li*4>a,那样会变动以下 HTML代码:

XHTML

<li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li>

1
2
3
4
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>

末段三个——条款编号用于当您想用索引标志重复的因素的情景。假令你想生成class为item1、item2和item3的3个<div>成分。你能够写成这么的缩写,div.item$*3:

XHTML

<div></div> <div></div> <div></div>

1
2
3
<div></div>
<div></div>
<div></div>

只需在您想要索引现身的任何class或id属性上增加二个欧元符号就能够,並且想要多少都足以。那么,那样…

XHTML

div#i$-test.class$$$*5

1
div#i$-test.class$$$*5

会被转变到为:

XHTML

<div id="i1-test"></div> <div id="i2-test"></div> <div id="i3-test"></div> <div id="i4-test"></div> <div id="i5-test"></div>

1
2
3
4
5
<div id="i1-test"></div>
<div id="i2-test"></div>
<div id="i3-test"></div>
<div id="i4-test"></div>
<div id="i5-test"></div>

您会见到,当您写a的缩写的时候,输出是<a href=””></a>。大概,假设你写img,输出便是<img src=”” alt=”” />。

Zen Coding是何许领悟何时理应为浮动的竹签增添暗中同意的属性恐怕跳过关闭标签的?有一个专程的公文,名叫zen_settings.js陈诉了出口成分。那是四个简便的JSON文件,描述每一种语言的缩写(是的,你可感到差异的句法定义缩写,比方HTML、XSL、CSS等)。通用的语言缩写定义看起来就好像这么:

JavaScript

'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>nt${child}|n<![endif]-->',             ...             },               'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',             ...             }             }

1
2
3
4
5
6
7
'html': { 'snippets': { 'cc:ie6': '<!--[if lte IE 6]>nt${child}|n<![endif]-->',
            ...
            },
              'abbreviations': { 'a': '<a href=""></a>', 'img': '<img src="" alt="" />',
            ...
            }
            }

要素类型

Zen Coding有四个重大的要素类型:“片段(snippets)” 和 “缩写(abbreviations)”。片 段正是即兴的代码碎片,而缩写是标签署义。通过一些,你能够写出您想要的其余轮代理公司码,它也会照你写的格式输出;不过你必需手动的格式化它(使用n 和t达成换行和缩进) 并将${child}变量放到你想要输出子成分的地点,犹如那样:cc:ie6>style。倘使您不应用${child}变量,子成分将会输出于 代码片段的后面

有了缩写,您必需编写制定标记定义,何况语法是可怜关键的。常常,你必需写四个轻松的隐含全数默许的习性的价签,比如: <a href=””></a>。当Zen Coding被加载后,它会剖判一个标签订义到三个陈说该标签的名字、属性(包含它们的次第)甚至该标签是不是为空的特定的对象中。所以,假设您 写<img src=”” alt=”” />,你会报告Zen Coding那些标签必需是空的,然后“扩大缩写”行为就会在输出以前为它应用一定的规规矩矩。

对于一些和缩写,你能够加多一个管道符号,它告诉Zen Coding当缩写被开展的时候光标会被定位到哪儿。暗许的,Zen Coding 将光标放在空属性的引号中间甚至最初和破产标签的高级中学级。

例子

那么,这里解释一下当您写了多个缩写并呼吁“展开缩写”行动时发生的政工。首先,它将四个意气风发体化的缩写分开为独立的要素:那样div>a 会被分为div 和a 成分,当然也会保持他们的涉嫌。然后,各个成分,分析器先在代码片段内而后在缩写中追寻定义。假设它找不到,将会选用要素的名字作为新的价签,并为其丰富缩写中定义的id和class。比方,假设您写mytag#example,深入分析器在部分或缩写中找不到mytag定义,它就能够输出<mytag id=”example”><mytag>。

咱俩创设了重重默认的CSS和HTML缩写和有个别。你会发觉学习应用Zen Coding能够扩大你的临蓐力。

HTML 标签对相配器

对此HTML编码者的另四个不行分布的任务是查究一个因素的标签对。举例你想选用任何<div id=”content”>标签并将其移动到别之处恐怕去除它。可能有望您在追寻一个关闭标签并想精通它归于相当初阶标签。

不幸的是,比较多今世开辟工具在该作用方面有着欠缺。那么本人就决定写多个本身自个儿的标签对相称器作为Zen Coding的意气风发部分。可是它仍旧在beta阶段并尚存一些主题材料,但它能够干活的很科学并超快。不是浏览整个文书档案(像普通的这种HTML标签对相称器的做 法),它从光标的当前地点上马搜求有关的价签。那使得它可怜快而且上下文毫不相关:它甚至能够用于这段JavaScript代码片段

JavaScript

var table = '<table>'; for (var i = 0; i < 3; i++) {     table += '<tr>'; for (var j = 0; j < 5; j++) {         table += '<td>' + j + '</td>';     }     table += '</tr>'; } table += '</table>';

1
2
3
4
5
6
7
var table = '<table>'; for (var i = 0; i < 3; i++) {
    table += '<tr>'; for (var j = 0; j < 5; j++) {
        table += '<td>' + j + '</td>';
    }
    table += '</tr>';
}
table += '</table>';

利用缩写包裹

那实在是七个非常酷的表征,它将缩写和标签对相配器的功能合併到同盟了。你有多少才意识你必要充分叁个包装成分以改进一个浏览器bug?恐怕你需求加上四个装修,举例叁个背景图片或许边框到二个块级内容?你必得写起来标签,偶尔打断您的代码,找到相关的点然后关闭标签。那便是“使用缩写包裹”能帮忙您的地点。

该成效极其轻巧:它需要您输入缩写,然后执行适当的“打开缩写”行动并将你希望的文书放到你缩写的终极贰个要素里面。假设您从未选取别的文件,它就能够运营标签对相称器并接纳结果。它生机勃勃律能搞精晓你的光标的岗位:标签的剧情之中只怕是从头和停业标签中间。信赖于它之处,它会卷入标签的从头到尾的经过或标签本人。

缩写包裹为包装个别行引进了一个一定的缩写句法。轻巧跳转到倍增操作符后边的数字,譬如:ul#nav>li*>a。当Zen Coding 开采一个利用未定义的倍增数的时候,它会将它看成一个再一次成分:你的章节中有多少行,它就能输出多少次,并将每行的内容放到重复成分的末尾一个子成分里面。

借使您在此段文本外面包裹这段缩写div#header>ul#navigation>li.item$*>a>span:

XHTML

About Us Products News Blog Contact Up

1
2
3
4
5
About Us
Products
News
Blog
Contact Up

你将会拿走以下结果:

XHTML

<div id="header">     <ul id="navigation">         <li><a href=""><span>About Us</span></a></li>         <li><a href=""><span>Products</span></a></li>         <li><a href=""><span>News</span></a></li>         <li><a href=""><span>Blog</span></a></li>         <li><a href=""><span>Contact Up</span></a></li>     </ul> </div>

1
2
3
4
5
6
7
8
9
<div id="header">
    <ul id="navigation">
        <li><a href=""><span>About Us</span></a></li>
        <li><a href=""><span>Products</span></a></li>
        <li><a href=""><span>News</span></a></li>
        <li><a href=""><span>Blog</span></a></li>
        <li><a href=""><span>Contact Up</span></a></li>
    </ul>
</div>

您能够看见,Zen Coding是一个强硬的文本管理工科具。

快捷键

●Ctrl+,

进行缩写

●Ctrl+M

匹配对

●Ctrl+H

采纳缩写包涵

●Shift+Ctrl+M

合并行

●Ctrl+Shift+?

上四个编辑点

●Ctrl+Shift+?

下二个编辑点

●Ctrl+Shift+?

一定匹配成对

那么些赶快键是足以自定义的。

在线演示

您早已学到非常多关于Zen Coding怎样职业以至它是何许使您的编码更易于了。未来干什么不协调尝尝一下吗?因为Zen Coding是用纯JavaScript开拓并搬迁到Python,它竟然能够用来浏览器内部,那令它成为引进到CMS的首要推荐。

●Demo (使用 Ctrl + , 张开缩写,要求JavaScript援助)

●普通话版演示

美高梅手机版,支撑的编辑器

Zen Coding并不重视某些特定的编辑器。它是叁个只管理公事的上佳的机件:它获得文本、做一些甩卖并放回新的公文(或索引,用于标签相称)。Zen Coding由JavaScript和Python编写,所以它实在能够运维于任何平台。在Windows,你能够运转JavaScript版本,而 Mac和Linux 分支可以行使Python版。

假设让您的编辑器扶助Zen Coding,你要求写三个一定的能够在您的编辑器和Zen Coding之间转换数据的插件。难点是二个编辑器或许不会全部的支撑Zen Coding因为它本身的插件系统。举个例子,TextMate通过运用脚本输出替换当前行很容的就扶助了“张开缩写”作用,可是它不能够管理标签对神工鬼斧因为尚未正式的情势诉求TextMate来抉择内容。

全然帮衬

●Aptana (跨平台);

●Coda, via TEA for Coda (Mac);

●Espresso, via TEA for Espresso (Mac);

生龙活虎部分援助(只帮忙“张开缩写”)

●TextMate (只可以用于Mac机,Windows能够行使E-text编辑器代替);

●TopStyle;

●Sublime Text;

●GEdit;

●Dreamweaver CS4

●editArea在线编辑器;

●Zen Coding在线编辑器普通话版

Aptana是本身第风流倜傥的费用条件,它选取三个JavaScript版本的Zen Coding。它也富含众多别样的自家用于普通工作的工具,所以任何八个新的Zen Coding版本都将会率先对Aptana可用,然后安插到Python并合营别的的编辑器。

Coda和Espresso 插件被卓绝的Text Editor Actions (TEA) 平台帮助,由Ian Beck支出。原始的源代码在GitHub上,但自己要么制作了自身本身的分段以整合Zen Coding的特性。

总结

成百上千尝试过Zen Coding的人都在说它更改了她们写页面包车型客车秘诀。当然还会有超级多事务要做,还恐怕有不少的编辑器须要被协助以至一些文档要写。请浏览现行反革命的文书档案 以及源代码以搜索你的主题素材的答案。希望你喜欢Zen Coding!

附:Zen coding的切实可行用法

缺憾的是, 本文原来的著小编并不曾评释zen coding的切实可行用法,神飞认为有供给做以下轻松的认证。这里就以Aptana/Eclipse和Dreamweaver为例,此外编辑器平台暂不描述,如有疑问能够在评价中与前面一个观望的网上朋友调换。

Aptana/Eclipse

由于Aptana本人便是基于Eclipse的,所以,Zen Coding也是支撑Eclipse的,只是须要四个EclipseMonkey插件的支撑,Aptana已经封装了这些插件,所以要是你接纳Aptana,上边包车型客车首先步能够跳过。

1、通过校订网址设置EclipseMonkey (假若您选择Aptana,可跳过这一步)

2、在您的当前职业去创制三个世界级的类型,给它定名,比如,就叫zencoding<

3、在新创造的体系中创立scripts文件夹

4、解压缩下载的ZIP插件包到该文件夹。项目结构看起来就疑似那样:

美高梅手机版 1

5、安装之后,Aptana的菜单栏中的“脚本(Script)”菜单上校会师世Zen coding相关子菜单

注意事项:

●Aptana版的合法插件是依赖MAC机的,如若您用的是Windows,供给手动改良快速键(在种种文件尾部的笺注片段中改过)

●官方的文书编码有一些儿乱,改比肩方js的时候,请留意编码问题,校订不当会促成有关职能的散失;

DreamWeaver

好消息是,今后早就有了Zen coding for DreamWeaver插件,坏新闻是,该插件援助的成效相当少,只帮助开展缩写效能。并且暗中同意的快捷键是没用的。只好在“命令”菜单中式茶食击操作。其余,没有测量试验该插件是或不是只扶持CS4版本。不过相比较好的是,我将本插件的源码也放出了,你能够自定义三个Dreamweaver的插件。

PS:官方的DW插件已经更新,推荐到法定去下载。新的插件增加了越来越多的法力匡助。UPDATE @ 12-23-二零一零

特地推荐:Haoqing同学将缩写给试行了大器晚成番,总括出了累累很棒的用例,推荐我们前去上学。

原来的著笔者介绍:

SergeyChikuyonok是一人俄罗丝的前端开垦程序员和作者,他在优化方面有一点都不小的热心:从图片、JavaScript效果到办事流程和节省时间的编码。访问他的主页和他的Twitter。

 

赞 2 收藏 2 评论

美高梅手机版 2

2018年就知晓了Sublime Text 2那款编辑器,那时就颇具青睐,还用了生龙活虎段时间来进展付出。前段时间,有的时候知道了还会有Zen Coding那样的多少个插件之后,大概对这几个插件以至能够扶持插件的Sublime Text 喜爱得舍不得放手。

 

先说如何是Zen Coding。

 

生机勃勃旦您用过jQuery,那么分明会对接受器有深厚的回想。Zen Coding由五个为主器件构成:叁个缩写扩大器;一个HTML标签相称器。

 

运用Ctrl + Alt + Enter 呼出ZenCoding,大家得以用 div#content>ul>li*3>a[href="javascript:void(0);"]{Links$} 那样短短的一句话,生成下边黄金时代段代码:

 

<did id="content">

     <ul>

          <li><a href="javascript:void(0);">Links1</a></li>

          <li><a href="javascript:void(0);">Links2</a></li>

          <li><a href="javascript:void(0);">Links3</a></li>

     </ul>

</did>

 

这么神奇的书写方式,合作Sublime Text 实时预览的功用,整个经过当成神乎其神。

 

Zen Coding 插件的设置

 

插件的装置进程在参照他事他说加以侦查资料中说的特别驾驭,这里摘录出来以备后用。

 

1、安装包调控 Package Control。

郑重声明:本文版权归美高梅163888所有,转载文章仅为传播更多信息之目的,如作者信息标记有误,请第一时间联系我们修改或删除,多谢。