Sass - ความคิดเห็น

ในบทนี้เราจะศึกษาเกี่ยวกับ Sass Comments. ข้อคิดเห็นเป็นคำสั่งที่ไม่สามารถเรียกใช้งานได้ซึ่งอยู่ในซอร์สโค้ด ความคิดเห็นทำให้ซอร์สโค้ดเข้าใจง่ายขึ้น SASS รองรับความคิดเห็นสองประเภท

Multiline comments- สิ่งเหล่านี้เขียนโดยใช้ / * และ * / ความคิดเห็นหลายบรรทัดจะถูกเก็บรักษาไว้ในเอาต์พุต CSS
Single line comments - สิ่งเหล่านี้เขียนโดยใช้ //ตามด้วยความคิดเห็น ความคิดเห็นบรรทัดเดียวจะไม่ถูกเก็บรักษาไว้ในเอาต์พุต 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>

ถัดไปสร้างไฟล์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 ดูไฟล์และอัปเดต CSS เมื่อใดก็ตามที่ไฟล์ SASS เปลี่ยนแปลงโดยใช้คำสั่งต่อไปนี้ -

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 นี้ในเบราว์เซอร์ผลลัพธ์จะปรากฏดังที่แสดงด้านล่าง

หากต้องการศึกษาเกี่ยวกับการแก้ไขภายในความคิดเห็นแบบหลายบรรทัดให้คลิกที่ลิงค์นี้

Sass - การแก้ไขในความคิดเห็นหลายบรรทัด

คำอธิบาย

การแก้ไขภายในความคิดเห็นแบบหลายบรรทัดได้รับการแก้ไขใน CSS ที่เป็นผลลัพธ์ คุณสามารถระบุตัวแปรหรือชื่อคุณสมบัติภายในวงเล็บปีกกา

ไวยากรณ์

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

ตัวอย่าง

ตัวอย่างต่อไปนี้แสดงให้เห็นถึงการใช้การแก้ไขในความคิดเห็นแบบหลายบรรทัดในไฟล์ 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>

ถัดไปสร้างไฟล์style.scss

style.css

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

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

จากนั้นดำเนินการตามคำสั่งดังกล่าว มันจะสร้างไฟล์ style.cssโดยอัตโนมัติด้วยรหัสต่อไปนี้

style.css

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

เอาต์พุต

ให้เราทำตามขั้นตอนต่อไปนี้เพื่อดูว่าโค้ดข้างต้นทำงานอย่างไร -

บันทึกโค้ด html ที่ระบุไว้ข้างต้นใน sass_comments_interpolation.htm ไฟล์.
เปิดไฟล์ HTML นี้ในเบราว์เซอร์ผลลัพธ์จะปรากฏดังที่แสดงด้านล่าง