В этой части серии Emmet мы узнаем о синтаксисе и функциях.
Синтаксис и функции Emmet
Emmet использует синтаксис, подобный селекторам CSS, для описания позиций элементов внутри сгенерированного дерева и атрибутов элементов. Вы можете использовать имена элементов, такие как div или p чтобы генерировать теги HTML.
Применение классов и идентификаторов с. и #
. используется для добавления классов к элементам, а # используется для добавления идентификаторов. Вот несколько примеров для идентификаторов и классов. Вы можете применить несколько идентификаторов и классов к любому элементу.
Классы
ul.nav.nav-main.nav-static
будет генерировать
<ul class="nav nav-main nav-static"></ul>
Идентификаторы
header#site-header
будет генерировать
<header id="site-header"></header>
Как вы можете видеть в приведенных выше примерах, я применил несколько классов к ul .
Дочерние элементы:>
> используется для вложения элементов друг в друга. Вы можете использовать несколько раз. Это может быть полезно для создания навигационных меню и списков. Посмотрите код ниже, я собираюсь создать навигационное меню с ul, элемент списка и элемент списка будут ссылкой.
nav>ul>li>a
сгенерирует следующее навигационное меню. nav является родительским элементом, тогда мы имеем ul как дочерний элемент и li с тегом внука.
<nav> <ul> <li> <a href=""></a> </li> </ul> </nav>
Родной брат: +
Знак + используется для создания элементов одного брата. Полезно создавать элементы рядом друг с другом, на одном уровне. Следующая аббревиатура будет генерировать трех братьев и сестер.
header+.main+footer
будет выводить
<header></header> <div class="main"></div> <footer></footer>
Поднимитесь: ^
С помощью > вы можете создавать элементы внутри друг друга. Но если вы хотите подняться на один уровень вверх в созданном дереве HTML, вам придется использовать символ ^ . Давайте рассмотрим пример одной и той же аббревиатуры с разными операторами + и ^ .
Пример 1: +
header+article>p>str+bq+footer
сгенерирует следующий код.
<header></header> <article> <p> <strong></strong> <blockquote></blockquote> <footer></footer> </p> </article>
Как вы можете видеть, strong , blockquote и footer вложены в тег p абзаца, но мы хотим blockquote после p в качестве родственного элемента и footer в качестве другого раздела. Для этого нам ^ оператор ^ .
Пример 2: ^
Введите следующий код и нажмите tab .
header+article>p>str^bq^footer
и у нас есть разметка, которая нам нужна:
<header></header> <article> <p><strong></strong></p> <blockquote></blockquote> </article> <footer></footer>
Умножение: *
Умножение — одна из очень полезных функций в Emmet. С помощью оператора * вы можете определить, сколько раз элемент должен быть выведен. Это может быть очень полезно для создания навигационных меню с несколькими элементами списка.
nav>ul>li*5>a
сгенерирует неупорядоченный список с пятью элементами списка. Я также использовал тег, чтобы сделать элементы списка кликабельными ссылками. Вы можете заменить 5 на желаемый номер.
<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>
Нумерация предметов: $
Мы можем использовать оператор умножения * для повторения элементов, но с помощью $ мы можем их нумеровать. Используйте оператор $ внутри имени элемента, имени атрибута или значения атрибута, чтобы вывести текущий номер повторяемого элемента. Может использоваться для создания списков с нумерацией. Давайте посмотрим несколько примеров того, как работает оператор $ .
Пример 1: Нумерация предметов
ul>li.item$*5
следующая разметка.
<ul> <li class="item1"></li> <li class="item2"></li> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> </ul>
Чтобы добавить 0 (ноль) перед числами, используйте несколько знаков $ . li.item$$ сгенерирует <li class="item01"></li> а li.item$$$ сгенерирует <li class="item001"></li> .
Пример 2: добавление нуля перед числами
ul>li.item$$*5>a
выходит из следующего кода. Вы можете увидеть 0 перед цифрами.
<ul> <li class="item01"><a href=""></a></li> <li class="item02"><a href=""></a></li> <li class="item03"><a href=""></a></li> <li class="item04"><a href=""></a></li> <li class="item05"><a href=""></a></li> </ul>
Пример 3: изменение направления
Также возможно изменить направление нумерации. Эммет использует модификатор @- , чтобы изменить направление.
ul>li.item$$@-*5>a
выведет следующую HTML-разметку, неупорядоченный список с убывающими номерами.
<ul> <li class="item05"><a href=""></a></li> <li class="item04"><a href=""></a></li> <li class="item03"><a href=""></a></li> <li class="item02"><a href=""></a></li> <li class="item01"><a href=""></a></li> </ul>
Изменение базы нумерации: Стартовый номер
Чтобы изменить базовое значение счетчика, добавьте модификатор @N в $ . С этим модификатором вы можете установить желаемый стартовый номер.
ul>li.item$@3*5
расширяется до следующей разметки.
<ul> <li class="item3"></li> <li class="item4"></li> <li class="item5"></li> <li class="item6"></li> <li class="item7"></li> </ul>
Можно использовать как base @N и direction @- модификатор вместе. Вот пример.
ul>li.item$@-3*5>a
превратится в следующую разметку.
<ul> <li class="item7"><a href=""></a></li> <li class="item6"><a href=""></a></li> <li class="item5"><a href=""></a></li> <li class="item4"><a href=""></a></li> <li class="item3"><a href=""></a></li> </ul>
Группировка: ()
С Emmet также легко группировать элементы. Вы можете использовать () для группировки элементов или разделов. С группами вы можете буквально написать полную разметку страницы с одной аббревиатурой.
Давайте создадим разметку для нашей страницы с .main , .main и footer .
(header>nav>ul>li*3>a)+(.main>article.primary>h1+p^aside#sidebar)+footer>p{© 2013}
сгенерирует следующую разметку для нашей страницы.
<header> <nav> <ul> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></a></li> </ul> </nav> </header> <div class="main"> <article class="primary"> <h1></h1> <p></p> </article> <aside id="sidebar"></aside> </div> <footer> <p>© 2013</p> </footer>
Пользовательские атрибуты в квадратных скобках: []
Emmet может использовать нотацию [attr] (как в CSS) для добавления пользовательских атрибутов к вашим элементам, например, для ссылки. Полезно добавлять значения по умолчанию для элементов. Вы можете разместить столько атрибутов, сколько захотите, в квадратных скобках [ ] . Если вы не укажете значения атрибутов, Emmet будет создавать табуляцию внутри каждого пустого атрибута (если ваш редактор их поддерживает).
Атрибут без значений
Пример 1: нет значения
a[title]
сгенерирует следующую разметку без какого-либо значения.
<a href="" title=""></a>
Пример 2: со значениями по умолчанию
td[title="Hello world!" colspan=3]
сгенерирует следующую разметку.
<td title="Hello world!" colspan="3"></td>
Пример 3: Атрибут со значениями (несколько или один)
a[href="http://sitepoint.com" title="Learn HTML, CSS and more" target="_blank"]
создаст ссылку со значениями по умолчанию.
<a href="http://sitepoint.com" title="Learn HTML, CSS and more" target="_blank"></a>
Текст: {}
Добавить текст по умолчанию к элементам просто, вы можете использовать фигурные скобки {} с любым элементом a , p , h1 чтобы добавить пользовательский текст.
SimpelExample:
a{click here}
будет выводить
<a href="">click here</a>
Более сложный пример:
Вот еще один сложный пример. Если вы печатаете
p>{Click }+a{here}+{ to continue}
и нажмите Tab или Ctr + E, чтобы развернуть его, у вас будет следующая разметка.
<p>Click <a href="">here</a> to continue</p>
Пустой текст с Lorem Ipsum
Веб-разработчики часто используют текст lorem ipsum, чтобы добавить фиктивные данные на свои веб-страницы и проверить, как их HTML-шаблоны будут выглядеть с реальными данными. Существуют сторонние веб-сайты для создания фиктивного текста lorem ipsum, например http://www.lipsum.com/ и http://loremipsum.net/ , но с помощью Emmet вы можете генерировать текст lorem ipsum на лету.
Обычно lorem ipsum генерирует фиктивный текст из 30 слов, разбитый на несколько предложений, но с помощью Emmet вы можете указать количество слов, которые должны быть сгенерированы прямо в сокращении.
Пример 1: два абзаца с lorem ipsum по умолчанию
p*2>lorem
сгенерирует два абзаца с фиктивным контентом.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat, eaque, molestiae saepe aut autem in earum magnam harum enim obcaecati eum pariatur sit suscipit nisi repellat quia a ipsum reiciendis!</p > <p>Ipsum, laudantium, quia suscipit qui officia autem dicta alias explicabo illo quis voluptas corporis eveniet laborum ducimus possimus quas debitis sunt quibusdam libero deserunt. Odit nemo beatae officiis perspiciatis delectus.</p>
Пример 2: указание количества слов
Просто добавьте число после «Lorem». p>lorem10 сгенерирует 10 слов, а p>lorem50 сгенерирует абзацы с 50 словами.
p>lorem10
сгенерирует абзац с 10 словами.
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur, asperiores.</p>
Пример 3: список предметов с lorem ipsum
Эта аббревиатура создаст неупорядоченный список с четырьмя элементами с фиктивным текстом и классом item .
ul.generic-list>lorem8.item*4
Вот вывод.
<ul class="generic-list"> <li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li> <li class="item">Quis, dolorum blanditiis reiciendis eius facere nulla porro.</li> <li class="item">Repellat, animi, nisi quibusdam esse distinctio nostrum blanditiis!</li> <li class="item">Neque, eius temporibus itaque nostrum tempore expedita ad?</li> </ul>
Сокращения CSS
У Emmet есть специальный распознаватель CSS, который расширяет такие сокращения до полного свойства CSS. Для синтаксиса CSS у Emmet есть много предопределенных фрагментов для свойств. Как и HTML, вы можете расширить аббревиатуры до полных свойств CSS.
Вот несколько примеров.
Пример 1: предопределенное сокращение
ff
и нажмите вкладку. ты получишь
font-family: ;
Пример 2: Сокращение со значением
ff:a
выведет следующий код CSS.
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
Пример 3: Предопределенное сокращение
mr
выведет следующий код CSS.
margin-right: ;
Пример 4. Добавление значения по умолчанию
mr10
выведет следующий код CSS.
margin-right: 10px;
Пример 5. Несколько значений Чтобы добавить несколько значений, используйте разделитель для их разделения:
m10-20
выведет следующий код CSS.
margin: 10px 20px;
Пример 6. Добавление отрицательного значения предшествует первому значению с дефисом, а все остальные двойным дефисом
p-10--20
выведет следующий код CSS.
padding: -10px -20px;
Поставщик префиксов
В настоящее время префиксы поставщиков распространены для использования свойств CSS3. Emmet упрощает использование префиксов поставщиков. Более того, в редакторах с поддержкой табуляции (таких как Eclipse, Sublime Text 2, Espresso и т. Д.) Emmet создаст заполнитель связанного значения, чтобы вы могли ввести значение свойства, и оно будет автоматически помещено во все сгенерированные свойства.
Пример 1: Размер коробки
bx
выведет следующий код CSS.
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
Пример 2: радиус границы
-bdrs
выведет следующий код CSS.
-webkit-border-radius: ; -moz-border-radius: ; border-radius: ;
Пример 3: радиус границы
-trf
выведет следующий код CSS.
-webkit-transform: ; -moz-transform: ; -ms-transform: ; -o-transform: ; transform: ;
Явный поставщик с префиксом
Если вам нужно вывести свойства CSS только с указанными префиксными свойствами поставщика, вы можете сделать это с помощью Emmet. Допустим, вам нужно вывести свойство transform только с префиксами webkit и moz. В этом случае вы можете расширить следующую аббревиатуру:
Пример: пограничный радиус
-wm-trf
выведет следующий код CSS.
-webkit-transform: ; -moz-transform: ; transform: ;
CSS3 Gradients — это сложная для написания функция CSS3, я не могу написать ее сам. Я использую инструменты генератора онлайн CSS3 для свойств CSS3. Emmet упрощает написание CSS3-градиентов. Вот что вам нужно набрать и результат вы получите.
Пример:
div{ lg(left, #fc0 30%, orange) }
выведет следующий код CSS.
div{ background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.3, #fc0), to(orange)); background-image: -webkit-linear-gradient(left, #fc0 30%, orange); background-image: -moz-linear-gradient(left, #fc0 30%, orange); background-image: -o-linear-gradient(left, #fc0 30%, orange); background-image: linear-gradient(left, #fc0 30%, orange); }
Вы можете видеть, что я только что использовал lg для градиента лайнера и добавленных значений. Эммет превратил мое сокращение в полный код CSS3.
В четвертой и последней части этой серии мы рассмотрим, как Emmet обрабатывает существующую разметку и код.