Сокращения и команды 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

Теги

Для того чтобы создать html тег, вам также необходимо написать его краткое сокращение и нажать tab

Ниже представлены наиболее распространенные теги

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:get
form: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: ;




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