Sass Variables

متغیرها در Sass

متغیرها راهی برای ذخیره اطلاعات جهت استفاده دوباره هستند. در Sass شما می‌توانید در متغیرها اطلاعاتی نظیر:

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

را ذخیره کنید. برای ایجاد یک متغیر در 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;
}

بعد از transpile کردن فایل Sass یک فایل CSS استاندارد به شکل زیر دریافت خواهیم کرد:

خروجی CSS:

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

#container {
  width: 680px;
}

قلمرو متغیرها

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

$myColor: red;

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

p {
  color: $myColor;
}

رنگ متن داخل عنصر <p> قرمز خواهد بود. زیرا تعریف $myColor: green; داخل عنصر <h1> است و فقط در آن جا قابل دسترسی و در نتیجه فایل CSS خروجی به شکل زیر خواهد بود:

h1 {
  color: green;
}

p {
  color: red;
}

استفاده از global!

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

$myColor: red;

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

p {
  color: $myColor;
}

حال رنگ متن داخل عنصر <p> سبز و فایل خروجی CSS به شکل زیر خواهد بود:

h1 {
  color: green;
}

p {
  color: green;
}

<< مبحث قبلی مبحث بعدی >>