Всем привет друзья! Сегодня вы научитесь использовать 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 |
Теги
Для того чтобы создать html тег, вам также необходимо написать его краткое сокращение и нажать tab
Ниже представлены наиболее распространенные теги
a |
|
a:link |
|
a:mail |
|
base |
|
br |
|
link |
|
link:css |
|
link:favicon |
|
link:rss |
|
link:atom |
|
meta:utf |
|
meta:vp |
|
meta:compat |
|
script:src |
|
img |
|
ifr |
|
emb |
|
obj |
|
map |
|
map+ |
|
area |
|
form |
|
form:geform:post |
|
label |
|
input |
|
inp |
|
input:h |
|
input:p |
|
input:c |
|
input:r |
|
input:f |
|
input:s |
|
input:i |
|
input:b |
|
input:reset |
|
select |
|
select+ |
|
opt |
|
tarea |
|
video |
|
audio |
|
bq |
|
fst |
|
btn |
|
btn:s |
|
btn:b |
|
btn:r |
|
sect |
|
art |
|
hdr |
|
ftr |
|
str |
|
ol+ |
|
ul+ |
|
dl+ |
|
table+ |
|
tr+ |
|
c |
|
cc:ie6 |
|
cc:ie |
|
cc:noie |
|
Любой тег |
|
Классы 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 |
|
posa |
|
posr |
|
posf |
|
t |
|
t:a |
|
r |
|
r:a |
|
b |
|
b:a |
|
l |
|
l:a |
|
z |
|
za |
|
fl |
|
fln |
|
fr |
|
cl |
|
d |
|
dn |
|
di |
|
dib |
|
dt |
|
dtc |
|
dtr |
|
v |
|
vv |
|
oh |
|
ovv |
|
os |
|
oa |
|
zm |
|
cu |
|
cup |
|
cud |
|
cuh |
|
cuhe |
|
cum |
|
cut |
|
m |
|
m:a |
|
mt |
|
mta |
|
mr |
|
mra |
|
mb |
|
mba |
|
ml |
|
mla |
|
p |
|
pt |
|
pr |
|
pb |
|
pl |
|
bsh |
|
bshn |
|
w |
|
wa |
|
h |
|
ha |
|
maw |
|
mah |
|
mw |
|
mh |
|
f |
|
f+ |
|
fw |
|
fwn |
|
fwb |
|
fs |
|
fsn |
|
fsi |
|
fz |
|
ff |
|
ffs |
|
ffss |
|
ffm |
|
ffa |
|
va |
|
vm |
|
vabl |
|
vb |
|
vs |
|
ta |
|
tac |
|
tar |
|
taj |
|
td |
|
tdu |
|
tdo |
|
tdl |
|
tt |
|
ttn |
|
ttl |
|
ts |
|
tra |
|
ts+ |
|
tsn |
|
lh |
|
lts |
|
ws |
|
wsn |
|
wsnw |
|
bg |
|
bg+ |
|
bn |
|
bgc |
|
bgt |
|
bgi |
|
bgin |
|
bgr |
|
bgrn |
|
bgrx |
|
bgry |
|
bga |
|
baf |
|
bas |
|
bgp |
|
bgs |
|
bsa |
|
c |
|
cra |
|
op |
|
ct |
|
q |
|
ol |
|
on |
|
tbl |
|
cs |
|
ec |
|
bd |
|
bd+ |
|
bdn |
|
bdc |
|
bdi |
|
bdin |
|
bf |
|
bdle |
|
bsp |
|
bds |
|
bw |
|
bt |
|
bt+ |
|
bdtn |
|
br |
|
br+ |
|
bdrn |
|
bb |
|
bb+ |
|
bdbn |
|
bl |
|
bl+ |
|
bdln |
|
bdrs |
|
btrr |
|
bdtrs |
|
bbrr |
|
bblr |
|
lis |
|
lisn |
|
lst |
|
lstn |
|
lstd |
|
lstc |
|
lsts |
|
lstdc |
|
lsi |
|
lsin |
|
! |
|
@f |
|
@f+ |
|
@i |
|
@m |
|
anim |
|
ap |
|
bgie |
|
cm |
|
colm |
|
trf |
|
trfr |
|
trfsc |
|
trft |
|
tfo |
|
trs |
|
trsde |
|
trsdu |
|
trsp |
|
us |
|
Добавление значения
Для добавления значния необходимо добавить его к аббревиатуре 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: ;
Ну вот друзья, надеюсь я вам принес непоправимую Пользу. Увидемся в других статьях.