ترفند افزایش سرعت کدنویسی با استفاده از Emmet ها در HTMLCSS

Question

برای ادیتور ها کدهای مخففی قرار داده شده است که به کمک آن ها می توان سرعت کد نویسی را افزایش داد، این ادیتور ها شامل Atom, Eclipse, Emacs, Notepad++, Sublime, Vim, Visual Studio (VS) Code, and WebStorm. هستند.
به این قابلیت Emmet گفته می شود و بعد از نوشتن کدهای مخفف با زدن دکمه ی Tab یا Enter یا Space که در تنظیمات ادیتور قابل تنظیم است، شکل اصلی کد توسط مرورگر نوشته می شود.

برای مثال در html نوشتن اسم تگ باعث نوشتن ساختار تگ به صورت کامل میشود.
مثلا div عبارت زیر را تولید میکند:

< div> < /div>

عبارت a.link یک تگ a تعریف میکند و کلاس link را به آن اختصاص میدهد.

< a href="" class="link"> < /a>

div#hero یگ تگ div ایجاد میکند و id آن را برابر hero قرار می دهد.

< div id="hero"> < /div>

div#hero.footer :

< div id="hero" class="footer"> < /div>

با علامت [ ] میتوان برای تگ ها attribute تعریف کرد. img[src="cat.jpg"][alt="Cute cat pic"]

< img src="cat.jpg" alt="Cute cat pic">

علامت {} برای گذاشتن content داخل تگ است. مثلا text داخل تگ a داخل {} گذاشته می شود. a{click here}

< a href=""> click here< /a>

علامت <برای ایجاد فرزند برای تگ است. <em>div> a

< div> < a href=""> < /a> < /div>

علامت + برای قرار دادن تگ ها کنار هم هست. div+a

< div> < /div> < a href=""> < /a>

علامت ^ و * را با یک مثال توضیح میدهیم، فرض کنید داخل div سه تگ a داریم که خصوصیاتی هم دارند، بعد از آن میخواهیم یک تگ p ایجاد کنیم که فرزند div باشد واگر از ^ استفاده نکنیم، چون در یک خط نوشته میشود باعث میشود p فرزند a باشد.
&nbsp عبارت div> (a[#]{a-text})+{div-text}^p یک تگ p بعد از div ایجاد می کند.

< div>
< a href="#"> a-text< /a>
div-text
< /div>
< p> < /p>

علامت * هم به معنی ضرب هست.&nbsp
اگر بخواهیم 3 تگ a در div ایجاد کنیم div> (a[#]{a-text})*3+{div-text}

< div/>
< a href="#"> a-text< /a>
< a href="#"> a-text< /a>
< a href="#"> a-text< /a>
div-text
< div/>

مطالعه بیشتر+


CSS
برای مثال عبارت +bd مخفف عبارت زیر است:

border: 1px solid #000

مثال های بیشتر در مورد خاصیت color:

c —>color:#000
c:r —>color:rgb(0, 0, 0)
c:ra —>color:rgba(0, 0, 0, .5)
op —>opacity

مثال های بیشتر در مورد خاصیت position:

pos —>position:relative(defaults to relative)
pos:s —>position:static
pos:a —>position:absolute
pos:r —>position:relative
pos:f —>position:fixed

مثال های بیشتر در مورد خاصیت display

d —>display:block(defaults to block)
d:n —>display:none
d:b —>display:block
d:f —>display:flex
d:if —>display:inline-flex
d:i —>display:inline
d:ib —>display:inline-block

مثال های بیشتر در مورد خاصیت margin &amppadding:

m —>margin:
m:a —>margin:auto
mt —>margin-top:
mr —>margin-right:
mb —>margin-bottom:
ml —>margin-left:
p —>padding:
pt —>padding-top:
pr —>padding-right:
pb —>padding-bottom:
pl —>padding-left:

مطالعه بیشتر+
تمام Emmet های html/css به صورت کامل



&nbsp