Sass Best Practices เคล็ดลับและเครื่องมือสำหรับนักพัฒนา

เหมือนกับที่ jQuery ปฏิวัติจาวาสคริปต์วานิลลา, Sass ได้ปฏิวัติ CSS ของ vanilla. นักพัฒนาส่วนใหญ่ที่เรียนรู้ Sass ยอมรับว่าพวกเขาไม่ต้องการกลับไป หลายคนยอมรับว่าปัญหาที่ใหญ่ที่สุดของนักพัฒนาใหม่คือ ทาง พวกเขาใช้ Sass ไม่ใช่ Sass เอง.

ฉัน scoured เว็บและรวบรวมบทความนี้จาก แนวทางปฏิบัติที่ดีที่สุดสำหรับการเขียนรหัส Sass ที่ขยายได้และนำกลับมาใช้ใหม่ได้. ข้อเสนอแนะมาจากความคิดเห็นของฉันและจากเว็บไซต์ที่เชื่อถือได้เช่นแนวทาง Sass.

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

การจัดระเบียบไฟล์

จุดเริ่มต้นที่ดีที่สุดในการพัฒนา Sass คือการจัดระเบียบไฟล์ หากคุณเป็นโค้ดแบบแยกส่วนอยู่แล้วคุณควรเข้าใจคุณค่าของการนำเข้าและชิ้นส่วน (เพิ่มเติมในภายหลัง).

แต่ตอนนี้ลองมาดูตัวอย่างโครงสร้างไฟล์นี้จาก DoCSSa ฉันได้สร้างโครงสร้างไฟล์ขึ้นใหม่ซึ่งคุณสามารถดูด้านล่าง:

นี่เป็นเพียงข้อเสนอแนะและเป็นหนึ่งในหลาย ๆ วิธีที่คุณสามารถจัดระเบียบไฟล์ของคุณ คุณสามารถค้นหาวิธีอื่น ๆ ที่ใช้โครงสร้างโฟลเดอร์ที่แตกต่างกันเช่น “Globals” สำหรับ SCSS ทั่วทั้งไซต์และ “หน้า” สำหรับ SCSS เฉพาะหน้า.

มาดูลักษณะองค์กรที่แนะนำนี้เพื่อตรวจสอบวัตถุประสงค์ของแต่ละโฟลเดอร์:

• / Globals - มีไฟล์ Sass ที่นำไปใช้กับไซต์เช่นการพิมพ์สีและกริด
• / ชิ้นส่วน - มีไฟล์ Sass ที่มีลักษณะส่วนประกอบเช่นปุ่มตารางหรือฟิลด์อินพุต
• / ส่วน - มีไฟล์ Sass เฉพาะสำหรับหน้าหรือพื้นที่เฉพาะบนหน้า (อาจทำงานได้ดีขึ้นเมื่อรวมเข้ากับ / components / โฟลเดอร์)
• / utils - มียูทิลิตี้ของบุคคลที่สามเช่น Normalize ที่สามารถอัปเดตแบบไดนามิกด้วยเครื่องมือเช่น Bower.
• main.scss - ไฟล์ Sass หลักในโฟลเดอร์รูทที่อิมพอร์ตไฟล์อื่นทั้งหมด.

นี่เป็นเพียงจุดเริ่มต้นพื้นฐานและมีพื้นที่เหลือเฟือสำหรับขยายความคิดของคุณ.

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

Sass partials มีความสำคัญต่อการปฏิบัติที่ดีที่สุดในปัจจุบัน สิ่งเหล่านี้ได้รับการแนะนำอย่างสูงจากทีมออกแบบของ Zurb และโดยนักพัฒนามืออาชีพอื่น ๆ.

นี่คือคำพูดจากเว็บไซต์ Sass ที่อธิบายบางส่วน:

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

ดูที่โพสต์อื่น ๆ เหล่านี้เกี่ยวกับโครงสร้างไฟล์ Sass:

• ฉันจัดโครงสร้างโครงการ Sass ของฉันอย่างไร
• Aesthetic Sass: สถาปัตยกรรมและองค์กรสไตล์
• โครงสร้างไดเรกทอรีที่ช่วยให้คุณรักษารหัสของคุณ

กลยุทธ์การนำเข้า

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

จุดเริ่มต้นที่ดีที่สุดคือแผ่นกลมที่มีการนำเข้าตัวแปรและมิกซ์อินด้วยกัน นักพัฒนาหลายคนชอบที่จะแยกตัวแปรและมิกซ์อิน แต่สิ่งนี้ลงมาเพื่อความหมาย.

โปรดทราบว่า mixins คือ วิธีการนำเข้าหรือค่อนข้างซ้ำรหัส Sass. มันมีพลังเหลือเชื่อ แต่ไม่ควรใช้กับ “คงที่” รหัส. โปรดทราบว่ามีความแตกต่างระหว่างมิกซ์อินขยายและตัวยึดซึ่งทั้งหมดใช้ในการพัฒนา Sass.

มิกซ์อินจะใช้ดีที่สุดกับค่าไดนามิกที่ส่งผ่านไปยังมิกซ์อินสำหรับการแก้ไขรหัส ตัวอย่างเช่นตรวจสอบ Sass มิกซ์อินนี้ที่สร้างการไล่ระดับสีพื้นหลังระหว่างสองสี.

@mixin linearGradient ($ top, $ bottom) background: $ top; / * เบราว์เซอร์เก่า * / พื้นหลัง: -moz-linear-gradient (ด้านบน, $ top 0%, $ bottom 100%); / * FF3.6 + * / background: -webkit-gradient (เส้นตรง, ด้านบนซ้าย, ล่างซ้าย, สีหยุด (0%, $ top), สีหยุด (100%, $ bottom)); / * Chrome, Safari4 + * / background: -webkit-linear-gradient (ด้านบน, $ top 0%, $ bottom 100%); / * Chrome10 +, Safari5.1 + * / background: -o-linear-gradient (ด้านบน, $ top 0%, $ bottom 100%); / * Opera 11.10+ * / background: -ms-linear-gradient (ด้านบน, $ top 0%, $ bottom 100%); / * IE10 + * / background: linear-gradient (ไปด้านล่าง, $ top 0%, $ bottom 100%); / * W3C * / ตัวกรอง: progid: DXImageTransform.Microsoft.gradient (startColorstr = "# ffffff", endColorstr = "# 000000", GradientType = 0); / * IE6-9 * /

mixin ใช้สองค่า: สีด้านบนและสีด้านล่าง คุณสามารถเขียนมิกซ์อินที่แตกต่างกันสำหรับการไล่ระดับสีที่แตกต่างกันซึ่งรวม 3 หรือ 4+ สีที่ต่างกัน สิ่งนี้ช่วยให้คุณสามารถนำเข้าและโคลนรหัส mixin ในขณะที่เปลี่ยนพารามิเตอร์สำหรับตัวเลือกที่กำหนดเอง.

ตัวอย่างจาก Code Responsible มีลักษณะเช่นนี้:

.ปุ่ม @ รวมถึง LinearGradient (#cccccc, # 666666); 

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

ในขณะที่ Sass มีวิธี @import เพียงวิธีเดียวฉันได้รวมมิกซ์อินและตัวยึดเพื่อแสดงความยืดหยุ่นของโค้ดที่สามารถเขียนในไฟล์เดียว แต่รวมไว้ที่ใดก็ได้.

เมื่อสร้างโครงสร้างการนำเข้าเพียงอย่าลืมทำตามแนวคิดของการเข้ารหัสแบบ DRY (อย่าทำซ้ำตัวเอง).

อนุสัญญาการตั้งชื่อ

กฎทั่วไปสำหรับการตั้งชื่อแบบแผนใช้กับตัวแปรฟังก์ชั่นและมิกซ์อิน เมื่อตั้งชื่ออะไรใน Sass ก็จะแนะนำให้ ใช้อักษรตัวพิมพ์เล็กทั้งหมดด้วยขีดกลางเพื่อแยก.

ไวยากรณ์รหัส Sass ขึ้นอยู่กับชุดกฎของแนวทาง CSS ต่อไปนี้เป็นแนวทางปฏิบัติที่ดีที่สุดบางข้อที่ควรทราบ:

• เยื้องช่องว่างสอง (2) ไม่มีแท็บ
• นึกคิดเส้นกว้าง 80 ตัวอักษรหรือน้อยกว่า
• การใช้ช่องว่างที่สื่อความหมาย
• ใช้ความคิดเห็นเพื่ออธิบายการทำงานของ CSS

รายการเหล่านี้ไม่จำเป็นสำหรับรหัส Sass ที่ถูกต้อง แต่คำแนะนำเหล่านี้มาจากนักพัฒนามืออาชีพที่ พบว่าชุดกฎเหล่านี้ให้ประสบการณ์การเข้ารหัสที่สม่ำเสมอที่สุด.

แต่ในส่วนที่เกี่ยวกับการตั้งชื่ออนุสัญญาคุณอาจท้ายด้วยโครงสร้างที่แตกต่างกันสองแบบ: หนึ่งชื่อสำหรับ Sass และอีกชื่อหนึ่งสำหรับชื่อคลาส CSS นักพัฒนาบางคนชอบ BEM มากกว่าคำแนะนำ Sass ไม่มีอย่างใดอย่างหนึ่งมากขึ้นหรือน้อยลงถูกต้อง; แตกต่างกับขั้นตอนการปฏิบัติการที่แตกต่างกัน.

ปัญหาคือ BEM นั้นไม่สามารถใช้งานได้ดีกับตัวแปร Sass หรือมิกซ์อินเพราะพวกเขาไม่มีโครงสร้าง block / element / modifier (BEM) ฉันเองชอบใช้การตั้งชื่อ Sass แต่คุณสามารถลองอะไรก็ได้จาก camelCase ไปจนถึงไวยากรณ์ภายในของคุณเอง.

เมื่อจัดระเบียบตัวแปรและมิกซ์อินของคุณก็แนะนำให้ แยกออกเป็นหมวดหมู่จากนั้นเรียงตามลำดับตัวอักษร. สิ่งนี้ทำให้การแก้ไขง่ายขึ้นมากเพราะคุณรู้ว่าจะหาอะไรเจอ.

ตัวอย่างเช่นหากต้องการเปลี่ยนสีของลิงก์คุณต้องเปิดไฟล์ตัวแปร (อาจจะเป็น _variables.scss) และค้นหาส่วนสำหรับตัวแปรสี จากนั้นค้นหาลิงก์ตามชื่อ (ลิงก์ส่วนหัวลิงก์ข้อความ ฯลฯ ) และอัปเดตสี ง่าย!

เพื่อให้เข้าใจถึงวิธีการจัดโครงสร้างสารบัญสำหรับไฟล์ Sass ของคุณให้ตรวจสอบไฟล์การตั้งค่าของมูลนิธิ.

 // พื้นฐานสำหรับการตั้งค่าไซต์ // ----------------------------- // // สารบัญ: // // 1 . Global // 2. เบรกพอยต์ // 3. The Grid // 4. Base Typography // 5. ผู้ช่วยเหลือด้านการพิมพ์ ... // 1. Global // --------- $ global-font-size: 100 %; $ global-width: rem-calc (1200); $ ความสูงทั่วโลก: 1.5; // ฯลฯ

การตั้งชื่ออื่นที่เกี่ยวข้องกับการปฏิบัติ เบรกพอยต์ตอบสนอง. เมื่อตั้งชื่อจุดพัก Sass พยายามหลีกเลี่ยงชื่อเฉพาะอุปกรณ์ มันจะดีกว่าถ้าจะเขียนชื่อเช่น small, med, lg และ xlg เพราะพวกมัน สัมพันธ์กัน.

สิ่งนี้จะดีกว่าสำหรับความสัมพันธ์ภายในระหว่างเบรกพอยต์ แต่ก็เหมาะสำหรับทีมที่นักพัฒนาอาจไม่ทราบว่าอุปกรณ์ใดเกี่ยวข้องกัน.

สำหรับการใส่ชื่อจริง ๆ ขอแนะนำให้คุณ จงเจาะจงให้มากที่สุดเท่าที่จะทำได้โดยไม่มีตัวแปรที่มีความยาวเป็นพิเศษ. คุณควร ใช้หลักการตั้งชื่อทั่วทั้งไซต์ซึ่งง่ายต่อการจดจำ ในขณะที่การเข้ารหัส.

ให้ข้อตกลงการตั้งชื่อเฉพาะสำหรับทุกสิ่งเช่นสี, ระยะขอบ, สแต็คแบบอักษรและความสูงบรรทัด ไม่เพียง แต่จำชื่อได้อย่างรวดเร็วเท่านั้น ทำให้งานของคุณง่ายขึ้นเมื่อเขียนชื่อตัวแปรใหม่ที่ต้องตรงกับไวยากรณ์ที่มีอยู่.

แต่มี เส้นแบ่งระหว่างความจำเพาะและการบิด. การฝึกฝนจะช่วยให้คุณค้นพบบรรทัดนั้นและการเขียนชื่อที่น่าจดจำมากขึ้นทำให้ง่ายต่อการคัดลอกรหัสไปยังโครงการอื่น ๆ.

การทำรังและวนรอบ

เทคนิค Sass ทั้งสองนี้นั้นแตกต่างกันมากในการทำงาน แต่ทั้งคู่ก็มี ความสามารถในการถูกทารุณกรรมหากไม่ได้ใช้อย่างมาก.

การทำรัง เป็นกระบวนการของ เพิ่มตัวเลือกที่ซ้อนกันผ่านการเยื้องเพื่อสร้างความเฉพาะเจาะจงมากขึ้นด้วยรหัสที่น้อยลง. Sass มีคู่มือการซ้อนซึ่งแสดงตัวอย่างของการซ้อนโค้ดในการทำงาน แต่มันง่ายที่จะถูกกำจัดออกโดยการทำรัง หากคุณ overzealous คุณสามารถท้ายด้วยรหัสที่มีลักษณะเช่นนี้:

body div.content div.container … ร่างกาย div.content div.container div.articles … ร่างกาย div.content div.container div.arttain> div.post … 

เฉพาะเจาะจงเกินไปและแทบจะเป็นไปไม่ได้ที่จะเขียนทับรหัสประเภทนี้เอาชนะจุดประสงค์ของสไตล์ชีตเรียงซ้อน.

การข้ามคำแนะนำ SitePoint นี้คุณจะพบกฎทองสามข้อสำหรับการทำรัง:

• อย่าลงลึกเกินกว่า 3 ระดับ.
• ตรวจสอบให้แน่ใจว่าเอาต์พุต CSS สะอาดและใช้ซ้ำได้.
• ใช้การซ้อนเมื่อเหมาะสมแล้วไม่ใช่เป็นตัวเลือกเริ่มต้น.

ผู้พัฒนา Josh Broton แนะนำให้ทำรังเมื่อจำเป็นให้ย่อหน้าที่เหลือเป็นกฎไวยากรณ์ทั่วไป.

การเยื้องตัวเลือกของคุณจะไม่ทำให้เกิดลักษณะพิเศษ CSS แบบเรียงซ้อนใด ๆ แต่คุณจะมีเวลาที่ง่ายกว่าในการข้ามการระบุไฟล์ Sass ของคุณว่าคลาสใดเกี่ยวข้องกัน.

ลูปยังสามารถ จะใช้มากเกินไปถ้าไม่ได้ใช้อย่างถูกต้อง. สาม Sass ลูปคือ @สำหรับ, @while, และ @แต่ละ. ฉันจะไม่ลงรายละเอียดเกี่ยวกับวิธีการทำงานทั้งหมด แต่ถ้าคุณสนใจลองดูโพสต์นี้.

แต่ฉันต้องการที่จะครอบคลุม สำหรับการใช้ลูป และวิธีการทำงานใน Sass ควรใช้รหัสเหล่านี้เพื่อประหยัดเวลาในการเขียนโค้ดที่สามารถเป็นแบบอัตโนมัติได้ ตัวอย่างเช่นต่อไปนี้เป็นข้อมูลโค้ดจากโพสต์ Clubmate แสดงรหัส Sass บางส่วนตามด้วยผลลัพธ์:

/ * Sass code * / @ สำหรับ $ i ตั้งแต่ 1 ถึง 8 $ width: ร้อยละ (1 / $ i) .col - # $ i width: $ width;  / * output * / .col-1 width: 100%; .col-2 width: 50%; .col-3 width: 33.333%; .col-4 ความกว้าง: 25%;  .col-5 กว้าง: 20%; .col-6 กว้าง: 16.666%; .col-7 กว้าง: 14.285%; .col-8 กว้าง: 12.5%;

คลาสคอลัมน์เหล่านี้สามารถใช้ร่วมกับระบบกริด คุณสามารถเพิ่มคอลัมน์เพิ่มเติมหรือลบบางส่วนโดยแก้ไขโค้ดลูป.

ลูป น่า ไม่ ถูกใช้เพื่อทำซ้ำตัวเลือกหรือคุณสมบัติสำหรับตัวเลือก; นั่นคือสิ่งที่ mixins มีไว้สำหรับ.

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

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

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

หากคุณเคยสับสนหรือต้องการความคิดเห็นเกี่ยวกับการทำรังหรือ Sass ลูปคุณควรโพสต์คำถามใน / r / sass / หรือ / r / css /, ชุมชน Reddit ที่ใช้งานอยู่กับนักพัฒนา Sass ที่มีความรู้มาก.

modularization

การฝึกเขียนโมดูลาร์ Sass นั้นเป็นสิ่งจำเป็นอย่างยิ่งสำหรับโครงการส่วนใหญ่ (ฉันเถียงทุกโครงการ) การทำให้เป็นโมดูลเป็นกระบวนการของ แบ่งโครงการเป็นโมดูลขนาดเล็ก. สามารถทำได้ใน Sass โดยใช้ partials.

แนวคิดเบื้องหลังโมดูลาร์ Sass คือการเขียนไฟล์ SCSS แต่ละไฟล์โดยมีวัตถุประสงค์เฉพาะซึ่งกำหนดเป้าหมายไปที่เนื้อหาทั่วโลก (ประเภทตัวพิมพ์กริด) หรือองค์ประกอบของหน้า (แท็บฟอร์ม).

คำนิยามโมดูล Sass ค่อนข้างชัดเจนและทำให้ข้อเสนอแนะที่เฉพาะเจาะจงมาก: การนำเข้าโมดูลไม่ควรส่งออกรหัส.

แนวคิดของการส่งออกบังคับสำหรับโมดูลทั้งหมดจะเป็นฝันร้ายสำหรับการเพิ่มประสิทธิภาพ แต่คุณควรสร้างโมดูลแยกต่างหากและ โทรหาคนที่คุณต้องการเท่านั้น. โมดูลสามารถกำหนดได้โดย mixins หรือฟังก์ชั่น แต่ก็เป็นไปได้ที่จะสร้างโมดูลที่มีตัวเลือกเช่นกัน.

อย่างไรก็ตามบทความ Sass Way แนะนำให้เขียนตัวเลือกทั้งหมดเป็นมิกซ์อินและเรียกเฉพาะเมื่อจำเป็นเท่านั้น ไม่ว่าคุณจะยอมรับสิ่งนี้หรือไม่ก็เป็นทางเลือกของคุณ ฉันคิดว่ามันขึ้นอยู่กับขนาดของโครงการและความสะดวกสบายของคุณด้วยการจัดการมิกซ์อิน.

อ้างถึง John Long จากโพสต์ของเขาใน The Sass Way:

“สำหรับฉันโมดูลได้กลายเป็นหน่วยพื้นฐานหรือหน่วยการสร้างของโครงการ Sass ของฉัน.”

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

นอกจากนี้ยังง่ายกว่ามากในการคัดลอกโมดูลจากโครงการหนึ่งไปอีกโครงการหนึ่งเมื่ออยู่ในไฟล์แยกกัน. มีความยืดหยุ่น และ รหัสนำมาใช้ใหม่ คือหัวใจสำคัญของการพัฒนาแบบแยกส่วน.

หากต้องการเรียนรู้เพิ่มเติมเกี่ยวกับโมดูล Sass และเทคนิคการทำให้เป็นโมดูลดูที่โพสต์เหล่านี้:

• โมดูล CSS: ยินดีต้อนรับสู่อนาคต
• ข้อดีข้อเสียของ Modular Sass
• Modular CSS Organization ด้วย SMACSS & SASS

ค้นหาเวิร์กโฟลว์ที่สมบูรณ์แบบของคุณ

แต่ละทีมและนักพัฒนาแต่ละคนมีแนวทางปฏิบัติของตัวเองที่ทำงานได้ดีที่สุด คุณควรปรับใช้แนวทางปฏิบัติที่ดีที่สุดสำหรับคุณเป็นการส่วนตัวหรือเลือกที่จะนำแนวทางที่ดีที่สุดมาใช้กับทีมของคุณอย่างมืออาชีพ.

นอกจากนี้ให้พิจารณาใช้ Gulp หรือ Grunt สำหรับโครงการอัตโนมัติและลดขนาดรหัสของคุณ สิ่งนี้จะช่วยประหยัดแรงงานใช้แรงงานจำนวนมากและเครื่องมืออัตโนมัติเป็นส่วนหนึ่งของแนวทางปฏิบัติที่ดีที่สุดสำหรับการพัฒนาส่วนหน้าที่ทันสมัย.

อ่านผ่านห้องสมุดโอเพ่นซอร์สเช่น SCSS ของมูลนิธิบน GitHub เพื่อเรียนรู้เพิ่มเติมเกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดที่ใช้โดยห้องสมุดอื่น ๆ.

สิ่งที่เกี่ยวกับแนวทางปฏิบัติที่ดีที่สุดคือพวกเขาปรับปรุงการทำงานของคุณเกือบตลอดเวลา แต่มีทางเลือกมากมาย ลองทำในสิ่งต่างๆและดูว่าพวกเขารู้สึกอย่างไร คุณจะได้เรียนรู้อยู่เสมอเพื่อให้แนวทางปฏิบัติที่ดีที่สุดของคุณอาจเปลี่ยนแปลงอย่างรวดเร็วตลอดระยะเวลา 5 ปี.

ข้อเสนอแนะสุดท้ายที่ฉันมีสำหรับกระบวนการ Sass ทั้งหมดคือ ตัดสินใจด้วยความชัดเจนในใจ. เขียนโค้ดที่ทำให้งานของคุณง่ายขึ้น. อย่าทำให้โครงการมีความซับซ้อนมากเกินไปหากมีวิธีที่ง่ายกว่าในการทำ.

Sass มีวัตถุประสงค์เพื่อปรับปรุงประสบการณ์การพัฒนา CSS ดังนั้น ทำงานด้วยความชัดเจนและแนวปฏิบัติที่ดีที่สุด เพื่อรับประสบการณ์ที่ดีที่สุดเท่าที่จะเป็นไปได้.

สรุป

ความแออัดในเวิร์กโฟลว์ Sass สามารถแก้ไขได้โดยการปรับแต่งสไตล์โค้ดและปฏิบัติตามแนวทางปฏิบัติที่ดีที่สุด ฉันได้แสดงคำแนะนำเล็กน้อยในโพสต์นี้ที่ได้รับจากบล็อก Sass และนักพัฒนามืออาชีพ.

วิธีที่ดีที่สุดในการเรียนรู้เพิ่มเติมคือการใช้แนวทางปฏิบัติเหล่านี้กับเวิร์กโฟลว์ของคุณและ ดูว่าอะไรทำงาน. เมื่อเวลาผ่านไปคุณจะพบว่ากิจกรรมบางอย่างมีประโยชน์มากกว่ากิจกรรมอื่น ๆ ซึ่งในกรณีนี้คุณควรทำ ทำงานต่อไปและทิ้งสิ่งที่ไม่ทำ.

ลองดูลิงค์เหล่านี้เพื่อค้นหาเคล็ดลับและแนวทางปฏิบัติที่ดีที่สุดสำหรับการพัฒนา Sass:

• แนวทาง Sass
• วิสัยทัศน์สำหรับ Sass ของเรา
• 8 เคล็ดลับที่จะช่วยให้คุณได้รับสิ่งที่ดีที่สุดจาก Sass
• ขยาย Sass โดยไม่สร้างความยุ่งเหยิง
• Sass Best Practices - ทำรังลึกมากกว่า 3 ระดับ