ایمِت، موتورِ توربویِ فرانت‌اند (قسمت ۲)

خب دیگه وقتش رسیده که نقش هیجان‌انگیز ایمِت رو توی CSS هم ببینیم. بعد از اینکه  قسمت اول رو خوندید و از ایمت در HTML استفاده کردید، احتمالاً نیاز داشتید که توی استایل‌ها هم ازش کمک بگیرید.

خب توی این قسمت قراره همین کار رو انجام بدیم و بریم به سراغ استایل‌دهی به کمک ایمِت، اما هم‌چنان یادتون نره که از سرچ کردن غافل نشید.

با طولانی نوشتن در CSS خداحافظی کنید

اکثر ما موقع نوشتن یک Property طولانی مثل "background-color" از auto complete ویرایشگر استفاده می‌کنیم که به کارمون سرعت بیشتری بده. اما خب این موضوع آن‌چنان دردی رو از ما دوا نمی‌کنه چون مجبور می‌شیم کاراکتر‌های زیادی رو برای رسیدن به Property مورد نظر تایپ کنیم.

ایمت اینجا به داد ما می‌رسه و کارمون رو راحت‌تر می‌کنه. طوری که در نهایت با تایپ کردن ۴ یا ۵ کاراکتر، به Property مورد نظر می‌رسیم:

bgc        =>    background-color: #fff;
trf          =>    transform: 
bdblrs    =>    border-bottom-left-radius:
pos        =>    position: relative;
pos:f      =>    position: fixed;

همون‌طور که می‌بینید، تنها با نوشتن ۳ کاراکتر (bgc) و زدن دکمه TAB تونستیم Property مورد نظر خودمون یعنی "background-color" رو به راحتی بنویسیم. حتما براتون سوال شده که رنگ سفید (fff#) از کجا اومده؟

ایمت برای بعضی از Property ها، مقدار پیش‌فرض در نظر می‌گیره ولی برای بعضی‌ها نه! مثلاً برای "transform" مقداری در نظر نگرفته اما برای "position" و "background-color" به ترتیب "relative" و "fff#" رو داریم. این که کدوم Property ها چه پیش‌فرضی دارند رو با تمرین کردن یا مطالعه مستندات سایت ایمت می‌تونید یاد بگیرید.

اما نکته جالب درباره خط چهارم مثال بالاست که حتماً توجه‌تون رو هم جلب کرده. شما می‌تونید با قرار دادن دو نقطه ( : ) بعد از عبارت مورد نظر، مقداردهی رو هم انجام بدید و مقدار پیش‌فرض رو با مقدار دلخواه‌تون جایگزین کنید.
نکته: اگر مقدار مورد نظرتون عدد بود، می‌تونید دو نقطه ( : ) رو قرار ندید:

ta:c    =>    text-align: center;
m5     =>    margin: 5px;
p0      =>    padding: 0;

ایمت و Prefix ها

یکی از جالب‌ترین ویژگی‌های ایمت در CSS، کمک به نوشتن prefix ها در استایل‌دهی هست. نوشتن این‌گونه prefix ها برای ما برنامه‌نویس‌ها وقت‌گیر و حوصله‌ سر بره. اینجاست که ایمت دوباره در لباس سوپرمن ظاهر میشه و براتون prefix ها رو قرار میده. اونم تنها با تایپ کردن کاراکتر دَش ( - ) قبل از عبارت مورد نظر:

-trf:t    =>    -webkit-transform: translate(x, y);
                   -moz-transform: translate(x, y);
                   -ms-transform: translate(x, y);
                   -o-transform: translate(x, y);
                   transform: translate(x, y);

ویژگی جالب‌تر اینجاست که بعد نوشتن عبارتِ ایمت و زدن دکمه TAB، مقدار x انتخاب شده و دیگه لازم نیست که نشان‌گر ماوس رو تا اونجا ببرید و مقدار‌دهی کنید. چی ازین بهتر؟

ایمت‌باز باشید

تا اینجا سعی کردم جذاب‌ترین ویژگی‌های ایمت رو براتون بگم، اما در نظر بگیرید که ایمت در همین دو مطلب خلاصه نمی‌شه و در واقع برای حرفه‌ای کار کردن باهاش باید حتما به سایت ایمت سر بزنید و دست به کد بشید تا بتونید سریع‌تر کد بزنید.

امیدوارم که انگیزه کافی برای استفاده از ایمت رو براتون ایجاد کرده باشم. منتظر نظرات‌تون برای بهبود نوشته‌هام هستم.

دست به کد باشید.