با تمام صحبت‌هایی که اخیراً در مورد اینکه بالاخره می‌توانم از CSS Grid استفاده کنم، من را به این فکر انداخت: اکنون از چه ویژگی‌های شگفت‌انگیز CSS دیگری می‌توانم استفاده کنم؟ متغیرهای CSS همان چیزی بود که فوراً به ذهن خطور کرد. مدتی است که چیزی در مورد متغیرهای CSS نشنیده‌ام و مجموعه ابزارها و طرز تفکر جدیدی را به توسعه front end اضافه می‌کند که من را هیجان زده می‌کند.

یک تجدید کننده روی متغیرهای CSS

متغیرهای CSS چند سالی است که دست به دست می‌شوند، اما به نظر نمی‌رسد که به طور گسترده مورد استفاده قرار گیرند. با محبوبیت پیش‌پردازنده‌هایی مانند Sass، توسعه‌دهندگان frontend مدت‌ها پیش آن متغیر itch را خراش دادند. من برای اولین بار در حدود سال 2014 توسط متغیرهای CSS هیجان زده شدم و از آن زمان به بعد آنها در حوزه علاقه من فرو رفته اند. من فقط در حال حاضر در نظر دارم آنها را وارد سایت های تولید کنم و به شما نشان می دهم که چقدر ساده و آسان برای استفاده هستند.

اعلان متغیر

اعلان ویژگی سفارشی ساده است: ما فقط باید ویژگی مورد نظر خود را ایجاد کنیم و دو خط تیره به ابتدای آن اضافه کنیم. اینها را می توان در هر جایی اعلام کرد اما آنها را به موارد زیر اضافه کرد:root به نظر می رسد در حال حاضر رویکرد خوبی است.

--my-reusable-value: 20px;

دسترسی به متغیر

استفاده از ملک نیز بسیار ساده است. ما از طریق تابع var() به آن دسترسی داریم و از خاصیتی که در بالا اعلام کردیم استفاده می کنیم.

padding: var(--my-reusable-value);

این ساده و باشکوه نیست؟ استفاده از متغیرهای CSS ساده است و به خاطر سپردن آنها بسیار آسان است. بزرگترین چالش با متغیرهای CSS (مانند اکثر CSSها) دانستن زمان و مکان مناسب برای استفاده از آنهاست. پرتاب کردن آنها به طور تصادفی یک راه مطمئن برای ایجاد آشفتگی در یک شیوه نامه است و با استفاده از این متغیرها در اشکال زدایی احتمالاً دشوارتر خواهد شد. موارد استفاده مناسب و راهبردهای استفاده از آنها باید در نظر گرفته شود و اینجاست که اکثر تلاش شما باید متمرکز شود.

یک مورد استفاده جالب: ماژول های پاسخگو

در مثال زیر می‌خواهم یک مثال اساسی از روش ساخت یک کامپوننت واکنش‌گرا با استفاده از متغیرهای Sass به شما نشان دهم. سپس من به شما نشان خواهم داد که چگونه می توان آن را با متغیرهای CSS به روشی بهبود بخشید که با یک پیش پردازنده امکان پذیر نیست. این یک مورد استفاده خاص است که برای هر روشی که از متغیرها استفاده می شود صدق نمی کند، بلکه نشان می دهد که چگونه متغیرهای CSS می توانند متفاوت استفاده شوند.

Sass مثال

قلم را ببینید متغیرهای CSS – مورد استفاده پاسخگو بدون متغیرهای CSS توسط آدام هیوز (@lostmybrain) روی CodePen.

هنگام استفاده از Sass چند روش مختلف وجود دارد که من امتحان کرده ام. نسخه فعلی رفتن من در حال قرار دادن درخواست های رسانه ای در بلوک های CSS است که می خواهم تغییر دهم. در اینجا می توانم از یک متغیر، CSS استاندارد، mixin یا یک Extend برای تغییر این عنصر استفاده کنم بدون اینکه استایل های کامپوننت را در همه جا پراکنده کنیم. یک مشکل در این مورد، داشتن پرس و جوهای رسانه ای متعدد و تعداد زیادی متغیر است که به نوعی مرتبط هستند اما نه. من می‌توانم از نقشه‌ها برای متغیرها استفاده کنم که سازماندهی بیشتری می‌دهند، اما فکر می‌کنم مسئله اصلی این است که ما از چندین متغیر برای تعریف یک ویژگی استفاده می‌کنیم. این فقط اشتباه به نظر می رسد. متغیرهای Sass زودتر از موعد مورد استفاده قرار می گیرند، به این معنی که ما باید هر راهی را که می خواهیم از آنها استفاده کنیم برنامه ریزی کنیم. آنها توسعه را آسان تر می کنند، اما از نظر فنی هیچ ابرقدرت جدیدی در اختیار ما قرار نمی دهند.

متغیرهای CSS برای نجات

قلم را ببینید متغیرهای CSS – مورد استفاده پاسخگو توسط آدام هیوز (@lostmybrain) روی CodePen.

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

متغیرهای CSS چه تفاوتی با متغیرهای SASS دارند؟

متغیرهای Sass و متغیرهای CSS دو جانور متفاوت هستند که هر کدام مزایا و معایب خاص خود را دارند.

متغیرهای Sass را می توان بهتر سازماندهی کرد

با توجه به محبوبیت Sass و ماهیت برنامه ای بیشتر Sass، الگوهای سازماندهی عمیق تری در طول زمان تکامل یافته اند. من به خصوص نقشه های sass و ترکیب متغیرهای نوع مشابه را در نقشه ها دوست دارم. به نظر می رسد رنگ ها، اندازه ها و میانبرهای مسیرها انتخاب های محبوبی برای گنجاندن در نقشه ها هستند. به دلیل استفاده نسبتاً کمتر از متغیرهای CSS، بهترین روش‌ها هنوز تکامل نیافته‌اند. نقشه‌ها و آرایه‌ها به یک شکل در CSS امکان‌پذیر نیستند، بنابراین این الگوهای سازمانی جدید باید نوآوری کنند و مشکلات را به روشی متفاوت با Sass حل کنند.

متغیرهای CSS را می توان به صورت پویا تغییر داد

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

متغیرهای CSS یک ویژگی استاندارد مرورگر هستند

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

پشتیبانی چگونه است؟

پشتیبانی بسیار خوب به نظر می رسد با یک استثناء آشکار: IE 11. اکثر مرورگرهای مدرن از متغیرهای CSS با Edge دارای چند باگ پشتیبانی می کنند.

در 78.11 درصد این بالاتر است از CSS Grid (در زمان نگارش) اما پشتیبانی از IE11 می تواند مشکل ساز باشد.

بنابراین، آیا هنوز می توانیم از متغیرهای CSS استفاده کنیم؟

فکر کنم الان وقتشه این پشتیبانی از IE11 قرار نیست بهتر شود، و ما از نسخه های قبلی ویندوز می دانیم که ارتقاء برخی از افراد زمان زیادی می برد. اما پشتیبانی از مرورگرهای مدرن عالی است، به این معنی که ما باید به دنبال متغیرهای CSS باشیم و احتمالات را آزمایش کنیم. این بدان معنا نیست که ما نباید مسئولیت خود را در قبال پشتیبانی مرورگرهای قدیمی فراموش کنیم. یک سیستم بازگشتی اولیه با استفاده از یک تگ پشتیبانی یا حتی یک polyfill برای مرورگرهای قدیمی باید در نظر گرفته شود، حتی اگر استفاده واقعی از سایت شما به مرورگرهای قدیمی تر منحرف شود. زمان هیجان انگیزی برای توسعه front end است، و من نمی توانم منتظر بمانم تا بیشتر از این فناوری ها در سایت های تولیدی خود استفاده کنم.