متغیرهای Sass

متغیرهای Sass

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

با استفاده از Sass، می‌توانیداطلاعاتدر متغیرها ذخیره می‌شوند، به عنوان مثال:

• رشته
• عدد
• رنگ
• بولین
• لیست
• null

Sass از نشانه $ پس از نام برای اعلام متغیرها استفاده می‌کند:

نحوه استفاده از متغیرهای Sass:

$variablename: value;

در مثال زیر 4 متغیر اعلام شده است:

• myFont
• myColor
• myFontSize
• myWidth

پس از اعلام متغیرها، می‌توانید این متغیرها را در هر مکانی استفاده کنید:

زبان برنامه‌نویسی SCSS:

$myFont: Helvetica, sans-serif;
$myColor: قرمز;
$myFontSize: 18px;
$myWidth: 680px;
body {
  font-family: $myFont;
  font-size: $myFontSize;
  رنگ: $myColor;
}
#container {
  width: $myWidth;
}

بنابراین، هنگامی که فایل Sass به CSS ترجمه می‌شود، از متغیرها (myFont، myColor و غیره) استفاده می‌کند و CSS معمولی و مقادیر متغیرها را در CSS قرار می‌دهد، مانند:

خروجی CSS:

body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  رنگ: قرمز;
}
#container {
  width: 680px;
}

دامنه متغیرهای Sass

متغیرهای Sass تنها در سطح محدوده‌ای که تعریف شده‌اند قابل استفاده هستند.

لطفاً به مثال زیر نگاه کنید:

زبان برنامه‌نویسی SCSS:

$myColor: قرمز;
h1 {
  $myColor: سبز;
  رنگ: $myColor;
}
p {
  رنگ: $myColor;
}

<p> رنگ متن درون برچسب‌ها قرمز یا سبز خواهد بود؟ قرمز است!

یک تعریف دیگر، $myColor: سبز; در <h1> در داخل قوانین و تنها در آنجا قابل دسترسی است!

بنابراین، خروجی CSS خواهد بود:

خروجی CSS:

h1 {
  رنگ: سبز;
}
p {
  رنگ: قرمز;
}

خب، این رفتار پیش‌فرض محدوده متغیرها است.

استفاده از Sass !global

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

!global نشان می‌دهد که متغیر جهانی است، یعنی می‌تواند در هر سطح دسترسی داشته باشد.

لطفاً به مثال زیر نگاه کنید (مانند مثال بالا، اما با اضافه کردن !global):

زبان برنامه‌نویسی SCSS:

$myColor: قرمز;
h1 {
  $myColor: سبز !global;
  رنگ: $myColor;
}
p {
  رنگ: $myColor;
}

حالا <p> رنگ متن درون برچسب‌ها سبز خواهد بود!

بنابراین، خروجی CSS خواهد بود:

خروجی CSS:

h1 {
  رنگ: سبز;
}
p {
  رنگ: سبز;
}

توجه:باید متغیرهای جهانی در خارج از هر قوانین تعریف شوند. بهترین کار این است که همه متغیرهای جهانی را در یک فایل جداگانه به نام "_globals.scss" تعریف کنید و از @include کلمات کلیدی شامل این فایل هستند.