کد نویسی پرسرعت؛ خداحافظ Zen، سلام Emmet! قسمت دوم

با قسمت دوم "کد نویسی پرسرعت؛ خداحافظ Zen، سلام Emmet! قسمت دوم" در خدمتتان هستیم.

مخفف های CSS

مقدارها

Emmet حوزه ی کاریش را فراتر از المان های HTML برده است. شما می توانید مستقیما مقادیر را با مخفف های CSS به صفحه تزریق کنید. فرض کنید می خواهیم یک مقدار برای عرض تعیین کنیم. برای این کار کافیست w100 را تایپ کنیم و برایمان این به وجود می آید:

width: 100px;

پیکسل (Pixel) تنها واحد در دسترس نیست. بذارید h10p+m5e را اجرا کنیم، این را خروجی می گیریم:

height: 10%;
margin: 5em;

اینجا یک سری نام مستعار برای واحد ها داریم:

  • p → %
  • e → em
  • x → ex

عملگر اضافات

شما قبلا می دانستید (شاید هم نه) که برخی مخفف ها، مثل f@ این جور خروجی ها را می دهند:

@font-face {
  font-family:;
  src:url();
}

برخی خواص، مثل background-imageborder-radiusfont@font-face,text-outlinetext-shadow  ، بعضی امکانات اضافه دارند که شما می توانید آن ها را با علامت + فعال کنید. برای مثال +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;
}

جستجوی هوشمند

ماژول CSS از جستجوی هوشمند برای پیدا کردن مخفف های ناشناخته استفاده می کند. پس، هر بار که شما یک مخفف ناشناخته وارد می کنید، Emmet سعی می کند تا نزدیکترین معنای کلیدی را برای آن پیدا کند. برای مثال ov:h و ov-h و ovh و oh همه این را می سازند:

overflow: hidden;

پیشوند ها (از این قسمت خیلی خوشم اومد)

CSS3 خوشمزست، ولی اون قسمت پیشوند ها (قبل از transition ها مخصوصاً) برای همه ی ما دردناکه! خوب، دیگه نباید اذیتمون کنن. Emmet برای همشون مخفف داره، مثل همیشه! برای مثال، مخفف trs به این شکل باز میشه:

-webkit-transform: ;
-moz-transform: ;
-ms-transform: ;
-o-transform: ;
transform: ;

شما همچنین می توانید به هر نوع المان دیگر نیز پیشوند اضافه کنید. شما فقط نیاز دارید که از پیشوند - استفاده کنید. پس -super-foo به این شکل باز می شود:

-webkit-super-foo: ;
-moz-super-foo: ;
-ms-super-foo: ;
-o-super-foo: ;
super-foo: ;

حالا اگر همه ی اون پیشوندها را لازم نداشته باشیم چی؟ مشکلی نیست. شما می توانید مشخص کنید که دقیقا کدام مرورگر را می خواهید. برای مثال wm-trf- این را بیرون می دهد:

-webkit-transform: ;
-moz-transform: ;
transform: ;
  • w → -webkit-
  • m → -moz-
  • s → -ms-
  • o → -o-

طیف رنگ ها (Gradients)

وقتی راجع به امکانات خوب CSS3 صحبت می کنیم، نمی توانیم طیف رنگ ها را از قلم بیندازیم. آن همه تعریف کردن نام و نماد و غیره حالا می تواند خیلی ساده و مختصر گردد، مخفف ضدگلوله!!! lg(left, #fff 50%, #000) را تایپ کنید و خروجی این خواهد بود:

background-image: -webkit-gradient(linear, 0 0, 100% 0, color-stop(0.5, #fff), to(#000));
background-image: -webkit-linear-gradient(left, #fff 50%, #000);
background-image: -moz-linear-gradient(left, #fff 50%, #000);
background-image: -o-linear-gradient(left, #fff 50%, #000);
background-image: linear-gradient(left, #fff 50%, #000);

همین حالا تستش کن!

به اندازه ی کافی تصاویر متحرک Gif دیدی؟ برو جلو، یه مخفف CSS که تو زبان Emmet یاد گرفتی رو بنویس، و کلید Tab رو بزن.

ضمایم

LOREM IPSUM

دیگه اون برنامه های جانبی که به عنوان یه سرویس می آن و متن “Lorem ipsum” رو می نویسن رو فراموش کن. حالا شما می توانید داخل ویرایشگر متن خودتان این متن را بسازید. کافیست از مخفف های lorem و lipsum استفاده کنید. حتی شما می توانید مشخص کنید که چند کلمه برایتان ساخته شود. برای مثال، lorem10 این را خروجی می دهد:

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero delectus.

همچنین، شما می توانید lorem را با المان های دیگر ترکیب نیز کنید! پس p*3>lorem5 این خروجی را در می کند (:دی):

<p>Lorem ipsum dolor sit amet.</p>
<p>Voluptates esse aliquam asperiores sunt.</p>
<p>Fugiat eaque laudantium explicabo omnis!</p>

شخصی سازی

Emmet یک فضای گسترده برای شما به وجود می آورد؛  یک سری ترفند که با آن ها می توانید از پلاگینتان لذت ببرید! در کل سه فایل هست که می توانید ویرایششان کنید:

  • برای اضافه کردن یکی از خودتان، یا تغییر دادن قطعه کدهای پیشفرض، فایل snippets.json را ویرایش کنید
  • برای تغییر رفتار فیلترها و action های Emmet، سعی کنید فایل preferences.json را تغییر دهید.
  • برای اینکه XML یا HTML ساخته شونده را تغییر دهید، فایل syntaxProfiles.json را تغییر دهید.

و یه عالمه دیگه!

این تازه اولش بود. Emmet یه عالمه امکانات خوب دیگه داره، مثل انکد و دیکد کردن تصاویر به data:URL، تغییر دادن سایز تصاویر و بیشتر و کمتر کردن اعداد. (اینو هم من اضافه کنم که اعمال ریاضی رو هم نامرد انجام میده، تو تستی که من کردم 25+17/3*9-3 رو حل کرد!!!)

سایتشون، مستنداتشون و این قسمتش که خوشم اومد، کاغذ تقلبشون رو حتما ببینید!

ویرایشگرهای پشتیبانی شده

اگه فیض بردید، سوال دارید که "آیا Emmet روی ویرایشگر متن من کار می کنه؟"، جواب اینه که "اُه، بله دوست من!" (نقل به مضمون جمله هاتونه!). یه عالمه ویرایشگر پشتیبانی می شود، و من امیدوارم که شما واسه خودتونو این پایین پیدا کنید. (من خودم از NP++ استفاده می کنم(MTP هستم در خدمتتون))

و شما؟

ترفند های مورد علاقه  ی شما چین؟ این زیر یه کامنت بذارید. حالا نوبت شماست که ترفنداتونو منتشر کنید. (والا من که دستم پکید از بس تایپ کردم)

منتشرشده توسط

محمد تیموری پابندی

محمد تیموری پابندی هستم، برنامه می نویسم، از امنیت سر در می آورم و جلوه های ویژه را دوست دارم، شما را نیز هم! نكته ي جالبی که در تاریخ تولدم هست، این است که در روز جهانی عدد پی به دنیا آمده ام!

1 دیدگاه برای «کد نویسی پرسرعت؛ خداحافظ Zen، سلام Emmet! قسمت دوم»

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

شما می‌توانید از این دستورات HTML استفاده کنید: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>