متغیرها راهی برای ذخیره اطلاعات هستند که میتوانید بعداً دوباره از آنها استفاده کنید.
با Sass، میتوانید اطلاعات را در متغیرهایی ذخیره کنید، مانند:
- رشته ها
- اعداد
- رنگ ها
- بولی
- فهرست ها
- nulls
Sass از نماد $ و به دنبال آن یک نام برای اعلام متغیرها استفاده می کند:
Sass Variable Syntax:
$variablename: value;
مثال زیر 4 متغیر به نامهای myFont، myColor، myFontSize و myWidth را اعلام میکند.
پس از اعلام متغیرها، می توانید از متغیرها در هر کجا که می خواهید استفاده کنید:
SCSS Syntax:
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
بنابراین، هنگامی که فایل Sass ترجمه می شود، متغیرهای (myFont، myColor،
و غیره) و CSS معمولی را با مقادیر متغیر قرار داده شده در CSS مانند
این:
CSS Output:
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}
#container {
width: 680px;
}