CSS یک سری قابلیت های جدید در نسخه 3 اضافه کرده است مانند Gradient, Shadow, Animation و … که فقط با کدهای CSS بدون استفاده از جاوا اسکریپت می توان از آنها استفاده کرد. همچنین تعدادی قابلیت دیگر نیز هستند که بدلیل عدم پشتیبانی یا پشتیبانی ناقص مرورگرها از متغیرهای CSS و تابع calc() هنوز پیاده سازی نشده اند و باید منتظر پشتیبانی مرورگرها از آن ها باشید.ولی اگر طاقت تان طاق شده است و نمی توانید منتظر آینده باشید ، یا Myth آینده را به حال بیاورید!

Myth یک پیش پردازنده CSS یا CSS Preprocessor است که بر خلاف دیگر پیش پردازنده ها مثل Sass یا LESS ، ساختار منحصر به فرد اختراع نکرده است و از همان مشخصات استاندارد CSS استفاده می کند. هدف Myth این است که توسعه دهندگان بتوانند کدهای خام CSS بنویسند و از استانداردهای آینده CSS ، حالا استفاده کنند.

شروع

برای شروع باید کتابخانه باینری Myth را نصب کنید تا بتوانید کدها را به استاندارد فعلی CSS کامپایل کنید. در حال حاضر رابط گرافیکی مانند Codekit یا Koala که از Myth پشتیبانی کند وجود ندارد و تنها راه استفاده از روش زیر است:

در ترمینال دستور زیر را وارد کنید:

npm install -g myth

بعد از نصب myth ، می توانید دستور زیر را وارد کنید تا مثلا فایل source.css به فایل output.css کامپایل شود:

myth source.css output.css

یا دستور زیر را استفاده کنید تا با هر بار تغییر در فایل اول نیاز به اجرای دستور بالا نباشد و خودکار کامپایل شود:

myth --watch source.css output.css

همانطور که می بینید Myth پسوند جدیدی معرفی نکرده است و از همان پسوند .css استفاده می کند.

نوشتن کدهای CSS با Myth

Myth توابع و قوانین اختصاصی مثل دیگر پیش پردازنده ها معرفی نکرده است و از همان قوانین اصلی CSS استفاده می کند، بنابراین می توانید بلافاصله از آن استفاده کنید.زیرا شبیه CSS ساده است.

متغیرها

با متغیرهای CSS شروع می کنیم.

:root {
 var-length: 10px;
 var-color: #000;
}
.class {
 background-color: var(color);
 width: var(length);
}

حالا کد بالا به این کد تبدیل می شود:

.class {
 background-color: #000;
 width: 20px;
}

توابع ریاضی

همانطور که اشاره شد،  می توانیم کارهای محاسباتی را با تابع جدید calc() انجام دهیم.

حالا مثال بالا را بوسیله این تابع گسترش می دهیم.

:root {
 var-length: 10px;
 var-color: #000;
}
.class {
 background-color: var(color);
 width: calc(var(length) / 2);
}

Myth کد بالا را به این صورت کامپایل می کند:

.class {
 background-color: #000;
 width: 10px;
}

تنظیم رنگ

Myth همچنین از تعدادی از عملگرها و تنظیمات مربوط به رنگ پشتیبانی می کند.مثل آنچه در Sass یا LESS هست. یکی از توابع جدید که برای این کار در استاندارد جدید CSS در نظر گرفته شده است تابع color() است که خود شامل بعضی از توابع تنظیم رنگ مثل tint() , shade() , blend()  و … می باشد.

در زیر یک مثال از کاربرد آن را می بینید.

:root {
 var-length: 20px;
 var-black: #000;
 var-white: #fff;
}
.class {
 background-color: color(var(black) lightness(+ 80%));
 border: var(border-width) solid color(var(white) lightness(- 50%));
 width: calc(var(length) / 2);
}

و کد تولید شده :

.class {
 background-color: rgb(204, 204, 204);
 border: 2px solid rgb(128, 128, 128);
 width: 10px;
}

Autoprefixer

Myth همچنین به صورت خودکار پیشوند ها را دستورات CSS اضافه می کند. برای مثال می توانیم سایه را با دستور زیر اضافه کنیم:

.class {
 box-shadow: 2px 1px 0px var(black); 
}

خروجی به این شکل خواهد بود:

.class {
 -webkit-box-shadow: 2px 1px 0px #000;
 box-shadow: 2px 1px 0px #000;
}

در نهایت

من ایده Myth را دوست دارم. با استفاده از آن می توانیم آخرین استانداردهای CSS را که در آینده پشتیبانی خواهند شد حالا بنویسیم بدون اینکه بابت عدم پشتیبانی مرورگرها نگران باشیم. و چون از Syntax استاندارد CSS استفاده می کند، بعدا که همه مرورگرها از امکانات جدید CSS پشتیبانی کردند، ما نگرانی بابت بازنویسی دوباره کدهای گذشته نداریم زیرا قبلا کدها را با استاندارد CSS نوشته ایم. امیدوارم از آن استفاده کنید و لذت ببرید.

منبع