ทำไมใส่ชื่อไฟล์“ _” หรือ“ _” ไว้ข้างหน้าใน scss / css


147

ทำไมต้องใส่_ชื่อไฟล์ไว้ใน scss?

_filename.scss- ทำไมมันถึงต้องการ_?

คำตอบ:


147

_ (ขีดล่าง) เป็นบางส่วนสำหรับ scss นั่นหมายถึงสไตล์ชีทที่จะนำเข้า (@import) ไปยังสไตล์ชีทหลักเช่น styles.scss ข้อดีของการใช้งาน partials คือคุณสามารถใช้ไฟล์จำนวนมากเพื่อจัดระเบียบโค้ดของคุณและทุกอย่างจะถูกรวบรวมไว้ในไฟล์เดียว


3
แต่import '_file';และimport '_file';ทำสิ่งเดียวกันถูกต้องหรือไม่
tom10271

20
@aokaddaoc ดูเหมือนว่าคุณเขียนเส้นรหัสเดียวกัน :)
Amit

20
โอ้ขอบคุณสำหรับการชี้ให้เห็นความผิดพลาดของฉัน "แต่import '_file';และimport 'file';สิ่งเดียวกันใช่มั้ย"
tom10271

5
ถ้าฉันจัดโครงสร้างไฟล์ของฉันในแบบที่ฉันส่งเพียงไฟล์เดียวไปยังคอมไพเลอร์ / ตัวประมวลผลล่วงหน้าของฉันทำไมจึงมีความสำคัญหากไฟล์ของฉันถูกเติมด้วย_? ฉันกำลังพิจารณาลบขีดเส้นใต้ออกจากชื่อไฟล์ของฉัน ไม่ว่าไฟล์ Sass จะเป็นบางส่วน (เช่นชิ้นส่วนของโค้ดที่นำเข้าได้) ควรขึ้นอยู่กับที่ตั้งในสถาปัตยกรรมของโครงการของคุณไม่ใช่ว่าไฟล์จะมีชื่ออย่างไร
ESR

1
@ESR: ตกลงคุณสมบัตินี้จะรู้สึกล้าสมัยเล็กน้อยในสภาพแวดล้อมการพัฒนาเว็บที่ทันสมัย แน่นอนว่าคุณไม่จำเป็นต้องใช้_s หากคุณมีโครงสร้างโครงการในวิธีที่เหมาะสม
Chris Jaynes

55

ไฟล์ sass ที่ขึ้นต้นด้วยขีดล่างเป็นบางส่วน เป็นวิธีที่ดีในการแยกสไตล์ของคุณออกเป็นส่วนตรรกะ @importไฟล์เหล่านี้ทั้งหมดได้รับการรวมสะสมเมื่อคุณใช้

จากคู่มือภาษา Sass:

คุณสามารถสร้างไฟล์ Sass บางส่วนที่มีตัวอย่างเล็ก ๆ ของ CSS ที่คุณสามารถรวมไว้ในไฟล์ Sass อื่น ๆ นี่เป็นวิธีที่ยอดเยี่ยมในการทำให้ CSS เป็นโมดูลและช่วยให้ง่ายต่อการบำรุงรักษา บางส่วนเป็นเพียงไฟล์ Sass ที่มีเครื่องหมายขีดเส้นใต้ คุณอาจตั้งชื่อบางอย่างเช่น _partial.scss ขีดล่างช่วยให้ Sass ทราบว่าไฟล์เป็นไฟล์บางส่วนเท่านั้นและไม่ควรสร้างเป็นไฟล์ CSS Sass partials ใช้กับ @import directive

http://sass-lang.com/guide


13

เมื่อคุณใส่ "_" ไว้หน้าชื่อไฟล์ไฟล์นั้นจะไม่ถูกสร้างลงใน CSS เว้นแต่ว่าคุณจะนำเข้าไฟล์ดังกล่าวไปยังไฟล์ sass อื่นซึ่งไม่ใช่บางส่วน

สมมติว่าโครงสร้างโฟลเดอร์ของคุณเป็นเช่นนี้

/scss
 style.scss
 _list.scss
/css

ถ้าคุณเรียกใช้คำสั่ง

sass --watch scss:css

ไฟล์ style.css และ style.css.map เท่านั้นที่จะถูกสร้างขึ้นคอมไพเลอร์ sass จะละเว้น _list.scss โดยไม่แปลงเนื้อหาเป็นไฟล์ CSS

/scss
 style.scss
 _list.scss
/css
 style.css
 style.css.map

วิธีเดียวที่คุณสามารถใช้งาน partials ได้คือการนำเข้าไฟล์เหล่านั้นไปยังไฟล์. scss อีกไฟล์ด้วย

@import 'list.scss';

หากคุณลบ '_' หน้า _list.scss ผลลัพธ์ของคำสั่งจะเป็น

/scss
 style.scss
 list.scss
/css
 style.css
 style.css.map
 list.css
 list.css.map

วัตถุประสงค์หลักของการใช้งาน partials คือการแบ่งรหัส CSS ของเราออกเป็นหลาย ๆ ส่วนซึ่งง่ายต่อการบำรุงรักษา หวังว่านี่จะช่วยได้ ขอบคุณ


2
นี่คือคำตอบที่ถูกต้อง แต่คุณยังไม่ได้กล่าวถึงกรณีพิเศษของ _index.scss: sass-lang.com/documentation/at-rules/import#index-files
tiffon

11

ไฟล์ที่มี _ (ขีดล่าง) จะถูกละเว้นโดยคอมไพเลอร์ อย่างไรก็ตามไฟล์เหล่านั้นจะถูกนำเข้าสู่ไฟล์ SCSS หลักเดียว (เช่น styles.scss) ซึ่งจริงๆแล้วเป็นไฟล์ที่คอมไพล์แล้ว (ไม่มีใน _ (ขีดล่าง) ในชื่อของมัน)

เป้าหมายสุดท้ายคือการรวบรวมไฟล์ SCSS เพียงไฟล์เดียวและมีไฟล์ CSS เพียงไฟล์เดียวซึ่งเป็นผลมาจากไฟล์ดังกล่าวซึ่งมีข้อดีหลายประการ


โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.