在HTML模板中使用CSS选择器

Question

在HTML模板中使用CSS选择器

4

因为在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>

有类似的东西吗？

- Kaivosukeltaja

非常酷的想法。肯定会有助于统一HTML、CSS和jQuery等选择器语法。也许你可以构建一个自定义的HTML处理器，并通过Apache模块将其链接起来（就像我们将PHP链接起来处理.php文件一样）。 - techfoobar

3个回答

2

也许Haml适合你的需求？它看起来非常相似。

- Blender

+1 HAML基本上就是OP所寻找的，而且比他写的还要更高效。 - Mauvis Ledford

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。它可能适合您的需求，也可能不适合。

- Álvaro González

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Florian Margaine · Accepted Answer

也许你想要的是类似 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演示：

zen coding animated gif

基本上是这样的：

编写伪html。
按快捷键。
获取完整的HTML。
?????
获利！

您应该检查您的编辑器是否支持此功能。顺便说一下，我在VIM中使用this，非常棒。