Сокращения и команды Emmet

Всем привет друзья! Сегодня вы научитесь использовать emmet и начнете кодить со скоростью света.

Для чего нужны сокращения?

В основном, большинство текстовых редакторов позволяют сохранять и повторно использовать куски кода, под названием “фрагменты”, но чтобы использовать фрагменты их необходимо заранее определить, это не всегда удобно. Так вот, команды Emmet - готовые сокращения для вывода определенных кусочков кода.

Как пользоваться?

В популярных редакторах кода - Sublime Text 3, Atom и Visual Studio Code, Brackets после установки emmet как плагина сразу появляется возможность использовать сокращения.

Обычно, чтобы протестировать работают ли сокращения, я открываю пустой html файл и пишу !. Чтобы сокращение превратилось в полноценный кусок кода необходимо нажать tab.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>

</body>
</html>

Если восклицательный знак превратился в подобный код, значит emmet отлично работает. Поехали дальше

HTML аббревиатуры

Инициализаторы

! - это аббревиатура для создания в новом HTML документе стартовой разметки, вы можете использовать и другие варианты этого сокращения.

html:5 или !	HTML5 doctype
html:xt	XHTML transitional doctype
html:4s	HTML4 strict doctype

a	`<a href=""></a>`
a:link	`<a href="http://"></a>`
a:mail	`<a href="mailto:"></a>`
base	`<base href="">`
br	`<br>`
link	`<link rel="stylesheet" href="">`
link:css	`<link rel="stylesheet" href="style.css">`
link:favicon	`<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">`
link:rss	`<link rel="alternate" type="application/rss+xml" title="RSS" href="rss.xml">`
link:atom	`<link rel="alternate" type="application/atom+xml" title="Atom" href="atom.xml">`
meta:utf	`<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">`
meta:vp	`<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">`
meta:compat	`<meta http-equiv="X-UA-Compatible" content="IE=7">`
script:src	`<script src=""></script>`
img	`<img src="" alt="">`
ifr	`<iframe src="" frameborder="0"></iframe>`
emb	`<embed src="" type="">`
obj	`<object data="" type=""></object>`
map	`<map name=""></map>`
map+	`<map name=""> <area shape="" coords="" href="" alt=""> </map>`
area	`<area shape="" coords="" href="" alt="">`
form	`<form action=""></form>`
form:geform:post	`<form action="" method="get"></form> <form action="" method="post"></form>`
label	`<label for=""></label>`
input	`<input type="text">`
inp	`<input type="text" name="" id="">`
input:h	`<input type="hidden" name="">`
input:p	`<input type="password" name="" id="">`
input:c	`<input type="checkbox" name="" id="">`
input:r	`<input type="radio" name="" id="">`
input:f	`<input type="file" name="" id="">`
input:s	`<input type="submit" value="">`
input:i	`<input type="image" src="" alt="">`
input:b	`<input type="button" value="">`
input:reset	`<input type="reset" value="">`
select	`<select name="" id=""></select>`
select+	`<select name="" id=""> <option value=""></option> </select>`
opt	`<option value=""></option>`
tarea	`<textarea name="" id="" cols="30" rows="10"> </textarea>`
video	`<video src=""></video>`
audio	`<audio src=""></audio>`
bq	`<blockquote></blockquote>`
fst	`<fieldset></fieldset>`
btn	`<button></button>`
btn:s	`<button type="submit"></button>`
btn:b	`<button type="button"></button>`
btn:r	`<button type="reset"></button>`
sect	`<section></section>`
art	`<article></article>`
hdr	`<header></header>`
ftr	`<footer></footer>`
str	`<strong></strong>`
ol+	`<ol> <li></li> </ol>`
ul+	`<ul> <li></li> </ul>`
dl+	`<dl> <dt></dt> <dd></dd> </dl>`
table+	`<table> <tr> <td></td> </tr> </table>`
tr+	`<tr> <td></td> </tr>`
c	`<!-- Комментарий -->`
cc:ie6	`<!--[if lte IE 6]> <![endif]-->`
cc:ie	`<!--[if IE]> <![endif]-->`
cc:noie	`<!--[if !IE]><!--> <!--<![endif]-->`
Любой тег	`div <div></div> span <span></span> Любой другой тег <tagname></tagname>`

Классы ID и атрибуты

Классы

Чтобы добавить к создаваемому тегу класс необходимо прописать его в таком виде: тег.класс

h1.title даст такой результат

<h1 class="title"></h1>

ID

Для добавления ID к элементу используем такую запись: тег#ID

h1#title даст такой результат

<h1 id="title"></h1>

Атрибуты

Чтобы добавить к элементу атрибут нербходимо использовать такой вид записи: тег[атрибут='значение'].

h1[name='title'] даст такой результат

<h1 name="title"></h1>


значение можно не указывать
h1[active] выдаст

<h1 active=""></h1>

Вложенность элементов

Используя селекторы > и + можно создать соответственно, дочерние и соседние элементы, а с помощью селектора ^ можно поднять элемент на уровень выше в иерархии элементов.

p>span
<p><span></span></p>

p+span
<p></p>
<span></span>

p>span^p
<p><span></span></p>
<p></p>

Группировка

Для того чтобы работать с сокращениями эффективно, нужно использовать группировку операторов - работает как в математике)

(h2>span)+(p>span)

<h2><span></span></h2>
<p><span></span></p>

Добавление контента

В ходе написания цепочки сокращений вам может понадобится сразу добавить текст в элемент, сделать это вы можете используя фигурные скобки {}

p{Это мой текст}
<p>Это мой текст</p>


h1.title{Заголовок}+(div>p>span{Текст})
<h1 class="title">Заголовок</h1>
<div>
<p><span>Текст</span></p>
</div>

Умножение

Вы можете определить сколько элементов должно выть выведено с помощью оператора умножения *

ul>li*3

<ul>
<li></li>
<li></li>
<li></li>
</ul>

Нумерация

Мы можем сделать изменение названия класса, ID или атрибута с каждым следующим повторением, для этого нужно всего лишь добавить к ним знак доллара $

ul>li.item$*10

<ul>
<li class="item1"></li>
<li class="item2"></li>
<li class="item3"></li>
<li class="item4"></li>
<li class="item5"></li>
<li class="item6"></li>
<li class="item7"></li>
<li class="item8"></li>
<li class="item9"></li>
<li class="item10"></li>
</ul>

CSS аббревиатуры

Основа работает так-же как и с HTML - пишем сокращение и жмем TAB, но есть некоторые различия, например добавление значение производиться по другому, конструктор вложенности не поддерживается и тд. Их мы рассмотрим после тегов.

pos	`position: relative;`
posa	`position: absolute;`
posr	`position: relative;`
posf	`position: fixed;`
t	`top: ;`
t:a	`top: auto;`
r	`right: ;`
r:a	`right: auto;`
b	`bottom: ;`
b:a	`bottom: auto;`
l	`left: ;`
l:a	`left: auto;`
z	`z-index: ;`
za	`z-index: auto;`
fl	`float: left;`
fln	`float: none;`
fr	`float: right;`
cl	`clear: both;`
d	`display: block;`
dn	`display: none;`
di	`display: inline;`
dib	`display: inline-block;`
dt	`display: table;`
dtc	`display: table-cell;`
dtr	`display: table-row;`
v	`visibility: hidden;`
vv	`visibility: visible;`
oh	`overflow: hidden;`
ovv	`overflow: visible;`
os	`overflow: scroll;`
oa	`overflow: auto;`
zm	`zoom: 1;`
cu	`cursor: ;`
cup	`cursor: pointer;`
cud	`cursor: default;`
cuh	`cursor: hand;`
cuhe	`cursor: help;`
cum	`cursor: move;`
cut	`cursor: text;`
m	`margin: ;`
m:a	`margin: auto;`
mt	`margin-top: ;`
mta	`margin-top: auto;`
mr	`margin-right: ;`
mra	`margin-right: auto;`
mb	`margin-bottom: ;`
mba	`margin-bottom: auto;`
ml	`margin-left: ;`
mla	`margin-left: auto;`
p	`padding: ;`
pt	`padding-top: ;`
pr	`padding-right: ;`
pb	`padding-bottom: ;`
pl	`padding-left: ;`
bsh	`-webkit-box-shadow: inset hoff voff blur color; -moz-box-shadow: inset hoff voff blur color; box-shadow: inset hoff voff blur color;`
bshn	`-webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none;`
w	`width: ;`
wa	`width: auto;`
h	`height: ;`
ha	`height: auto;`
maw	`max-width: ;`
mah	`max-height: ;`
mw	`min-width: ;`
mh	`min-height: ;`
f	`font: ;`
f+	`font: 1em Arial,sans-serif;`
fw	`font-weight: ;`
fwn	`font-weight: normal;`
fwb	`font-weight: bold;`
fs	`font-style: italic;`
fsn	`font-style: normal;`
fsi	`font-style: italic;`
fz	`font-size: ;`
ff	`font-family: ;`
ffs	`font-family: serif;`
ffss	`font-family: sans-serif;`
ffm	`font-family: monospace;`
ffa	`font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;`
va	`vertical-align: top;`
vm	`vertical-align: middle;`
vabl	`vertical-align: baseline;`
vb	`vertical-align: bottom;`
vs	`vertical-align: sub;`
ta	`text-align: left;`
tac	`text-align: center;`
tar	`text-align: right;`
taj	`text-align: justify;`
td	`text-decoration: none;`
tdu	`text-decoration: underline;`
tdo	`text-decoration: overline;`
tdl	`text-decoration: line-through;`
tt	`text-transform: uppercase;`
ttn	`text-transform: none;`
ttl	`text-transform: lowercase;`
ts	`text-shadow: hoff voff blur #000;`
tra	`text-shadow: h v blur rgba(0, 0, 0, .5);`
ts+	`text-shadow: 0 0 0 #000;`
tsn	`text-shadow: none;`
lh	`line-height: ;`
lts	`letter-spacing: ;`
ws	`white-space: ;`
wsn	`white-space: normal;`
wsnw	`white-space: nowrap;`
bg	`background: #000;`
bg+	`background: #fff url() 0 0 no-repeat;`
bn	`background: none;`
bgc	`background-color: #fff;`
bgt	`background-color: transparent;`
bgi	`background-image: url();`
bgin	`background-image: none;`
bgr	`background-repeat: ;`
bgrn	`background-repeat: no-repeat;`
bgrx	`background-repeat: repeat-x;`
bgry	`background-repeat: repeat-y;`
bga	`background-attachment: ;`
baf	`background-attachment: fixed;`
bas	`background-attachment: scroll;`
bgp	`background-position: 0 0;`
bgs	`-webkit-background-size: ; background-size: ;`
bsa	`-webkit-background-size: auto; background-size: auto;`
c	`color: #000;`
cra	`color: rgba(0, 0, 0, .5);`
op	`opacity: ;`
ct	`content: '';`
q	`quotes: ;`
ol	`outline: ;`
on	`outline: none;`
tbl	`table-layout: ;`
cs	`caption-side: ;`
ec	`empty-cells: ;`
bd	`border: ;`
bd+	`border: 1px solid #000;`
bdn	`border: none;`
bdc	`border-color: #000;`
bdi	`-webkit-border-image: url(); -moz-border-image: url(); -o-border-image: url(); border-image: url();`
bdin	`-webkit-border-image: none; -moz-border-image: none; -o-border-image: none; border-image: none;`
bf	`-webkit-border-fit: repeat; border-fit: repeat;`
bdle	`border-length: ;`
bsp	`border-spacing: ;`
bds	`border-style: ;`
bw	`border-width: ;`
bt	`border-top: ;`
bt+	`border-top: 1px solid #000;`
bdtn	`border-top: none;`
br	`border-right: ;`
br+	`border-right: 1px solid #000;`
bdrn	`border-right: none;`
bb	`border-bottom: ;`
bb+	`border-bottom: 1px solid #000;`
bdbn	`border-bottom: none;`
bl	`border-left: ;`
bl+	`border-left: 1px solid #000;`
bdln	`border-left: none;`
bdrs	`-webkit-border-radius: ; -moz-border-radius: ; border-radius: ;`
btrr	`border-top-right-radius: ;`
bdtrs	`border-top-left-radius: ;`
bbrr	`border-bottom-right-radius: ;`
bblr	`border-bottom-left-radius: ;`
lis	`list-style: ;`
lisn	`list-style: none;`
lst	`list-style-type: ;`
lstn	`list-style-type: none;`
lstd	`list-style-type: disc;`
lstc	`list-style-type: circle;`
lsts	`list-style-type: square;`
lstdc	`list-style-type: decimal;`
lsi	`list-style-image: ;`
lsin	`list-style-image: none;`
!	`!important`
@f	`@font-face { font-family:; src:url(); }`
@f+	`@font-face { font-family: 'FontName'; src: url('FileName.eot'); src: url('FileName.eot?#iefix') format('embedded-opentype'), url('FileName.woff') format('woff'), url('FileName.ttf') format('truetype'), url('FileName.svg#FontName') format('svg'); font-style: normal; font-weight: normal; }`
@i	`@import url();`
@m	`@media screen { }`
anim	`-webkit-animation: ; -o-animation: ; animation: ;`
ap	`-webkit-appearance: none; -moz-appearance: none; appearance: none;`
bgie	`filter:progid:DXImageTransform .Microsoft.AlphaImageLoader (src='x.png',sizingMethod='crop');`
cm	`/* Комментарий */`
colm	`columns: ;`
trf	`-webkit-transform: ; -moz-transform: ; -ms-transform: ; -o-transform: ; transform: ;`
trfr	`-webkit-transform: rotate(angle); -moz-transform: rotate(angle); -ms-transform: rotate(angle); -o-transform: rotate(angle); transform: rotate(angle);`
trfsc	`-webkit-transform: scale(x, y); -moz-transform: scale(x, y); -ms-transform: scale(x, y); -o-transform: scale(x, y); transform: scale(x, y);`
trft	`-webkit-transform: translate(x, y); -moz-transform: translate(x, y); -ms-transform: translate(x, y); -o-transform: translate(x, y); transform: translate(x, y);`
tfo	`-webkit-transform-origin: ; -moz-transform-origin: ; -ms-transform-origin: ; -o-transform-origin: ; transform-origin: ;`
trs	`-webkit-transition: prop time; -moz-transition: prop time; -ms-transition: prop time; -o-transition: prop time; transition: prop time;`
trsde	`-webkit-transition-delay: time; -moz-transition-delay: time; -ms-transition-delay: time; -o-transition-delay: time; transition-delay: time;`
trsdu	`-webkit-transition-duration: time; -moz-transition-duration: time; -ms-transition-duration: time; -o-transition-duration: time; transition-duration: time;`
trsp	`-webkit-transition-property: prop; -moz-transition-property: prop; -ms-transition-property: prop; -o-transition-property: prop; transition-property: prop;`
us	`-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;`

Добавление значения

Для добавления значния необходимо добавить его к аббревиатуре css свойства, по умолчанию добавление производится в стандартной для свойства величине.

lh1
line-height: 1;

p10
padding: 10px;

Вы также можете писать величину в которой измеряется значение, в таком случае стандартная величина подставляться не будет.

mt10em
margin-top: 10em;

bdrs50%
border-radius: 50%;

fz10rem
font-size: 10rem;

Сокращение величины значений

Да, круто, для величин тоже есть сокращения:

p → %
e → em
x → ex

Пример использования:

bdrs5p
border-radius: 5%;

fz16e
font-size: 16em;

Префиксы

И даже для префиксов придуманы свои, удобные команды

w → -webkit-
m → -moz-
s → -ms-
o → -o-

Пример:

-w-trf

-webkit-transform: ;
transform: ;

Их также можно группировать:

-wm-trf

-webkit-transform: ;
-moz-transform: ;
transform: ;

Ну вот друзья, надеюсь я вам принес непоправимую Пользу. Увидемся в других статьях.

Перейти на главную страницу