چگونه از Myth استفاده کنیم ؟

بعضی از ما در حال استفاده از یکسری پیش پردازنده های CSS هستیم، این پیش پردازنده ها به ما آزادی ها و مزیت هایی را می دهند که CSS در حال حاضر توانایی انجام آنها را ندارد. برای مثال متغیرها!

یکی از مشکلات این پیش پردازنده ها استفاده از سینتکس کاملا متفاوت با سینتکس CSS است، این موضوع باعث می شود که ما مجبور شویم دو سینتکس مجزا از هم را یاد بگیریم. چه می شد اگر از یک پیش پردازنده ای استفاده می کردیم که تمام مزیت ها را داشت و همچنین سینتکس CSS را نگه می داشت؟

Myth به شما اجازه می دهد که مطابق سینتکس CSS کد بنویسید و برای استفاده از ویژگی هایی مانند متغیر احتیاجی به یاد گرفتن دو سینتکس مجزا از هم را نداشته باشید. یکی دیگر از مزیت های Myth این است که شما دیگر نگران پشتیبانی ۱۰۰ درصد مرورگرهای مختلف از کدهای‌تان نخواهید بود.

نصب کردن

نصب کردن Myth برای شما بسیار آسان خواهد بود، شما نیاز دارید تا NodeJS و NPM را روی سیستم‌تان نصب کنید. نصب این موارد سخت نیست و با چند جستجوی ساده می توانید این کار را انجام دهید. -می توانید به وبسایت رسمی هر دو پروژه سر بزنید و آخرین نسخه هرکدامشان را دانلود کنید-

وقتی این دو مورد را نصب کردید، حال به سراغ ترمینال بروید و دستور زیر را قرار دهید:

npm install -g myth

تمام شد! بدون نیاز به هیچگونه پیکربندی و دستور خاص Myth را روی کامپیوتر‌تان نصب کردید.

سینتکس

همانطور که قبلا گفتم سینتکس استفاده شده در Myth دقیقا همان سینتکس CSS و ویژگی های آینده CSS است. به این معنی که شما وقتی سینتکس این ابزار را یاد می گیرید می توانید از آن در هر نسخه و تغییراتی از CSS در آینده استفاده کنید.

متغیرها

همه ما در رابطه با متغیرها در پیش پردازنده ها آشنایی داریم، اما با ابزارهای مختلفی که آمده تعداد کمی از مرورگرها از آن پشتیبانی می کنند، حال که Myth این ویژگی را به CSS آورده است، این مشکل نیز رفع گردیده.

با استفاده از تابع var() ما می توانیم از متغیرها استفاده کنیم:

:root {
var-light-blue: #5DA9CF;
var-paddding: 10px;
}
div {
padding: var(padding);
color: var(light-blue);
}

اگر که با تعریف متغیر در CSS آشنایی داشته باشید خواهید دید که  در این حالت نیز از همان فلسفه استفاده شده. متغیرها در قسمت root تعیین می شوند و بعد از آن با استفاده از تابع var() در هرجایی که بخواهیم فراخوانی می شوند. برای فراخوانی متغیر درون تابع var باید از پارامتر نام متغیر استفاده کنیم.

زمانی که Myth کدهای شما را پردازش کند، شما چیزی شبیه به کد زیر را دریافت می کنید:

:root {
var-light-blue: #5DA9CF;
var-paddding: 10px;
}
div {
padding: 10px;
color: #5DA9CF;
}

حتی می توانید از این متغیرها برای المنت های بخصوصی نیز استفاده کنید:

.element {
var-padding: 20px;
}
.element .sub-elemnt {
padding: var(padding);
}

با استفاده از چنین حالتی می توانید مقدار متغیر را تنها برای المنت و المنت های فرزند تغییر دهید:

.element {
var-padding: 20px;
}
.element .sub-elemnt {
padding: 20px;
}

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

Math

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

div.main {
padding: calc(var(padding) * 2);
}

همانطور که می بینید تمام قواعد استفاده شده در این کد از سی اس اس استفاده می کند. تابع calc و var در نهایت میزان padding را که ۱۰ است با ۲ ضرب کرده و مقدار خروجی به صورت زیر درآمده است:

div.main {
padding: 20px;
}

چنین حالتی به خوبی توسط تمام مرورگرها پشتیبانی می شود و آنها می توانند خروجی را براساس px بخوانند.

تغییرات رنگ

یکی دیگر از تکنیک های بسیار مفیدی که می توانیم در پیش پردازنده ها مشاهده کنیم اما در CSS وجود ندارد، تغییرات رنگ است. حالتی که در آن می توانیم یک متغیر براساس کدهای رنگ را تعریف کنیم و روی آن تغییرات و ترکیباتی انجام دهیم. تمام این کارها تنها با استفاده از یک فانکشن صورت می گیرد. استفاده از چنین حالتی در پیش پردازنده های دیگر توسط تمام مرورگرها پشتیبانی نمی شود اما در Myth این مشکل نیز رفع گردیده است.

.btn {
color: var(light-blue);
}
.btn:hover {
color: color(var(light-blue) shade(10%));
}

همانطور که می بینید در متغیر light-blue من ۱۰ درصد سایه قرار داده‌ام که باعث می شود یک رنگ تیره به المنت اضافه شود و آن را تیره‌تر کند. وقتی این کار انجام شد Myth کدها را به حالت خواناتری برای مرورگر به شکل زیر تبدیل می کند:

.btn:hover {
color: rgb(68,144,182);
}

بدون نیاز به نوشتن PREFIXE ها

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

این موضوع به این معنی است که شما تنها نیاز دارید روی مسئله اصلی تمرکز کنید و بجای نوشتن کد زیر:

.box {
box-sizing: border-box;
-moz-box-sizing: border-box;
}

به سادگی کد زیر را بنویسید:

.box {
box-sizing: border-box;
}

پس هیچ احتیاجی به دوباره کاری و نگرانی راجع به پشتیبانی مرورگرها از المنت های مختلف نیستید. البته فراموش نکنید که در این حال نیز Myth از پیشوندی مانند -moz- استفاده می کند اما نکته اینجاست که شما مجبور نیستید آن را بنویسید.

در پایان

همانطور که می بینید امکان دارد به این نتیجه برسید که حال نیاز خیلی اساسی به Myth وجود ندارد، حتی وقتی شما با یک پیش پردازنده کارهای روزمره‌تان را انجام می دهید دیگر این مسئله برای‌تان منتفی می شود اما یادتان باشد که CSS در حال رشد است و این رشد نیازمند درک بهتر مرورگرها از کدهای CSS نیز است. Myth به مرورگر در فهمیدن کدهای CSS کمک می کنند و آن را یاری می دهد تا بتواند بهتر کدها را بخواند. ممکن است که فکر کنید myth در حال حاضر خیلی پر فایده نیست اما باید بگویم که در آینده و چند سال دیگر بسیار پر استفاده خواهد بود.

یکی از زیبایی های Myth این است که در حال استفاده از قدرت یک پیش پردازنده هستید اما هنوز از CSS بهره می برید.

وبسایت اصلی Myth می گوید «از سی اس اس همانطور که فکر می کنید استفاده نمایید».

منبع: راکت