آموزش Comments در SASS

آموزش SASS – Comments در SASS

در مبحث حاضر، درباره ی Comments و توضیحات کد در Sass می پردازیم. Comments دستورات غیرقابل اجرا هستند که توسعه دهنده آن ها را منحصرا جهت ارائه ی توضیحی درباره ی دستورات اپلیکیشن و فهم آسان آن ها برای خواننده ی کد، در متن برنامه (source code) درج می کند. SASS از دو نوع Comments به شرح زیر پشتیبانی می کند:

• Comment های چندخطی (توضیحات چندخطی): این نوع کامنت ها بین دو کاراکتر */ و /* محصور شده و در خروجی نهایی CSS نمایش داده می شوند.
• Comment های تک خطی – این کامنت ها پس از کاراکتر // درج می شوند. کامنت های تک خطی در خروجی نهایی CSS به نمایش در نمی آید.

مثال کاربردی

< html >
  < head >
    < title >SASS comments< /title >
    < link rel="stylesheet" type="text/css" href="style.css" / >
  < /head >
  < body >
    < h1 >Welcome to TutorialsPoint< /h1 >
    < a href="http://www.tutorialspoint.com/" >TutorialsPoint< /a >
   < /body >
< /html >

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

                            style.scss
/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }
// These comments are in single line
// They will not appear in the CSS output,
// since they use the single-line comment syntax.
a { color: blue; }

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

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

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

style.css
/* This comment is
 * more than one line long
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body {
   color: black; }
a {
   color: blue; }

خروجی

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

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

جایگذاری و درج متغیر یا property در Comment های چندخطی/ Interpolation in Multiline Comments

شما می توانید مقدار یک متغیر یا property را با قرار دادن اسم آن داخل #{ } در یک comment چندخطی و در خروجی نهایی CSS نمایش دهید. برای این منظور کافی است اسم متغیر/Property را داخل #{ } قرار داده و در کامنت چند خطی درج نمایید.

نحوه ی نگارش آن را در زیر مشاهده می کنید (Syntax):

$var : "value";
/* multiline comments #{$var} */

مثال زیر استفاده از interpolation را به صورت کاربردی به نمایش می گذارد:

< html >
 < head >
   < title >SASS comments< /title >
   < link rel="stylesheet" type="text/css" href="style.css" / >
 < /head >
   < body >
     < h1 >Welcome to TutorialsPoint< /h1 >
     < p >This is an example for Interpolation in SASS.< /p >
   < /body >
< /html >

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

style.css
/* Framework version for the generated CSS is 7.8. */

خروجی

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

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