ก่อนอื่นฉันจะไม่แสดงเหตุผล 100,000 เหตุผลว่าทำไม Bootstrap จึงถ่ายโอนจากน้อยไปจนถึงน้อยไปสู่ Sass ใน V4 (ฉันวางแผนที่จะเปรียบเทียบบทความอื่นที่มีน้อยกว่า, sass, postcss)
ไปที่ bootstrap v4 sass กันเถอะ
1. ไฟล์ SASS ของ bootstrap ทั้งหมดอยู่ในไดเรกทอรี SCSS ทำไมชื่อ scss แทน sass? ส่วนใหญ่เกี่ยวข้องกับความแตกต่างระหว่างไวยากรณ์ SASS และ SCSS ไวยากรณ์ SCSS อยู่ใกล้กับ CSS มากขึ้นดังนั้นจึงเป็นที่นิยมและใช้กันอย่างแพร่หลาย สำหรับรายละเอียดโปรดดูไวยากรณ์ SASS
2. มีไฟล์ SCSS สองประเภทหนึ่งไฟล์คือจุดเริ่มต้นของขีดล่างเช่น _variables.scss และอื่น ๆ คือสิ่งที่ไม่ได้เน้นเช่น bootstrap.scss ความแตกต่างระหว่างสองสิ่งนี้คืออดีตแสดงถึงไฟล์ที่นำเข้าและจะไม่ถูกรวบรวมลงในไฟล์ CSS ที่เกี่ยวข้องโดยค่าเริ่มต้นในขณะที่หลังจะรวบรวมไฟล์ CSS ที่เกี่ยวข้อง ดังนั้นหากมีสองไฟล์ _a.scss ผลการรวบรวมเริ่มต้นของ B.CSS คือไฟล์ B.CSS เท่านั้นที่ถูกรวบรวม หาก B ต้องการใช้สไตล์ใน _a.scss คุณสามารถใช้ฟังก์ชั่นนำเข้า @import A (ไฟล์ที่นำเข้าสามารถละเว้นขีดล่างและชื่อต่อท้ายไฟล์) สำหรับรายละเอียดโปรดดูไวยากรณ์ SASS
3. ถ้าเรารวบรวมไดเรกทอรี SCSS ทั้งหมดเราสามารถรับไฟล์ CSS สี่ไฟล์แบ่งออกเป็น bootstrap.css, bootstrap-flex.css, bootstrap-reboot.css, bootstrap-grid.css รูปแบบ CSS ทั้งสี่นี้ถูกสร้างขึ้นโดยไฟล์ SCSS สี่ไฟล์ต่อไปนี้
Bootstrap-Reboot เป็นสไตล์การรีเซ็ตและ Bootstrap-Grid เป็นสไตล์กริด ทั้งสองนี้ถือได้ว่าเป็นสไตล์แยกต่างหาก หากคุณไม่ต้องการใช้สไตล์ bootstrap ทั้งหมดในบางสถานการณ์ แต่ต้องการใช้ระบบรีเซ็ตหรือกริดคุณสามารถใช้ทั้งสองได้โดยตรง
ความแตกต่างระหว่าง bootstrap และ bootstrap-flex คืออดีตใช้วิธีการจัดวางแบบดั้งเดิมในขณะที่หลังใช้วิธีการยืดหยุ่นดังนั้นคุณสามารถเลือกที่จะใช้ตามสถานการณ์จริงของคุณ จากภาพด้านบนคุณจะเห็นว่า bootstrap-flex.scss ได้รับการรีเซ็ตโดย $ enable-flex: จริงก่อนที่จะนำเข้า bootstrap.scss
4. เปิด bootstrap.scss และคุณจะเห็นว่ามีการนำเข้าไฟล์ต่าง ๆ ซึ่งแบ่งออกเป็น 6 บล็อกขนาดใหญ่คือ:
Variable & Mixin: แนะนำตัวแปรและไฟล์ mixin โดยที่ไฟล์ทั้งหมดในไดเรกทอรี mixin จะถูกนำเข้าสู่ไฟล์ _mixin.scss
รีเซ็ต: นำเข้าไฟล์ปกติและพิมพ์ไฟล์
Core: แนะนำไฟล์สไตล์พื้นฐานเช่นกริด, รูปแบบ, ตาราง, ปุ่ม, ปุ่ม ฯลฯ
ส่วนประกอบ: แนะนำไฟล์ส่วนประกอบเช่น NAV, Card, Breadcrumb ฯลฯ
Component JS: แนะนำไฟล์ส่วนประกอบที่ต้องการการควบคุม JS เช่น modal คำแนะนำเครื่องมือ ฯลฯ
ยูทิลิตี้: แนะนำไฟล์คลาสทั่วทั้งไซต์ด้วยคลาสทั่วไปบางคลาสเช่น Clearfix, Center-Block ฯลฯ
วิธีใช้และแก้ไขสไตล์ของ bootstrap v4
หากคุณคุ้นเคยกับ SASS คุณสามารถใช้ SASS ได้โดยตรง แน่นอนถ้าคุณไม่คุ้นเคยกับ SASS คุณสามารถค้นหา bootstrap.cs ที่รวบรวมได้ในไดเรกทอรี dist/css
พูดคุยเกี่ยวกับการใช้ CSS โดยตรง:
แนะนำ <link href = "bootstrap.css" rel = "stylesheet" /> ใน html
หากคุณต้องการปรับเปลี่ยนสไตล์ bootstrap คุณสามารถสร้างแผ่นสไตล์อื่นเช่น style.css เพื่อแทนที่สไตล์ bootstrap ไม่แนะนำให้ปรับเปลี่ยนการปรับเปลี่ยนแผ่นสไตล์ bootstrap.css โดยตรง เนื่องจากมันถูกเขียนด้วย SASS แน่นอนว่าเราสามารถเลือกเขี้ยวที่มีคุณภาพสูงกว่า นอกจากนี้ยังมีสองวิธีในการปรับเปลี่ยน SASS อีกวิธีหนึ่งไม่ทำลายและอีกวิธีหนึ่งคือการทำลายล้าง
สำหรับสิ่งที่ทำลายล้างมันหมายถึงการปรับเปลี่ยนทุกที่ที่พวกเขาไม่ชอบและไม่มีเคล็ดลับที่ดี มาพูดคุยเกี่ยวกับการปรับเปลี่ยนการใช้งานแบบไม่ทำลายได้ที่นี่เราสามารถใช้วิธีการต่อไปนี้:
ใส่ไฟล์ scss ทั้งหมดของ bootstrap ในไดเรกทอรี bootstrap
ไดเรกทอรี scssbootstrap (ไฟล์ทั้งหมดในไดเรกทอรี SCSS ดั้งเดิมใน bootstrap) bootstrap.scss ... ไดเรกทอรี mixin ... _ custom-variables.scss (ตัวแปรที่กำหนดเองหรือตัวแปรที่เขียนทับ bootstrap) _custom-mixin.scs
รหัส style.scss มีดังนี้:
@Charset "UTF-8"; // นำเข้าไฟล์ @Import "custom-variables";@import "custom-mixin";@import "bootstrap/bootstrap";
แน่นอนถ้าคุณมีรหัสที่สะอาดคุณต้องการตัดสไตล์ที่ไม่ได้ใช้ไว้เสมอดังนั้นคุณสามารถเลือก bootstrap.scss และตรวจสอบได้ จะเป็นการดีกว่าหรือไม่ที่จะลบการนำเข้าสไตล์ที่ไม่ต้องการเหล่านั้น? หากคุณพิจารณาการอัพเกรดในอนาคตคุณควรสร้างไฟล์ใหม่และแนะนำสิ่งที่คุณต้องการตามวิธีการใน bootstrap.scss สำหรับสไตล์ส่วนประกอบคุณต้องแนะนำพวกเขาและหากคุณไม่ต้องการพวกเขาคุณต้องใส่ใจกับรูปแบบหลักและยูทิลิตี้เพราะคุณอาจใช้สไตล์พื้นฐานเหล่านี้ในส่วนประกอบของคุณ
วิธีปรับปรุงการออกแบบเขื่อนของ bootstrap v4
จากมุมมองของประสบการณ์การปฏิบัติส่วนตัวฉันรู้สึกว่า Bootstrap v4 มีข้อบกพร่องดังต่อไปนี้: (สำหรับความเห็นส่วนตัวเท่านั้น)
คุณสามารถดำเนินการวางแผนไดเรกทอรีต่อไปเช่นการวางไฟล์ส่วนประกอบทั้งหมดในไดเรกทอรีส่วนประกอบและไฟล์ยูทิลิตี้ในไดเรกทอรียูทิลิตี้ซึ่งจะดูเป็นระเบียบมากขึ้นและตอนนี้มันกระจัดกระจายไปหน่อยและดูยุ่งเหยิงเล็กน้อย
โดยไม่ต้องออกแบบ % ฉันคิดว่าการออกแบบ % เป็นการปรับปรุงและมีประสิทธิภาพมากสำหรับการประกาศการผสมผสานสไตล์โดยเฉพาะอย่างยิ่งรหัสที่เข้ากันได้สั้น ๆ และอื่น ๆ
มันสามารถให้ไฟล์ SCSS รวมฟังก์ชั่นของตัวแปรและ MixIN เพื่อให้สามารถอำนวยความสะดวกในการสร้างไฟล์สไตล์ใหม่และนำเข้าไฟล์รวมนี้โดยตรง ตัวแปรและ mixin สามารถประกาศอย่างไม่เป็นทางการด้วยตัวแปรส่วนประกอบและสามารถวางไว้ในส่วนประกอบที่เกี่ยวข้อง SCSS เนื่องจากส่วนประกอบเท่านั้นที่สามารถใช้งานได้มากกว่าในไฟล์ตัวแปรซึ่งทำให้ดูเหมือนว่ามีไฟล์ตัวแปรมากเกินไป แม้แต่ขนาดก็มีไฟล์ mixin ซึ่งให้ความรู้สึกมากเกินไป