تعریف و استفاده از متغیرها در Sass [ قسمت دو ]

  • آخرین بروزرسانی در دوشنبه 02 نوامبر 2020

    Average rating 5 / 5. Vote count: 1

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

در Sass شما می توانید متغیری تعریف کنید که انواع مقادیر زیر را در خود نگهداری می کند:

  • رشته ها
  • اعداد
  • رنگ ها
  • مقدار بولی
  • لیست ها
  • مقادیر نال

تعریف متغیر در Sass

در Sass برای تعریف متغیر می بایست از نماد $ که در ادامه آن نام متغیر می آید استفاده کنید. یعنی تعریف یک متغیر و مقدار دهی به آن به صورت زیر است.

 $variablename: value

در مثال زیر چهار متغیر به نام های myFont, myColor, myFontSize, و myWidth تعریف شده است.

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

$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;

body {
  font-family: $myFont;
  font-size: $myFontSize;
  color: $myColor;
}

#container {
  width: $myWidth;
}

نتیجه اجرای کد بالا توسط کامپایلر Sass این است که متغیر های تعریف شده را بر می دارد و در هر کجا که این متغیر ها فراخوانی شده باشد مقدار آن ها را جایگذاری می کند؛ مثلا:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

#container {
  width: 680px;
}

محدوده متغیر های Sass

متغیر های Sass تنها در سطح تو رفتگی که تعریف شده اند در دسترس هستند.

نگاهی به مثال زیر بیاندازید.

$myColor: red;

h1 {
  $myColor: green;
  color: $myColor;
}

p {
  color: $myColor;
}

با نگاه به کد بالا به نظر شما رنگ متن داخل تگ <p> قرمز است یا سبز؟

پاسخ

رنگ قرمز است!

تعریف دیگری که از متغیر myColor صورت گرفته داخل دستور <h1> است بنابراین فقط در همان محدوده در دسترس خواهد بود.

بنابراین خروجی به صورت زیر خواهد بود:

h1 {
  color: green;
}

p {
  color: red;
}

بسیاری خوب! بحث محدوده های تعریف متغیر در Sass را گذراندیم!


استفاده از global!

شما می توانید رفتار پیشفرض محدوده تعریف یک متغیر را با استفاده از واژه global! بهم بزنید.

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

به مثال زیر توجه کنید؛ همه چیز مانند کد بالاست با این تفاوت که واژه global! به آن اضافه شده است.

$myColor: red;

h1 {
  $myColor: green !global;
  color: $myColor;
}

p {
  color: $myColor;
}

حالا رنگ متن داخل تگ <p> سبز خواهد بود چون کد نهایی که از کامپایل کد بالا بدست می آید به صورت زیر است:

h1 {
  color: green;
}

p {
  color: green;
}

نکته

متغیر هایی که global هستند را می بایست بیرون از هر rule یا scope تعریف کنید.

کار بهتری که می شود انجام داد این است که تمام متغیر های global را در فایلی به همین نام یعنی globals.scss_ تعریف و آن فایل را با استفاده از کلیدواژه include@ در فایل های خود فراخوانی کنید.

برای دنبال کردن نوشته های کاپ کد به کانال تلگرامی آن (cupcode_ir@) بپیوندید!
برای ثبت سفارش برنامه نویسی، طراحی وب سایت، بهینه سازی و... در کاپ کد کلیک کنید.

دیدگاه خود را بیان کنید

@