آموزش Interpolation در selector و property در Sass

آموزش Sass – Interpolation یا درج متغیر در selector ها و property ها

می توانید با درج متغیر مورد نظر داخل دستور نگارشی #{} (سینتکس interpolation)، آن متغیر را در selector یا (اسم property) property دلخواه تزریق نمایید. نحوه ی استفاده از آن در قطعه کد زیر به نمایش گذاشته شده است:

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

قطعه کد فوق به دستور زیر کامپایل می شود:

p.foo {
  border-color: blue;
}

این امکان نیز وجود دارد که با استفاده از ساختار نگارشی #{}، SassScript (برای مثال اسم متغیر) را داخل مقدار property ها تزریق نمایید. در بیشتر مواقع این کار تفاوت چندانی با استفاده ی مستقیم از خود متغیر ندارد، با این وجود زمانی که از #{} استفاده می شود، تمامی عملیات اطراف آن در کد به مثابه ی کد ساده ی CSS در نظر گرفته می شود. مثال:

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

قطعه کد فوق به دستور زیر کامپایل می شود:

p {
  font: 12px/30px;
}

مثال کاربردی

< html >
   < head >
      < title >Interpolation< /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 Interpolation< /h2 >
         < p >SASS stands for Syntactically Awesome Stylesheet...< /p >
      < /div >
   < /body >
< /html >

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

p:after {
   content: "I have #{8 + 2} books on SASS!";
}

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

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

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

p:after {
   content: "I have 10 books on SASS!";
}

خروجی

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

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