Sass - Nhận xét

Trong chương này, chúng ta sẽ nghiên cứu về Sass Comments. Chú thích là các câu lệnh không thực thi, được đặt trong mã nguồn. Nhận xét làm cho mã nguồn dễ hiểu hơn. SASS hỗ trợ hai loại nhận xét.

Multiline comments- Chúng được viết bằng / * và * /. Nhận xét nhiều dòng được giữ nguyên trong đầu ra CSS.
Single line comments - Chúng được viết bằng //tiếp theo là bình luận. Nhận xét dòng đơn không được giữ nguyên trong đầu ra CSS.

Thí dụ

Ví dụ sau minh họa việc sử dụng các chú thích trong tệp 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>

Tiếp theo, tạo tệp 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; }

Bạn có thể yêu cầu SASS xem tệp và cập nhật CSS bất cứ khi nào tệp SASS thay đổi, bằng cách sử dụng lệnh sau:

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

Tiếp theo, thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau:

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

Đầu ra

Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -

Lưu mã html đã cho ở trên vào sass_comments.html tập tin.
Mở tệp HTML này trên trình duyệt, kết quả hiển thị như hình dưới đây.

Để nghiên cứu về phép nội suy trong các nhận xét nhiều dòng, hãy nhấp vào liên kết này .

Sass - Nội suy trong nhận xét nhiều dòng

Sự miêu tả

Nội suy trong các chú thích nhiều dòng được giải quyết trong CSS kết quả. Bạn có thể chỉ định các biến hoặc tên thuộc tính trong dấu ngoặc nhọn.

Cú pháp

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

Thí dụ

Ví dụ sau minh họa việc sử dụng phép nội suy trong các chú thích nhiều dòng trong tệp 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>

Tiếp theo, tạo tệp style.scss .

style.css

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

Bạn có thể yêu cầu SASS xem tệp và cập nhật CSS bất cứ khi nào tệp SASS thay đổi, bằng cách sử dụng lệnh sau:

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

Tiếp theo, thực hiện lệnh trên; nó sẽ tự động tạo tệp style.css với mã sau

style.css

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

Đầu ra

Hãy để chúng tôi thực hiện các bước sau để xem mã đã cho ở trên hoạt động như thế nào -

Lưu mã html đã cho ở trên vào sass_comments_interpolation.htm tập tin.
Mở tệp HTML này trên trình duyệt, kết quả hiển thị như hình dưới đây.