۲۶
اردیبهشت

جلسه ۰۶ : آموزش کار با کامنت ها در Sass

دسته‌بندی‌ها :

جزئیات
نوع محتواآموزشی

فهرست

مقدمه

با سلام خدمت کاربران گرامی سایت پی وی لرن و کاربران و علاقمندان به دوره آموزش Sass. در جلسه گذشته با اکستنشن ها در Sass آشنا شدیم و با تعدادی از CSS اکستنشن های کاربردی آشنا شدیم. در این جلسه آموزش کار با کامنت ها در Sass را به علاقمندان این دوره ارائه می نماییم.

آموزش کار با کامنت ها در Sass

در آموزش کار با کامنت ها در Sass قرار است با کامنت ها (Comments) ها آشنا شویم.
کامنت ها عبارت های غیر قابل اجرایی هستند که در کد منبع قرار می گیرند.
کامنت ها کد منبع را آسان تر درک می کنند.
SASS از دو کامنت پشتیبانی می کند :

کامنت های چند خطی
این کامنت ها با */ و /* نوشته می شوند.
کامنت های چند خطی در خروجی CSS حفظ می شوند.
کامنت های تک خطی
این کامنت ها با استفاده از // نوشته شده و بعد از آن ها قرار می گیرند.
کامنت های تک خطی در خروجی CSS حفظ نمی شوند.

مثال

مثال زیر نشان می دهد که چگونه از کامنت ها در فایل SCSS استفاده کنید.

مثال :

<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>

<html>

<head>

<title>SASS comments</title>

</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; }

/* 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 بخواهید که فایل CSS را بررسی نماید تا هر وقت که فایل SASS تغییر کرد با استفاده از دستور زیر آن را به روز رسانی نماید.

مثال :

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

1	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; }

/* 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; }

خروجی

اجازه دهید مراحل زیر را انجام دهیم تا ببینیم کدام یک از کدهای بالا کار می کنند.

کد داده شده فوق را در فایل sass_comments.html ذخیره کنید.
این فایل HTML را مطابق تصویر زیر در یک مرورگر باز کنید.

sass installation step9

Interpolation در کامنت های چند خطی

Interpolating در کامنت های چند خطی در نتیجه CSS حل می شود.
می توانید متغیرها یا نام property یا ویژگی را در داخل curly braces مشخص کنید.

Syntax

مثال :

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

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

مثال

مثال زیر استفاده از interpolation را در کامنت های چند خطی در فایل SCSS را نشان می دهد.

مثال :

<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>

<html>

<head>

<title>SASS comments</title>

</head>

<body>

<h1>Welcome to TutorialsPoint</h1>

<p>This is an example for Interpolation in SASS.</p>

</body>

</html>

در مرحله بعد، فایل style.scss را ایجاد کنید.

style.scss

مثال :

$version: "7.8";
/* Framework version for the generated CSS is #{$version}. */

1 2	$version: "7.8"; /* Framework version for the generated CSS is #{$version}. */

مثال :

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

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

سپس کد بالا را اجرا نمایید؛ اجرای آن با استفاده از کد زیر فایل style.css را به صورت خودکار ایجاد می کند.

style.scss

مثال :

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

1	/* Framework version for the generated CSS is 7.8. */

خروجی

اجازه دهید مراحل زیر را انجام دهیم تا ببینیم کدام یک از کدهای بالا کار می کنند.

کد داده شده فوق را در فایل sass_comments.html ذخیره کنید.
این فایل HTML را مطابق تصویر زیر در یک مرورگر باز کنید.

sass commentss

کلام آخر

در این جلسه آموزش کار با کامنت ها در Sass را ارائه نمودیم.
در جلسه بعد با آموزش SassScript ها با شما همراه خواهیم بود.
با پی وی لرن همراه باشید.

جلسه ۰۵ : آموزش کار با اکستنشن ها در Sass

QR: جلسه ۰۶ : آموزش کار با کامنت ها در Sass

به اشتراک بگذارید

Comments ها در sass ,آموزش sass ,آموزش سَس ,آموزش کار با کامنت ها در Sass ,کامنت ها در Sass

دیدگاه کاربران

تعداد دیدگاه : 0

پی وی لرن – آموزش برنامه نویسی و طراحی وب سایت

دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)

جلسه ۰۶ : آموزش کار با کامنت ها در Sass

مقدمه

آموزش کار با کامنت ها در Sass

مثال

style.scss

style.css

خروجی

Interpolation در کامنت های چند خطی

Syntax

مثال

style.scss

style.scss

خروجی

کلام آخر

لیست مطالب دوره

مطالب ویژه

دسته های اصلی

برگه ها

بلاگ