Инструменты пользователя

Инструменты сайта


zencoding

Назад

Zen Coding - это плагин для текстовых редакторов, который ускоряет написание HTML, CSS, XML кода, а также кода на некоторых других языках. Для этого используется целый ряд специальных селекторов и их комбинаций.

Поддерживаемые селекторы HTML тут, а CSS тут. Шпрагалка

Пример:

html:5>ul>li.item-$*5

Получаем:

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <ul>
        <li class="item-1"></li>
        <li class="item-2"></li>
        <li class="item-3"></li>
        <li class="item-4"></li>
        <li class="item-5"></li>
    </ul>
</body>
</html>

Таким образом с помощью Zen Coding можно строить довольно большие селекторы которые позволяют с генерировать код.

Пример 2
ul>li*10>a[href="[page$"].nav-$>{menu$$$}
<ul>
    <li><a href="page1" class="nav-1">menu001</a></li>
    <li><a href="page2" class="nav-2">menu002</a></li>
    <li><a href="page3" class="nav-3">menu003</a></li>
    <li><a href="page4" class="nav-4">menu004</a></li>
    <li><a href="page5" class="nav-5">menu005</a></li>
    <li><a href="page6" class="nav-6">menu006</a></li>
    <li><a href="page7" class="nav-7">menu007</a></li>
    <li><a href="page8" class="nav-8">menu008</a></li>
    <li><a href="page9" class="nav-9">menu009</a></li>
    <li><a href="page10" class="nav-10">menu010</a></li>
</ul>
Пример3
header>(hgroup>h1>h2)+(nav>ul>li*5>a)+div.name>ul>li*5
<header>
    <hgroup>
        <h1>
            <h2></h2>
        </h1>
    </hgroup>
    <nav>
        <ul>
            <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>
    </nav>
    <div class="name">
        <ul>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
</header>