2

我刚刚听说过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 和其他强大的编辑器中有片段脚本，只是好奇还有什么在野外。

4

4 回答 4

7

Hm. I write a lot of HTML and CSS every day and I am not excited. The paragraph you mention I write in five seconds, and six times Ctrl+C and Ctrl+V. Granted, there may be scenarios when a meta language will save more time but I have never felt the need for one. When there are really massive amounts of HTML - or SQL, or arrays - to produce, I will write a small PHP or VB script for the task. I wouldn't want another meta-language to produce something in another language.

Maybe useful for others but not for me.

If discussion about the general usefulness was what you were looking for. Reading your post a second time, I'm not that sure any more. Anyway. :)

于 2009-11-24T02:08:17.263 回答
4

如果您正在开发 Rails，请查看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>
于 2009-11-25T01:30:16.437 回答
2

我真的很惊讶你们会进行这样的对话。

我从事 Web 开发已有 4 年了，我不记得上次我不得不写类似的东西是什么时候

<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: https://www.sphinx-doc.org

我试图展示这将如何与 reStructuredText 一起使用，您所拥有的示例在 Sphinx 上下文中并不完全有意义，因为您永远不会在不提供指向它们的链接的情况下创建标签。但我希望你有一个想法。

于 2009-11-25T01:51:12.807 回答
0

The Blueprint CSS framework has a Rapid HTML/CSS Development-like tagline:

Spend your time innovating, not replicating.

于 2009-11-24T02:01:23.860 回答