如何使用Zen Coding增加价值？

Question

我喜欢在使用禅编码时添加价值。例如，input:text 可以变成 :。我该如何使 input:text 变成 并将键盘光标置于 value 属性的 '' 之间？

- Moon

---

你的问题似乎缺少HTML代码（“input:text变成：。”，“光标在''之间”）。 - Kristoffer Bohmann

Answer 1

@Moon

这是我使用的一个技巧。

select>option#$*5  // this would give the following HTML <select>

<select>
  <option id="1"></option>
  <option id="2"></option>
  <option id="3"></option>
  <option id="4"></option>
  <option id="5"></option>
</select>

然后，在文本编辑器中选择整个<select>块。
然后，将所有的"<option id"替换为"<option value"。

祝好运 :-)

- stun

Answer 2

如果你想定义一个值被包含在标签中，可以使用以下模式：

b{this is a bold text}

转化为

<b>this is a bold text</b>

尽管我不知道哪些编辑器和IDE支持此功能，但我可以说它适用于IntelliJ和Notepad ++。

- Ed Michel

Answer 3

加入这个 table>tr*5>td*5>lorem10

将生成：

<table>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, aperiam.</td>
                <td>Sit eius temporibus optio reprehenderit itaque blanditiis harum consectetur rerum.</td>
                <td>Ex, odit, nostrum quia nemo consequuntur quisquam corrupti ipsam quis.</td>
                <td>Voluptatibus, cum, aspernatur rem officia recusandae similique saepe praesentium nulla.</td>
                <td>Labore, obcaecati iure rerum beatae dignissimos fugit sapiente! Sequi, fugit.</td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa, totam.</td>
                <td>Officiis, dolores facilis non vitae eius accusamus consequatur magnam incidunt!</td>
                <td>Voluptates repellendus delectus illo facilis at provident unde sint error!</td>
                <td>Quibusdam, nisi, reprehenderit incidunt rem a ducimus sint expedita molestias?</td>
                <td>Quam, laborum rerum unde quaerat fuga architecto odio voluptatum nemo.</td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, architecto.</td>
                <td>Maiores, voluptatum modi sunt iure aperiam aut quisquam nobis suscipit?</td>
                <td>Repellendus, amet vero modi inventore ipsam libero culpa animi debitis.</td>
                <td>Earum consequuntur ut totam possimus provident libero ad commodi esse!</td>
                <td>Reprehenderit, quo, et laboriosam inventore error quas facilis dignissimos voluptate.</td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, necessitatibus.</td>
                <td>Officiis maxime praesentium repellendus distinctio cum atque aspernatur animi dolorum.</td>
                <td>Culpa pariatur quos quis voluptate ratione eos unde accusantium quisquam.</td>
                <td>Id possimus nisi sequi nostrum cum pariatur eius vel commodi.</td>
                <td>Velit, et, iure incidunt illum culpa cum nihil quidem perferendis.</td>
            </tr>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, ab?</td>
                <td>Labore, voluptatem quasi temporibus fugit cumque possimus obcaecati id dolor?</td>
                <td>Asperiores hic maiores architecto alias commodi ea in suscipit unde!</td>
                <td>Distinctio, quasi reprehenderit tempora ipsa nisi ad ut eaque numquam!</td>
                <td>Nobis, illum ex excepturi quaerat mollitia animi vero repellat quam.</td>
            </tr>
        </table>

- defau1t

Answer 4

有一次我用过的东西...

select>option[value=$].gameSize${$x$}*10

将会生成

<select name="" id="">
<option value="1" class="gameSize1">1x1</option>
<option value="2" class="gameSize2">2x2</option>
<option value="3" class="gameSize3">3x3</option>
<option value="4" class="gameSize4">4x4</option>
<option value="5" class="gameSize5">5x5</option>
<option value="6" class="gameSize6">6x6</option>
<option value="7" class="gameSize7">7x7</option>
<option value="8" class="gameSize8">8x8</option>
<option value="9" class="gameSize9">9x9</option>
<option value="10" class="gameSize10">10x10</option>
</select>

所以，$ 会扩展为相应的数字...无论您把它放在哪里！

我正在使用 Sublime Text 2 的 Emmet 插件。

- Vandesh

Answer 5

据我所知，至少在默认的Zen Coding标准中是不能这样做的。不过，至少有一个项目试图向Zen Coding中添加值和一些基本逻辑（如循环），请参阅https://github.com/zodoz/jquery-ZenCoding。不过需要注意的是，这是一个JavaScript实现的项目。

- cthulhu

Answer 6

你可以使用方括号为标签添加属性，例如写入 input:text[value] 会创建一个具有三个占位符的输入框<input type="text" name="|" id="|" value="|">，两个是通用的，来自于:text ，另一个是由[value]获取的属性值。

- kizu