Sass - Komentar

Dalam bab ini, kita akan mempelajari tentang Sass Comments. Komentar adalah pernyataan yang tidak dapat dieksekusi, yang ditempatkan dalam kode sumber. Komentar membuat kode sumber lebih mudah dipahami. SASS mendukung dua jenis komentar.

Multiline comments- Ini ditulis menggunakan / * dan * /. Komentar multiline dipertahankan dalam keluaran CSS.
Single line comments - Ini ditulis menggunakan //diikuti dengan komentar. Komentar baris tunggal tidak disimpan dalam keluaran CSS.

Contoh

Contoh berikut menunjukkan penggunaan komentar di file 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>

Selanjutnya, buat file 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; }

Anda dapat memberi tahu SASS untuk melihat file dan memperbarui CSS setiap kali file SASS berubah, dengan menggunakan perintah berikut -

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

Selanjutnya, jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut -

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

Keluaran

Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -

Simpan kode html yang diberikan di atas di sass_comments.html mengajukan.
Buka file HTML ini di browser, output ditampilkan seperti yang ditunjukkan di bawah ini.

Untuk mempelajari tentang interpolasi dalam komentar multiline, klik tautan ini .

Sass - Interpolasi dalam Komentar Multiline

Deskripsi

Interpolasi dalam komentar multiline diselesaikan di CSS yang dihasilkan. Anda dapat menentukan variabel atau nama properti dalam tanda kurung kurawal.

Sintaksis

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

Contoh

Contoh berikut menunjukkan penggunaan interpolasi dalam komentar multiline di file 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>

Selanjutnya, buat file style.scss .

style.css

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

Anda dapat memberi tahu SASS untuk melihat file dan memperbarui CSS setiap kali file SASS berubah, dengan menggunakan perintah berikut -

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

Selanjutnya, jalankan perintah di atas; itu akan membuat file style.css secara otomatis dengan kode berikut

style.css

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

Keluaran

Mari kita lakukan langkah-langkah berikut untuk melihat bagaimana kode yang diberikan di atas bekerja -

Simpan kode html yang diberikan di atas di sass_comments_interpolation.htm mengajukan.
Buka file HTML ini di browser, output ditampilkan seperti yang ditunjukkan di bawah ini.