Question

我刚刚听说过zen-coding，它基本上只是一个基于css-esque选择器生成标记的脚本，例如：

div#foo > p*6

产生

<div id="foo">
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

修改：这是一个更高级的示例..

和PS - 我甚至没有通过任何API，我完全猜测基于我的CSS选择器知识，这对我来说非常简单直观。

ul#nav > li[id] * 6 > a

生成

<ul id="nav">
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
    <li id="">
        <a href=""></a>
    </li>
</ul>

当您点击Ctrl-E等快捷方式时。如果你做了很多前端开发，非常有用。我有一个完全相反的想法，一个CSS选择器生成器，基本上解析标记并生成选择器，这样一个人可以进入Firebug等工具，并快速查看点上的实时更改，我只是从来没有打扰到实际完成我的脚本启动。

它目前在TextMate，Dreamweaver，Aptana，NetBeans中受支持，遗憾的是没有vim / emacs但是有一个名为sparkup的分支可以在vim上运行（我现在使用它）。

我想知道过去是否有人遇到过这样的插件或工具 - 我知道在Vim / Textmate / Emacs和其他强大的编辑器中都有片段脚本，只是想知道其他内容是什么野。

Answer 1

嗯。我每天都写很多HTML和CSS，我并不兴奋。你提到的段落是我用五秒钟写的，六次是Ctrl + C和Ctrl + V.当然，有些情况下，元语言可以节省更多时间，但我从来没有觉得需要一个。当要生成大量的HTML（或SQL或数组）时，我会为该任务编写一个小的PHP或VB脚本。我不希望另一种元语言用另一种语言产生某种东西。

也许对别人有用，但不适合我。

如果关于一般有用性的讨论是您正在寻找的。第二次读你的帖子，我不再那么肯定了。无论如何。：）

Answer 2

如果您正在开发导轨，请查看Sass和Haml

Sass可以使用变量并进行基本数学运算：

// Sass

!blue = #3bbfce
!margin = 16px

.content_navigation
  border-color = !blue
  color = !blue - #111

.border
  padding = !margin / 2
  margin = !margin / 2
  border-color = !blue

呈现：

/* CSS */

.content_navigation {
  border-color: #3bbfce;
  color: #2aaebd;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Haml使用缩进代替div并匹配css＃和。用于标记类和div的系统：

#profile
  .left.column
    #date= print_date
    #address= current_user.address
  .right.column
    #email= current_user.email
    #bio= current_user.bio

呈现给：

<div id="profile">
  <div class="left column">
    <div id="date"><%= print_date %></div>
    <div id="address"><%= current_user.address %></div>
  </div>
  <div class="right column">
    <div id="email"><%= current_user.email %></div>
    <div id="bio"><%= current_user.bio %></div>
  </div>
</div>

Answer 3

我真的很惊讶你们正在进行这次谈话。

我已经做了4年的Web开发，我不记得上次我不得不写一些像

这样的东西

<li>some text</li>

在单个实例中多一次。

我在任何给定点上写的最多html就像是

<ul>
<?php foreach ( $menu as $item ) : ?>
 <li><?php echo $item->title ?></li>
<?php endforeach; ?>
</ul>

毋庸置疑，我真的没有看到学习一种工具来加速编写令人难以置信的HTML的重点。就像拿一把更大的铁锹一样，你只会把自己挖到一个更大的整体。

我认为你应该问自己，我怎样才能消除我生成的静态html的数量？

该问题的答案是使用Joomla，Drupal或Wordpress等CMS。如果你绝对需要编写静态html网站，那么请查看类似Sphinx的内容。

Sphinx完全消除了编写HTML的需要，它允许您创建具有多个页面的静态网站，而无需编写单个硬编码的html链接。

Sphinx使用reStructuredText标记。我将向您展示如何在reStructuredText中生成代码。

- `Joomla`_
- `Drupal`_
- `Wordpres`_
- `Sphinx`_
_ :doc:`Some intermal Page <internal/file>`

.. _Joomla: http://joomla.org
.. _Drupal: http://drupal.org
.. _Wordpress: http://wordpress.org
.. _Sphinx: http://sphinx.pocoo.org/

我试图展示这对reStructuredText是如何工作的，你在Sphinx上下文中的例子并不完全有意义，因为你永远不会在没有提供链接的情况下创建标签。但是你希望得到一个想法。

Answer 4

Blueprint CSS框架具有类似快速HTML / CSS开发的标语：

花时间创新，而不是复制。

您是否使用任何工具进行快速html / css开发？

4 个答案: