متغیرهای سی اس اس

متغیرهای CSS

متغیرهای سی اس اس ورودی هایی هستند که توسط توسعه دهنده تعریف شده و مقادیری را درون خود ذخیره می کنند تا بتوان از آن مقادیر بارها و بارها درون یک سند استفاده کرد.

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

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

فایده دیگر متغیرها معناگرا بودن آنها است. به عنوان نمونه درک main-text-color به مراتب ساده از #03A9F4 می باشد.

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

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

مثال:


body {
  --main-color: #7F583F;
}

در بالا متغیری با نام --main-color به وجود آوردیم و رنگ اصلی سایت را درون آن ذخیره کردیم، حال هر زمان که به آن رنگ احتیاج داشته باشیم می توانیم توسط تابع var() به آن متغیر اشاره کرده و در نتیجه از رنگ مورد نظرمان استفاده کنیم. به عنوان نمونه می خواهیم متن تمامی عناصر لینک رنگ اصلی سایت را داشته باشد:


a {
  color: var(--main-color);
}

اگر بعد از استفاده از متغیر به Devtools مرورگر برویم و رنگ عناصر لینک را بررسی کنیم خواهیم دید که مرورگر رنگ را با مقدار #7F583F نمایش نمی دهد بلکه آن را با --main-color معرفی می کند. این یعنی متغیرها نیز مانند تمام ویژگی های سی اس اس در زمان اجرا به حیات خود ادامه می دهند و قابل تغییر هستند!

وقتی از تابع val() استفاده می کنیم می توانیم یک مقدار اختیاری را به عنوان مقدار پیشفرض به این تابع بدهیم.

این کار چه کاربردی دارد؟

اگر متغیر ما تعریف نشده باشد و یا به هر دلیلی در زمان استفاده در دسترس نباشد این مقدار پیشفرض به جای مقدار متغیر برای ویژگی مربوطه تعیین می شود.


color: var(--main-color, #7F583F)

همچنین می توان برای مقدار پیشفرض از یک متغیر دیگر نیز استفاده کرد:


.box {
  padding: var(--box-padding, var(--main-padding));
}

متغیر ها نسبت به حروف کوچک و بزرگ حساس هستند این یعنی متغیر های --header-color و --Header-Color با هم متفاوت هستند.

محدوده یک متغیر و Cascade

مثل متغیرها در زبان های دیگر برنامه نویسی متغیرهای سی اس اس نیز Scope یا محدوده خاص خود را دارند که می توانند در آن محدوده مورد استفاده قرار بگیرند.

در CSS این محدوده با توجه به ساختار عناصر در HTML تعیین می شود. مثلا اگر متغیری را در محدوده عنصر <html> تعریف کنیم با توجه به مفهموم Cascade در سی اس اس آن متغیر برای تمامی عناصر صفحه در دسترس است چرا که تمام عناصر صفحه فرزند عنصر <html> می باشند.

به این نوع متغیرها، متغیرهای سراسری یا Global گفته می شود چرا که در همه جا در دسترس هستند.


html {
  --gutter: 2rem;
}

همچنین می توان با استفاده از انتخابگر root متغیر سراسری تعریف کرد چرا که این انتخابگر به عنصر ریشه یا همان <html> اشاره می کند:


:root {
  --gutter: 2rem;
}

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

حال اگر مثلا برای عنصر پاراگرافی با کلاس .content یک متغیر تعریف کنیم آن متغیر فقط برای عناصر پاراگراف با همان کلاس و فرزندانشان در دسترس خواهند بود یعنی آن متغیر به سمت پایین Cascade می شود. (آبشار به سمت بالا که نداریم دیگه :) پس مسلما پدران این عناصر به این متغیر دسترسی ندارند)


p.content {
  --content-text-color: #333;
}

به این نوع متغیرها که در یک محدوده خاص قابل دسترس هستند متغیرهای محلی یا Local گفته می شود.

HTML زیر را در نظر بگیرید:


global
<div class="enclosing">
  enclosing
  <div class="closure">
    closure
  </div>
</div>

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


:root {
  --globalVar: 10px;
}

.enclosing {
  --enclosingVar: 20px;
  font-size: var(--closureVar); /* چون این متغیر در این محدوده در دسترس نیست ویژگی اندازه فونت مقدارش تغییر نمی کند */
}

.enclosing .closure {
  --closureVar: 30px;

  /* با توجه به آبشاری بودن سی اس اس و ساختار عناصر در این مثال تمام این متغیر ها در این محدوده در سترس هستند */ 
  font-size: calc(var(--closureVar) + var(--enclosingVar) + var(--globalVar));
  /* 60px */
}

انجام عملیات ریاضی بر روی متغیرها

وقتی پای متغیرها به میان می آید انجام عملیات ریاضی رو آنها نیز به دنبالشان خواهد آمد چرا که خیلی از مشکلات را می توان به راحتی حل کرد. در سی اس اس با استفاده از تابع calc این کار امکان پذیر است.


:root{
  --indent-size: 10px;

  --indent-xl: calc(2*var(--indent-size));
  --indent-l: calc(var(--indent-size) + 2px);
  --indent-s: calc(var(--indent-size) - 2px);
  --indent-xs: calc(var(--indent-size)/2);
}

اگر یک متغیر داشته باشیم که بدون واحد است ولی برای استفاده از آن متغیر نیاز داریم که به آن واحد مورد نظرمان را اضافه کنیم، برای این کار نیز می توانیم به صورت زیر از تابع calc استفاده کنیم:


:root{
  --spacer: 10;
}

.box{
  padding: var(--spacer)px 0; /* غلط */
  padding: calc(var(--spacer)*1px) 0; /* درست */
}

تفاوت متغیرهای CSS و متغیرهای پیش پردازنده هایی مثل Sass

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

اما باید بدانیم که این دو خیلی با هم متفاوت هستند و کارهای بسیاری را می توان از طریق متغیرهای CSS انجام داد که امکان آنها در پیش پردازنده ها وجود ندارد.

متغیرهای سی اس اس در زمان اجرا زنده هستند

در اینجا زنده بودن بدین معنا است که اگر بعد از استفاده از متغیر، مقدار آن را تغییر دهیم این تغییر بر روی ویژگی که از متغیر استفاده کرده است نیز اعمال می شود.

کد زیر را در نظر بگیرید:


.element {
  --text-size: 30px;

  font-size: var(--text-size); /* 50px */

  --text-size: 50px;
}

همانطور که مشاهده می کنید بعد از اینکه متغیر مورد استفاده قرار گرفته به مقدار 50 تغییر کرده است اما با این وجود اندازه ویژگی font-size به مقدار 50 پیکسل به روز می شود.

اما اگر همچین کاری در پیش پردازنده ها انجام شود مقدار نهایی اندازه فونت 30 پیکسل خواهد بود این بدین دلیل است که متغیرهای سی اس اس در زمان اجرا زنده هستند.

متغیرهای سی اس اس نسبت به ساختار HTML آگاه هستند

فرض کنید می خواهیم اندازه فونت عنصر body را در صورتی که کلاس large-text به آن داده شود افزایش دهیم.


--font-size: 1em;

.large-text {
  --font-size: 1.5em;
}

body {
  font-size: var(--font-size);
}

حال اگر در زمان اجرا هر زمان این کلاس به عنصر body اضافه شود مقدار متغیر تغییر کرده و اندازه فونت این عنصر بیشتر می شود. این اتفاق به این دلیل می افتد که متغیرهای سی اس اس به DOM حساس هستند و با تغییر ساختار DOM بصورت پویا عمل می کنند.

متغیرهای CSS دقیقا مثل ویژگی های دیگر CSS عمل می کنند به همین دلیل به آنها Custom Property گفته می شود، از این رو کلمات کلیدی مثل inherit، initial و غیره برای این نوع از ویژگی ها نیز کاربرد دارند و عمل می کنند.

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

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

نوشتن پشتیبان برای متغیرها

برای مرورگرهایی که متغیرها را پشتیبانی نمی کنند می توان بصورت زیر پشتیبان نوشت:


:root {
  --primary: #7F583F;
}

a {
  color: #7F583F; /* Fallback */
  color: var(--primary);
}

حال مرورگری که متغیرها را پشتیبانی نکند خط اول و مرورگری که پشتیبانی می کند خط دوم برایش تعیین کننده خواهد بود.

کار با متغیرهای سی اس اس در جاوااسکریپت

از آنجایی که متغیرهای سی اس اس مثل دیگر ویژگی های سی اس اس هستند به راحتی می توان از طریق توابع setProperty() و getPropertyValue()در جاوااسکریپت با آنها تعامل داشت.

به عنوان نمونه کد کد زیر را در نظر بگیرید:


:root {
  --primary-color: red;
}

p {
  color: var(--primary-color);
}

و در جاوااسکریپت خواهیم داشت:


var styles = getComputedStyle(document.documentElement);

var value = styles.getPropertyValue('--primary-color');

console.log(value); // red

به همین صورت برای تعیین مقدار یک متغیر در زمان اجرا می توان از تابع setProperty() کمک گرفت:


document.documentElement.style.setProperty('--primary-color', 'green');

همچنین همانطور که می توان در سی اس اس از طریق تابع var() به متغیر دیگری برای مقدار دهی به متغیر مورد نظر اشاره کرد، می توان از این روش در جاوااسکریپت هم بهره برد:


document.documentElement.style.setProperty('--primary-color', 'var(--secondary-color)');

همچنین می توان با استفاده از تابع removeproperty() یک متغیر را حذف کرد:


document.documentElement.style.removeproperty('--primary-color');

جالب است بدانید که مقدار زیر یک مقدار معتبر برای یک متغیر در سی اس اس می باشد:


--foo: if(x > 5) this.width = 10;

شاید شرایطی داشته باشید که نیاز باشد متغیری را اینچنین در سی اس اس ذخیره کرده و بعدا در جاوااسکریپت از آن استفاده کنید.

مثال ها و موارد کاربردی

یک مثال خیلی پر کاربرد استفاده از متغیرها برای واکنشگرا کردن برخی از ویژگی ها در اندازه های مختلف صفحه می باشد. معمولا در طراحی یک سایت گپ یا فاصله ای (Gutter) بین ستون ها قرار می دهیم که این فاصله در صفحه نمایش های مختلف تغییر می کند. با استفاده از متغیرها می توان این کار را به راحتی انجام داد:


/* what `--gutter` is at each breakpoint */

:root { --gutter: 1.5em; }

@media (min-width: 30em) {
  :root { --gutter: 2em; }
}
@media (min-width: 48em) {
  :root { --gutter: 3em; }
}

.container {
  margin: 0 auto;
  max-width: 60em;
  padding: var(--gutter);
}

.grid {
  --gutter-negative: calc(-1 * var(--gutter));
  display: flex;
  margin-left: var(--gutter-negative);
  margin-top: var(--gutter-negative);
}

.grid-cell {
  flex: 1;
  margin-left: var(--gutter);
  margin-top: var(--gutter);
}

به عنوان مثال دیگر فرض کنید عنصری سایه ای دارد و ما می خواهیم در زمان hover فقط رنگ سایه را تغییر دهیم اما همانطور که می دانیم این امکان وجود ندارد و باید همه مشخصات سایه را دوباره نویسی کنیم:


.test {  
  box-shadow: 0 0 30px yellow;
}

.test:hover {
  box-shadow: 0 0 30px orange;
}

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


.test {
  --box-shadow-color: yellow;
  box-shadow: 0 0 30px var(--box-shadow-color);
}

.test:hover {
  --box-shadow-color: orange;
}

 

متغیرها دریچه ای به سوی امکانات فراوانی را در سی اس اس باز کردند که به مرور هر چه توسعه دهندگان از آنها بیشتر استفاده کنند فایده هایشان بیشتر پدیدار می شود.

بیشتر بخوانید

8 دیدگاه برای “متغیرهای CSS

  1. خیلی عالی بود اگه اشتباه نکنم متغیرهای خود سی اس اس از sass قویتر هستن
    ولی وقتی که اینطوری فال بک بنویسیم دیگه به نظرم اون قوه اصلی واریابل از دست میره

    1. سلام، خواهش می کنم. اینطور موقع ها می تونید ایمیل بزنید به آدرس ایمیل سایت.

      این پروژه یک فایل CSS ساده هستش. که می تونید به پروژتون اضافه کنید مثل همه فایل های CSS.

      کارش چیه؟

      فرض کنید می خواید یک کار ساده رو با HTML بنویسید. مثلا یه دفعه می خواید یک لیست ساده از یک سری تسک رو بنویسید. یا اصلا می خواین یک مطلب یا سندی رو با HTML بنویسید. نه توی ورد و نرم افزارهای مشابه. (واسه من خیلی پیش میاد)

      خب توی حالت عادی اون مطلب عنوان داره، عنوان های سطح دو و سه شاید داشته باشد، تصویر داره، لیست داره و … و شما بعد از نوشتنش میاید شروع می کنید به خوشگل کردن اون صفحه. یعنی هی میرین توی HTML کلاس می دید و توی CSS هم استایل می نویسید.

      این مینی فریمورک می یاد کار رو راحت می کنه میگه شما بدون کلاس و هیچی فقط تگ های HTML و محتوات رو بنویس بعد هم من رو به عنوان CSS اضافه کن. من خودم خوشگلش می کنم برات.

      چون این مثال ما خیلی کوچیکه و ساده و هیچ وابستگی نداره و یک پروژه بزرگ نیست که نیازی به نگهداری و توسعه در آینده داشته باشه می شه اینطوری انجامش داد.

      تمام.

      یا فرض کنید یک ایده ساده میاد توی ذهنتون میخواین یک نمونه اولیه (Prototype) خیلی سریع درست کنید. باز نیازی نیست وقتتون رو بزارید روی CSS “شاید” این فایل CSS بتونه بهتون کمک کنه.

      تم های مختلف هم داره که میتونید ازشون استفاده کنید.

      موفق باشید.

  2. سلام مهندس!
    فکرشم نمیتونی بکنی الان کجام!!!!
    توی پادگانم! خخخخ
    با هزار بدبختی تونستم دور بزنم شبکه ی داخلی رو، به نت وصل شدم، بفهمن 6-7 ماه اضاف رو شاخشه! خخخ
    ببین دیگه چقدر هلاک سایتتم که این چند دقیقه که نت گیرم اومده، اومدم اینجا سر بزنم، تغییر دکور هم که دادین ماشالا، خوشکل شده، مث همیشه ساده اما دلچسب!
    ولی با انیمیشن search box قبلی بیشتر حال میکردم که تاب میفتاد توش هه هه! کلی باهاش بازی میکردم :دی
    فقط روز شماری میکنم خدمت تموم بشه بیام ادامه ی آموزش فلکس باکس رو بگیرم، راستی من اون اول گرفتما قسمت آخری رو هنوز نذاشته بودی، الان زدی کلا 54 تومن منم اون موقه دوتا پارت اول رو 50 دادم گرفتم باید برام تخفیف قایل بشیا هه هه!
    غرض مزاحمت بود که حاصل شد، خعلی میخوامت، ایشالا بعد خدمت کامل آموزشا رو میگیم و کارو جدی شرو میکنم.
    موفق باشی ، دوستت دارم هوارتا…

  3. با سلام

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

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

    ممنون بابت مطالب و سایت محتوا محورت کارت عالیه خسته نباشی و خدا قوت .

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