متغیرها (Variables)
در این بخش با متغیرهای Sass آشنا می شوی. «متغیر (Variable)» یعنی جایگاهی برای نگهداری یک مقدار. سپس می توانی آن مقدار را هرجا نیاز بود استفاده کنی. مثل وقتی که اسم تیم مدرسه را یک بار می نویسی و همه جا همان را صدا می زنی.
متغیرها در Sass
در Sass با نماد $ متغیر می سازیم. می توانی رشته، عدد، رنگ، بولین، لیست یا null نگه داری. بنابراین تغییرات گسترده سریع و دقیق انجام می شود.
سینتکس تعریف متغیر
$variablename: value;
مثال پایه با چهار متغیر
$myFont: Helvetica, sans-serif;
$myColor: red;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}
نکته: هنگام «ترنس پایل (Transpile)» متغیرها جایگزین مقدار واقعی می شوند. ترنس پایل یعنی تبدیل کد از یک زبان به زبان دیگر.
اسکوپ متغیرها در Sass
«اسکوپ (Scope)» یعنی محدوده دسترسی. متغیرها فقط در همان سطح تو در تویی که تعریف شده اند دیده می شوند. بنابراین مقدار داخل یک قانون فقط همان جا معتبر است.
$myColor: red;
h1 {
$myColor: green;
color: $myColor;
}
p {
color: $myColor;
}
اینجا رنگ <p> قرمز می ماند. زیرا مقدار سبز فقط داخل قانون <h1> معتبر است.
سراسری کردن با !global
با افزودن «!global» متغیر را سراسری می کنی. سراسری یعنی در همه سطوح قابل دسترسی است. بنابراین تغییر در یک نقطه، همه جا اثر می گذارد.
$myColor: red;
h1 {
$myColor: green !global;
color: $myColor;
}
p {
color: $myColor;
}
نکته: بهتر است متغیرهای سراسری را بیرون از هر قانون تعریف کنی. این کار نظم پروژه را حفظ می کند.
تمرین سه مرحله ای
- سه رنگ دلخواه را در متغیرها ذخیره کن.
- رنگ پس زمینه هدر و منو را با آن ها ست کن.
- یک بار رنگ پایه را عوض کن و نتیجه را ببین.
برای مسیر بعدی، صفحه نصب Sass را مرور کن. همچنین بخش تو در تو نویسی در Sass را بخوان. اگر لازم شد، همین صفحه متغیرهای Sass را دوباره بررسی کن.
جمع بندی سریع
- متغیر با
$ساخته می شود. - اسکوپ پیش فرض محلی است.
!globalمتغیر را سراسری می کند.- ترنس پایل، Sass را به CSS تبدیل می کند.