Sass @import และ Partials

Sass สามารถทำให้โค้ด CSS อยู่ในสภาพDRY (DRY，Don't Repeat Yourself ไม่ให้ซ้ำเหมือนกัน

หนึ่งในวิธีเขียนโค้ด DRY คือ บันทึกโค้ดที่เกี่ยวข้องไว้ในไฟล์แยกต่างๆ

คุณสามารถใช้ส่วนต่างๆ ของ CSS ชิ้นเล็กเพื่อทำไฟล์เล็กๆ และนำไปใช้ในไฟล์ Sass อื่น ตัวอย่างเช่น ไฟล์นี้สามารถเป็นไฟล์รีเซ็ท ตัวแปร สี ตัวหนังสือ และอื่นๆ

การนำไฟล์เข้ามาใช้ Sass

เหมือนเดียวกับ CSS Sass ก็สนับสนุน @import คำสั่งนำไฟล์เข้ามาใช้

@import คำสั่งนำไฟล์เข้ามาใช้มีความสามารถที่จะให้สาระหนึ่งมีผลทั่วไปในไฟล์อื่น

เนื่องจากปัญหาประสิทธิภาพ @import คำสั่งนำไฟล์เข้ามาใช้มีข้อบกพร่องหลักเดียว; การเรียกใช้คำสั่งนี้จะทำให้มีการขอคำสั่ง HTTP ต่อไป! @import คำสั่งนำไฟล์เข้ามาใช้จะนำไฟล์เข้ามาใช้ใน CSS ดังนั้น จะไม่จำเป็นต้องทำการโทรโคมมิวนิเคชัน HTTP ต่อไป!

คำสั่งนำไฟล์เข้ามาใช้ Sass:

@import filename;

คำแนะนำ:คุณไม่จำเป็นต้องระบุนามสกุลไฟล์ คำสั่ง Sass จะเห็นเองว่าคุณหมายถึง .sass หรือ .scss ไฟล์ คุณยังสามารถนำไฟล์ CSS เข้ามาใช้ด้วย@import คำสั่งนำไฟล์เข้ามาใช้ หลังจากนั้นจะสามารถใช้ตัวแปรหรือ mixin ที่ถูกนำเข้ามาใช้ในไฟล์หลัก

คุณสามารถนำไฟล์เข้ามาใช้กี่ไฟล์ก็ได้ในไฟล์หลัก

ตัวอย่าง

@import "variables";
@import "colors";
@import "reset";

เราจะดูตัวอย่างหนึ่ง: ฉันตั้งตารางชื่อ "reset.scss" ซึ่งเป็นไฟล์รีเซ็ทที่มีลักษณะเช่นนี้:

คำสั่ง SCSS (reset.scss):

html,
body,
ul,
ol {
  margin: 0;
  padding: 0;
}

ขณะนี้เราจะนำไฟล์ "reset.scss" ที่ถูกนำเข้ามาเข้าไปในไฟล์ "standard.scss"

เราทำแบบนี้: ทั่วไปแล้วจะเพิ่มในด้านบนของไฟล์ @import ให้คำสั่งมีผลทั่วไปในโลก

คำสั่ง SCSS (standard.scss):

@import "reset";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

ดังนั้น เมื่อไฟล์ "standard.css" ถูกแปลคำสั่ง การออกเสียง CSS จะเหมือนดังนี้:

การออกเสียง CSS:

html, body, ul, ol {
  margin: 0;
  padding: 0;
}
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: red;
}

Sass Partials (ไฟล์บางส่วน)

โดยมาตรฐาน Sass จะแปลคำสั่งในแบบ .scss อัตโนมัติ แต่เมื่อนำไฟล์เข้ามาใช้ คุณไม่จำเป็นต้องแปลคำสั่งในไฟล์โดยตรง

Sass มีกลไกหนึ่ง: หากคุณใช้ขีดใต้สายเริ่มต้นชื่อไฟล์ โดยที่ Sass จะไม่ทำการแปลงไฟล์นั้น ไฟล์ที่มีชื่อดังกล่าวนี้ใน Sass กลายเป็น partials

Sass มีกลไกหนึ่ง หากคุณใช้ขีดใต้สายเริ่มต้นชื่อไฟล์ โดยที่ Sass จะไม่ทำการแปลงไฟล์นั้น ไฟล์ที่มีชื่อดังกล่าวนี้ใน Sass กลายเป็น partials

ดังนั้น ไฟล์ partial Sass ใช้ชื่อที่มีขีดใต้สายตั้งแต่ต้น:

Sass Partial การใช้งานภาษาบวก:_filename

;

ตัวอย่าง

"_colors.scss":

$myPink: #EE82EE;
$myBlue: #4169E1;
$myGreen: #8FBC8F;

ตอนนี้ หากคุณนำเข้าไฟล์ partial นี้ กรุณาละเลยขีดใต้สายต่อไป ความเข้าใจของ Sass คือมันควรนำเข้าไฟล์ "_colors.scss":

ตัวอย่าง

@import "colors";
body {
  font-family: Helvetica, sans-serif;
  font-size: 18px;
  color: $myBlue;
}