6 страхотни съвета на Emmet CSS за спестяване на време
Emmet е един от най-полезните плъгини за текстови редактори, които някога ще срещнете за разработчици. Той има привидно вълшебната способност да превърне една мъничка работа в тон код, което може да ви спести невероятно количество време и усилия в дългосрочен план.
По-рано разгледахме някои от най-добрите функции на Emmet от HTML гледна точка, днес ще го последваме с някои съвети за това как Emmet може да подобри вашия CSS работен процес.
1. Интуитивни съкращения
Работата с Emmet в HTML е доста проста. След като научите няколко ключови понятия, можете доста да стартирате с него сами. С CSS обаче има буквално стотици фрагменти за запаметяване. Чудесно е да разполагате с толкова много функционалност, но как е възможно да вземете всичко това?
Добрата новина е, че Емет използва съкращения, които са напълно интуитивни. Всъщност в повечето случаи първото съкращение, което мислите да опитате, се оказва правилно. Ето два примера:
![](http://computer06.com/img/css/180/6-awesome-emmet-css-time-saving-tips.jpg)
Както можете да видите, подравняването на текста се съкращава до ta, а ширината на границата е съкратена до bdw . Много съкращения дори се задействат от един знак. Например, z се разширява до z-индекс .
2. Добавете стойности
Можете да направите много повече с Emmet, отколкото да разширите съкращенията в свойства. Например, можете лесно да хвърлите стойност в абревиатурата си, използвайки синтаксиса на двоеточие.
![](http://computer06.com/img/css/180/6-awesome-emmet-css-time-saving-tips-2.jpg)
Ето : 10 разширени до 10px и разширени до auto . Можете също така да посочите вашите единици с този метод, като просто ги хвърлите в края. Обърнете внимание, че p е приятен пряк път за%.
![](http://computer06.com/img/css/180/6-awesome-emmet-css-time-saving-tips-3.jpg)
3. Размито търсене
Най-добрата характеристика на Emmet от гледна точка на CSS се нарича „размито търсене“. Това означава, че всъщност не е нужно да знаете правилното съкращение, за да стигнете до разширението, което търсите. Можете буквално да си направите глупости и в повечето случаи Емет е достатъчно умен, за да разбере какво е това, което се опитвате да постигнете.
![](http://computer06.com/img/css/180/6-awesome-emmet-css-time-saving-tips-4.jpg)
Размитото търсене значително увеличава полезността на Emmet за писане на CSS. Тя ви позволява да изкопаете стандартния синтаксис в полза на всичко, което ви харесва най-добре. Например, рядко използвам двоеточие, за да добавя стойност и вместо това въвеждам нещо като m10, което се разширява в марж: 10px .
![](http://computer06.com/img/css/180/6-awesome-emmet-css-time-saving-tips-5.jpg)
4. Използвайте + за екстри
С HTML символът „+“ се използва за връзки на братя, но в CSS виждаме, че се използва по различен начин. Тук добавяме +, за да посочим, че искаме Emmet да включва всички допълнителни опции, включени в абревиатурата. Това виждаме много, когато има стенограмна версия на даден набор от свойства.
![](http://computer06.com/img/css/180/6-awesome-emmet-css-time-saving-tips-6.jpg)
Тук можете да видите, че ако просто разширим f, получаваме размер на шрифта без допълнителни функции. Когато обаче хвърлим „+“, получаваме шаблон за стенограмата на шрифта. По-нататък виждаме същата идея в действие с граничната стена.
![](http://computer06.com/img/css/180/6-awesome-emmet-css-time-saving-tips-7.jpg)
Можете да използвате символа плюс с фонови изображения, @ шрифт, лице, очертания на текст, сянка на текст и други.
5. Префикси на доставчика
Мразя да въвеждаш всички тези досадни префикси на доставчика? Аз също. За щастие, Емет ви покри. Въведете CSS свойство с тире преди него и той автоматично ще бъде разширен, за да включва всички съответни префикси.
![](http://computer06.com/img/css/180/6-awesome-emmet-css-time-saving-tips-8.jpg)
Можете да извършите това действие върху почти всичко, което искате. Например, ако напишете „-designshack“, той ще бъде разширен до -webkit-designshack, -moz-designshack и т.н.
6. Градиенти
Градиентният синтаксис е гадно, всички го знаем. Тя се е променила и еволюирала твърде много пъти, за да се брои, преминала е през всяка възможна комбинация от прекалено сложни и прости и не само трябва да отчитате всички префикси, но и поне две различни итерации на версията -webkit.
За пореден път Емет се спуска, за да спаси деня. Можете да си спестите много от въвеждането, като използвате уникалния синтаксис за градиент на стенограмата на Emmet, който ще се разшири в огромния къс код, от който се нуждаете. Можете да прочетете повече за това и да го изпробвате тук.
![](http://computer06.com/img/css/180/6-awesome-emmet-css-time-saving-tips-9.jpg)
Опитайте ги!
Сега, когато знаете куп страхотни трикове с CSS, които да изпробвате с Emmet, е време да ги пробвате. Натиснете нашата демо страница на Emmet и изпробвайте няколко от съкращенията, които разгледахме по-горе. Също така не забравяйте да посетите началната страница на Emmet, където можете да научите повече и да я опитате веднага.
Как да разширя съкращенията?
Разширението може да бъде различно във всеки редактор и обикновено изисква плъгин. В Sublime Text 2 отворете Package Manager, потърсете Emmet, инсталирайте го и рестартирайте приложението. За да задействате разширение, просто натиснете раздела, след като въведете съкращение.
Споделете любимия си макет на CSS Emmet
Това е моят личен списък с любими функции на Emmet CSS, сега е време да скочите в разговора и да споделите своето. Оставете коментар по-долу и избройте CSS функциите, които най-много се обръщате в Emmet.