在 HTML 模板中使用 CSS 选择器答案

【问题标题】：Using CSS selectors in HTML templates在 HTML 模板中使用 CSS 选择器
【发布时间】：2012-06-11 07:29:36
【问题描述】：

在 HTML 模板中意外使用 CSS 选择器后，我开始想知道是否存在允许这种语法的模板语言或扩展，以及它是否有用。所以不要写这个：

<div id="mydiv">
  <div class="first column">1</div>
  <div class="second column">2</div>
</div>

我们可以这样写：

<div#mydiv>
  <div.first.column>1</div>
  <div.second.column>2</div>
</div>

这样的东西存在吗？

【问题讨论】：

很酷的想法。肯定会有助于统一 HTML、CSS 和 jQuery 等的选择器语法。也许您可以构建一个自定义 HTML 处理器并通过 apache 模块链接它（就像我们链接 PHP 以处理 .php 文件）。

标签： html css template-engine

【解决方案1】：

也许你的意思是Jade？

它是一个 HTML 预处理器。

以下内容：

doctype 5
html(lang="en")
  head
    title= pageTitle
    script(type='text/javascript')
      if (foo) {
         bar()
      }
  body
    h1 Jade - node template engine
    #container
      if youAreUsingJade
        p You are amazing
      else
        p Get on it!

将被翻译成：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Jade</title>
    <script type="text/javascript">
      if (foo) {
        bar()
      }
    </script>
  </head>
  <body>
    <h1>Jade - node template engine</h1>
    <div id="container">
      <p>You are amazing</p>
    </div>
  </body>
</html>

另外，这不是您要问的，但您可能会喜欢Zen Coding。它是一个高速编码 HTML 的插件。 GIF 展示了它的作用：

基本上是：

编写伪html。
点击快捷方式。
获取完整的 HTML。
?????
利润！

您应该咨询您的编辑器是否支持这一点。 FWIW，我在 VIM 中使用 this，它很棒。

【讨论】：

谢谢！ Jade 似乎很酷，尤其是对于 Python 项目 - 尽管我非常喜欢 Django 自己的模板系统，至少现在无法进行切换。
@Kaivosukeltaja 我编辑为答案添加了禅宗编码。它可能适合您的直接需求:)

【解决方案2】：

有一个工具使用类似（但不相同）的语法，称为Zen Coding。在启用 Zen Coding 的编辑器中输入：

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>

这与您描述的不同之处在于它不需要预处理器来运行模板，它只是一个编辑器助手来编写最终的 HTML。它可能适合您的需求，也可能不适合。

【讨论】：

【解决方案3】：

也许haml 会满足您的需求？它看起来非常相似。

【讨论】：

+1 HAML 几乎是操作人员正在寻找的，只是比他写的更有效。