Emmet

Emmet -zestaw narzędzi do skrótowego pisania kodu HTML i CSS – wpisujemy skrót i wciskamy TAB

 

główna strona Emmet

 

funkcjonalności

  • Expand Abbreviation – pisanie kodu HTML na wzór selektorów CSS oraz użycie skrótów

 

ul#menu>li.item-$*5>a[href=#]{Menu link $}

otrzymujemy:


<ul id="menu">
  
<li class="item-1"><a href="#">Menu link 1</a></li>

  
<li class="item-2"><a href="#">Menu link 2</a></li>

  
<li class="item-3"><a href="#">Menu link 3</a></li>

  
<li class="item-4"><a href="#">Menu link 4</a></li>

  
<li class="item-5"><a href="#">Menu link 5</a></li>

</ul>

—

w css dajemy: lg(top, red, blue)

otrzymujemy:


background-image: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
background-image: -webkit-linear-gradient(red, blue);
background-image: -moz-linear-gradient(red, blue);
background-image: -o-linear-gradient(red, blue);
background-image: linear-gradient(red, blue);

—

 

HTML

stworzenie szkieletu dokumentu HTML

!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

dodanie kilku class

div.bgText.bgText1>p{photo}

<div class="bgText bgText1">photo</div>

 

br tag:


p{Lorem ipsum dolor sit amet}>br+{consectetur adipiscing elit, sed do eiusmod tempor}>br+{incididunt ut labore}>br+{Tlf: 35364913}>br+{Ut enim ad minim veniam}>br+{quis nostrud}

—

Lorem ipsum generator

wpisując p>lorem80, otrzymujemy:



Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit iure error, debitis quibusdam. Iste, quos, pariatur. Commodi, nesciunt amet rerum modi, eius saepe doloremque maxime rem. Itaque magni vel, quidem pariatur deleniti vero. Veniam, aliquam nostrum quae eaque sed aliquid omnis, repudiandae quasi error non eius debitis voluptatum corporis distinctio iste. Iure eos autem quae molestias accusantium, ratione incidunt aliquid nemo? Quisquam, autem, reprehenderit. Asperiores, impedit rerum reiciendis saepe veritatis harum, aperiam, maxime enim, odio ducimus adipisci iure. Inventore, tempora!

podając ul.generic-list>lorem10.item*4, otrzymujemy:




<ul class="generic-list">



<li class="item">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime, nesciunt?</li>






<li class="item">Iure, similique sequi odit. Perferendis nam, autem porro repudiandae sint.</li>






<li class="item">Quae quas nihil tempore cupiditate commodi temporibus dolores suscipit accusantium.</li>






<li class="item">Commodi eligendi odit dicta velit dolorem iure quisquam ullam delectus!</li>



</ul>

—

 

korzystanie z Emmet ułatwia fuzzy search – przeszukanie dostępnych definicji względem podanego zapytania nawet jeśli skrót nie jest poprawny.

wywołania:

  • ov:h – właściwy skrót
  • ov-h
  • ovh
  • oh
  • ch
  • o:h

dają efekt: overflow: hidden;

wywołania:

  • m:10
  • mg10
  • m10

daje efekt: margin: 10px;

 

Skróty

# – nadanie id elementowi

. – nadanie klasy elementowi

> – element potomny

$*6 – zmienna odliczana od 1 do 6

$ – wstawiona zmienna licznika

* – mnożnik, ile razy zostanie wstawiony dany element – p*3

[] –  wprowadzone atrybuty znacznika, jeden po drugim rozdzielone spacją, automatyczne dodanie obowiązkowych atrybutów – img.myClass[width=100px height=100px src=img/pic alt=myPic]

{} – wprowadzanie tekstu do znacznika

+ – dodaje kolejne elementy na tym samym poziomie zagnieżdżenia, rodzeństwo, podane w () – (header>h2)+(article>p*3)

^ – powrót do rodzica i wstawienie za nim kolejnego elementu – header>h1#main^footer>p{All rights reserved.}

 

CSS

type ->  get

  • ta -> text-align: |;
  • bdw -> border-width: |;
  • m10 -> margin: 10px;
  • p:a – > padding: auto;
  • fz:10em – > font-size: 10em;
  • w:10p -> width: 10%;
  • bd -> border: |;
  • ta:c -> text-align: center;
  • bra: -> box-shadow: inset h v blur spread rgba(0, 0, 0, .5);
  • bdrs:40 ->  border-radius: 40px;

 

Skróty w CSS

+ – dodaje wszystkie dodatkowe wartości

f -> font: |;

f+ -> font: 1em Arial,sans-serif;

bd+ -> border: 1px solid #000;

 

– dla uzyskania prefiksów dla przeglądarek

-transition ->

-webkit-transition: |;
-o-transition: |;
transition: |;

 

  • p → %
  • e → em
  • x → ex
  • m10p30e5x → margin: 10% 30em 5ex
  • #1 → #111111
  • #e0 → #e0e0e0
  • #fc0 → #ffcc00
  • p!+m10e!

padding:  !important;
margin: 10em !important;

 

Gradient

lg(left, #fff 10%, #000)

background-image: -webkit-linear-gradient(left, #fff 10%, #000);
background-image: -o-linear-gradient(left, #fff 10%, #000);
background-image: linear-gradient(to right, #fff 10%, #000);

 

Akcje Emmet

poruszanie pomiędzy punktami edycji – http://docs.emmet.io/actions/go-to-edit-point/

wzbogacanie znacznika img o atrybuty width, height – http://docs.emmet.io/actions/update-image-size/

http://docs.emmet.io/actions/

http://docs.emmet.io/#referrer=blog.kamilbrenk.pl

http://docs.emmet.io/cheat-sheet/#referrer=blog.kamilbrenk.pl

http://docs.emmet.io/cheat-sheet/

http://eduweb.pl/live/emmet—pisz-kod-html-i-css-z-predkoscia-swiatla

 

  • możliwość poruszania się w kodzie po drzewie DOM,
    możliwość przeskakiwania kursorem do pól, które możemy uzupełniać,
    zakomentowywanie wybranych fragmentów kodu,
    usuwanie elementów (bez dzieci),
    pobieranie wymiarów obrazka do elementu IMG (czy background-image dla CSS),
    kodowanie i dekodowanie statycznych obrazów do wersji inline (data:image/type;base64,XYZ).

https://designshack.net/articles/css/7-awesome-emmet-html-time-saving-tips/

http://www.hongkiat.com/blog/html-css-faster-emmet/

http://peiwen.lu/Emmet-Css-Snippets-for-Sublime-Text-2/

 

trochę przykładów:


(.ws_filtr__option>input#ws_checkbox-5$[type=checkbox name=group5]+label[for=ws_checkbox-5$]>span.ws_checkbox{text})*4

#web development