آموزش Variable Defaults در Sass

آموزش Sass – تنظیم مقادیر پیش فرض برای متغیرها (Variable Defaults)/ استفاده از پارامتر !default

شما می توانید با الصاق پارامتر (flag) !default به انتهای مقدار متغیر مورد نظر برای متغیر مقدار پیش فرض تعیین کنید. چنانچه از قبل مقداری به متغیر اختصاص داده شده باشد، مقدار مجددا به متغیر مورد نظر اختصاص نمی یابد، اما در صورت نداشتن مقدار اولیه، مقدار جدید به آن انتساب می یابد.

مثال کاربردی

< html >
   < head >
      < title >Variable Defaults< /title >
      < link rel="stylesheet" type="text/css" href="style.css" / >
      < link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" >
      < script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" >< /script >
      < script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" >< /script >
   < /head >
   < body >
      < div class="container" >
         < h2 >Example using Variable Defaults< /h2 >
         < p >Sass is an extension of CSS that adds power and elegance to the basic language..< /p >
      < /div >
   < /body >
< /html >

فایل style.scss را ایجاد نمایید.

$myval1: null;
$myval1: "Sass Developed by Natalie Weizenbaum and Chris Eppstein" !default;
p:after {
   content: $myval1;
}

می توانید با استفاده از دستور زیر به SASS اعلان نمایید که بر روی محتوای فایل SASS نظارت داشته و به مجرد تغییر در آن، کد CSS متناظر را نیز بروز رسانی کند.

sass --watch C:\ruby\lib\sass\style.scss:style.css

کد بالا را اجرا نمایید. فایل style.css با محتوای زیر به صورت خودکار ایجاد می شود.

p:after {
   content: "Sass Developed by Natalie Weizenbaum and Chris Eppstein";
}

خروجی

حال با طی کردن مراحل زیر از کد خود خروجی بگیرید:

• کد html بالا را در فایل var_defaults.html ذخیره کنید.
• فایل HTML را با مرورگر دلخواه باز نموده و نتیجه را مشاهده کنید.