کار با متغیرها Variables در SASS

آموزش Sass – کار با متغیرها/Variables

توسعه دهندگان از متغیر به عنوان یک ظرف استفاده می کنند که مقادیر عددی، کاراکترهای مختلف و حتی آدرس حافظه را در خود نگه می دارند. مزیت اصلی متغیر، آن هم در Sass و CSS، این است که توسعه دهنده می تواند مقادیر موجود در متغیرها را مجددا در بخش های مختلف فایل تنظیم ظاهر صفحه یا همان stylesheet استفاده کند.

دستور نگارشی و نحوه ی استفاده از متغیر در Sass به این صورت می باشد:

$variable_name : some value;

همان طور که مشاهده می کنید متغیرها با علامت $ اعلان شده و به کاراکتر (;) ختم می شوند.

مثال کاربردی

مثال زیر نحوه ی استفاده از متغیر در فایل scss را نمایش می دهد:

< html >
   < head >
      < title >Variables< /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" >
         < h1 >Example using Variables< /h1 >
         < p >Sass is an extension of CSS that adds power and elegance to the basic language.< /p >
      < /div >
   < /body >
< /html >

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

style.scss
$txtcolor:#008000;
$fontSize: 20px;
p{
   color:$txtcolor;
   font-size:$fontSize;
}

با فراخوانی دستور زیر می توانید به Sass دستور دهید که بر روی محتوای فایل SASS نظارت داشته و هنگامی که تغییری رخ داد، CSS متناظر را نیز بروز رسانی نمایید:

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

پس از اجرای دستور فوق، فایل style.css با محتوای زیر ایجاد می شود:

style.css
p {
   color: #008000;
   font-size: 20px;
}

خروجی

مراحل زیر را طی کرده و خروجی را مشاهده نمایید:

• کد html فوق را در فایل variables.html ذخیره نمایید.
• فایل HTML را با مرورگر دلخواه باز نمایید. خروجی به این صورت به نمایش در می آید: