آموزش Sass

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

با استفاده از sass، شما میتوانید اطلاعات را بصورت زیر ذخیره کنید:

• strings
• numbers
• colors
• booleans
• lists
• nulls

در 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، مقادیر متغیرها جاگذاری میشوند و CSS شما بصورت زیر میشود:

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

محدوده متغیر

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

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

رنگ متن سلکتورp قرمز خواهد بود، زیرا متغیر $myColor: green درون محدوده سلکتورh1> تعریف شده است و تنها در همان محدوده دیده میشود. بنابراین محدوده سلکتورp آن متغیر را نمیبیند.

در نتیجه خروجی بدین شکل میباشد:

 
h1 {
  color: green;
}
p {
  color: red;
}
 

استفاده از !global در sass

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

دستور !global نشان میدهد که متغیر جهانی است. به عبارت دیگر آن متغیر در هر سطحی قابل دسترس است.

به مثال بالا دستور !global را اضافه کردیم:

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

با اینکار رنگ سلکتورp سبز میشود.

در نتیجه خروجی بدین شکل میباشد:

 
h1 {
  color: green;
}
p {
  color: green;
}