نحوه تغییر متغیر در فایل SASS و استفاده از آن

برای تعریف متغیر در فایل های SASS و استفاده از آنها ابتدا یک فایل sass رو بوجود بیارید (نحوه افزودن و استفاده از فایل های sass در ویژوال استودیو). برای تعریف متغیر از علامت $ استفاده می شود. به عنوان مثال در فایل sass زیر ما 3 متغیر را تعریف و مقداردهی می کنیم.

$myColor:red;
$myFontSize:20px;
$myWidth:200px;

خب حالا برای استفاده از متغیرها به راحتی میتونیم مثل کد زیر عمل کنیم :

فایل site.scss

$myColor:red;
$myFontSize:20px;
$myWidth:200px;

a{
    color:$myColor;
    font-size:$myFontSize;
    width:$myWidth;
}

در کدهای بالا فرض کردیم فایلی به نام site.scss داریم و کدهای بالا را در آن نوشته ایم. از این پس هر تگ a که داریم استایل بالا را به خود خواهد گرفت.

همچنین ما میتونیم مقادیر درون متغیرها رو هم تغییر بدیم. به مثال زیر توجه کنید :

$myColor:red;

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

در کدهای بالا متغیر myColor در ابتدا شامل رنگ قرمز می باشد. اما در تگ های h1 این رنگ تغییر خواهد کرد و به رنگ سبز نمایش داده خواهد شد.