Статьи

Совет: еще более быстрая разметка с помощью Sparkup

Декабрь 26, 2018

Большинство из нас уже знакомы с популярной утилитой Zen Coding . Для тех, кто не, это превращает процесс создания сложной разметки в CSS-подобный селектор. Это может сэкономить вам невероятное количество времени; однако, у него есть несколько недостатков. К счастью, еще один инструмент, Sparkup , вдохновленный Zen Coding , устраняет эти проблемы и повышает вашу производительность еще выше!

Предпочитаете видеоурок?

Подождите … Что такое дзен-кодирование ?

Рассмотрим следующую разметку:

01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
<div id=»container»>
   <nav>
      <ul>
         <li>
            <a href=»»></a>
         </li>
         <li>
            <a href=»»></a>
         </li>
         <li>
            <a href=»»></a>
         </li>
         <li>
            <a href=»»></a>
         </li>
      </ul>
   </nav>
</div>

Это довольно распространенная разметка, которую вы будете создавать для каждого нового сайта. Предполагая, что вы еще не сохранили это как фрагмент, его можно легко восстановить за считанные секунды с помощью Zen Coding .

1
#container > nav > ul > li*4
  • Целевые ids и classes с # и . селекторы.
  • Используйте > чтобы отфильтровать дерево и создать дочерние элементы.
  • Запросите несколько элементов, используя символ * .
  • Используйте символ + для создания братьев и сестер.

Есть куда расти

К сожалению, у меня есть несколько проблем с Zen Coding.

  • Насколько я знаю, нет простого способа вернуться обратно на дерево. Например, если я создаю селектор ul > li*4 , я не знаю, как отфильтровать обратно до ul , а затем создать родственный элемент.
  • Нет способа присвоить innerHTML элементу. Не было бы замечательно, если бы я мог печатать, ul>li {Some Text Here} ?
  • Я не верю, что есть способ tab между остановками после расширения.

К счастью, утилита, вдохновленная Zen Coding, устраняет все перечисленные выше проблемы. Он совместим с прямым интерфейсом, т. Е. Все ваши знания в области Zen-кодирования будут легко передаваться.

Доступность

На момент написания этой статьи Sparkup был доступен для TextMate, Vim и для общего использования через командную строку. Это довольно тривиально для установки. Для получения дополнительной информации, смотрите скринкаст выше.

Поднимитесь на дерево

С Sparkup мы можем путешествовать обратно вверх по дереву.

Синтаксис
1
ul > li*3 > a < < + #contents

Обратите внимание, как мы используем < для перемещения вверх по дереву. Из тега привязки один < перенесет нас к элементу списка, а другой вернет нас к неупорядоченному списку, после чего мы можем создать брата с символом + . Очень полезно!

Выход
01
02
03
04
05
06
07
08
09
10
11
12
<ul>
   <li>
      <a href=»»></a>
   </li>
   <li>
      <a href=»»></a>
   </li>
   <li>
      <a href=»»></a>
   </li>
</ul>
<div id=»contents»></div>

Добавить текст в элементы

Используя фигурные скобки, мы можем присвоить значения или innerHTML элементам, которые мы создаем. Эта функция была крайне необходима.

Синтаксис
1
ul > li > p { My Text Here }
Выход
1
2
3
4
5
<ul>
   <li>
      <p> My Text Here </p>
   </li>
</ul>

Табуляция

С помощью Sparkup мы можем переключаться между необходимыми остановками, чтобы мы могли как можно быстрее вручную вставить наши атрибуты / значения. В MacVim, как показано на скриншоте, вы можете использовать Control + N и Control + P для переключения между остановками.

Таким образом, вместо того, чтобы прибегать к многочисленным нажатию клавиш, одна команда приведет вас туда, где вам нужно. Обратитесь к скринкасту для примера.

Так что ты думаешь? Будете ли вы делать переключение?

34
Share: