โครงการเว็บของคุณต้องการ Sass หรือไม่?

ผู้เขียน: Roger Morrison
วันที่สร้าง: 18 กันยายน 2021
วันที่อัปเดต: 9 พฤษภาคม 2024
Anonim
Sass tutorials : Referencing Parent Selectors #7
วิดีโอ: Sass tutorials : Referencing Parent Selectors #7

เนื้อหา



ที่มา: Sabelskaya / Dreamstime.com

Takeaway:

Sass เป็นเครื่องมือใหม่สำหรับนักพัฒนาเว็บที่สามารถลดความซับซ้อนของกระบวนการแบ็คเอนด์ในขณะที่ยังคงได้ผลลัพธ์ที่ยอดเยี่ยม

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

Sass หรือ“ Syntactically Awesome Stylesheets” เป็นตัวประมวลผลล่วงหน้า - มันใช้ไวยากรณ์บางอย่างกับ CSS หรือ Cascading Style Sheets ซึ่งเป็นสไตล์การออกแบบเว็บสากลที่เป็นที่นิยมในการอัพเกรดหลักการออกแบบเว็บไซต์จากโลก HTML ที่ล้าสมัยอย่างเข้มงวด

CSS ช่วยให้สามารถใช้พื้นหลังแบบอักษรส่วนหัวแถบด้านข้างและองค์ประกอบต่าง ๆ ของเว็บเพจได้ดียิ่งขึ้น มันเป็นความคิดที่ค่อนข้างใหม่เมื่อมาถึงที่เกิดเหตุในช่วงกลางทศวรรษที่ 90 ตั้งแต่นั้นมา CSS ได้รับการรับรองจาก World Wide Web Consortium และมันได้กลายเป็นทักษะทั่วไปสำหรับนักออกแบบ

ในทางตรงกันข้าม Sass จะมีอายุย้อนหลังไปถึงปี 2550 เท่านั้นในหลาย ๆ วิธีคุณสามารถพูดได้ว่า Sass ใช้งานได้ "ด้านบน" CSS โดยการให้รูปแบบที่แตกต่างกันมันสามารถช่วยแยกแยะลักษณะของ CSS ที่อาจสร้างความสับสนให้กับผู้ที่ต้องทำงานกับมัน เช่นเดียวกับหลาย ๆ อนุสัญญาสำหรับการใช้“ white space” ในซอร์สโค้ดของแอปพลิเคชันการใช้ Sass สามารถส่งเสริมการอ่านและความโปร่งใสที่ดีขึ้นในการแก้ไข briar patch ที่ทำให้คุณสับสนบ่อยครั้งเมื่อคุณดึงซอร์สโค้ดที่มีอยู่สำหรับเว็บเพจ


นักพัฒนาอินพุต

นักพัฒนาซอฟต์แวร์ชอบอะไรมากที่สุดเกี่ยวกับ Sass

สำหรับบางคนมันเป็นลักษณะขององค์กรในการใช้ไวยากรณ์ที่ง่ายต่อการใส่ลงในหมวดหมู่ต่างๆ Dan Croak ที่ทำงานที่ Thoughtbot ในซานฟรานซิสโกชี้ให้เราเห็นถึงบทความนี้โดย Mike Borsare ที่พูดถึงวิธีการใช้ Sass ในสภาพแวดล้อมที่แน่นอนในกรณีนี้ในการย้ายจาก Chrome DevTools ไปยังเครื่องมือแก้ไขและย้อนกลับ

การใช้คุณสมบัติที่เรียกว่า Sass source maps กล่าวว่า Borsare สามารถ“ เชื่อมสะพานแบ่ง” ระหว่าง CSS และ Sass การใช้แมปแหล่งที่มาและการตั้งค่าพื้นที่ทำงานใน DevTools สามารถทำให้การแก้ไขโดยตรงนั้นง่ายขึ้นในคำพูดของเขา“ คงอยู่” กับซอร์สโค้ด

ลอเรนซ์แบรดฟอร์ดเป็นผู้พัฒนาอิสระและนักออกแบบเว็บไซต์ใน Lehigh Valley, PA ซึ่งใช้ Sass เพื่อประหยัดเวลาในการเขียนรูปแบบและเพื่อให้โครงการมีระเบียบมากขึ้น Bradford ใช้ไวยากรณ์สำหรับโครงการเช่นบล็อก WordPress ชื่อ learntocodewith.me

ไม่มีข้อบกพร่องไม่มีความเครียด - คู่มือแบบเป็นขั้นตอนเพื่อสร้างซอฟต์แวร์ที่เปลี่ยนแปลงชีวิตโดยไม่ทำลายชีวิตของคุณ

คุณไม่สามารถพัฒนาทักษะการเขียนโปรแกรมของคุณเมื่อไม่มีใครใส่ใจคุณภาพของซอฟต์แวร์


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

นักพัฒนาอื่น ๆ ชอบความเก่งกาจของ Sass

Dylan Husted ได้สร้างวิธีการใหม่เพื่อให้ผู้คนมีส่วนร่วมในประเด็นการเปลี่ยนแปลงสภาพภูมิอากาศ โครงการของเขาซึ่งเป็นไซต์ที่ชื่อว่า SaveOhno.org ทำให้ activism กลายเป็นเกมเสมือนจริงด้วยไอคอนและการแจ้งเตือนที่ต้องการการออกแบบและการวางผังเว็บไซต์ทางภาพจำนวนมากเพื่อสนับสนุนแนวคิดที่ว่าเราควรทำบางสิ่งบางอย่างเกี่ยวกับการรักษาสิ่งแวดล้อม คนรุ่นอนาคต.

ในการหารือเกี่ยวกับโครงการ Husted กล่าวว่าการใช้เทคนิคลักษณะการซ้อนใน Sass ช่วยให้ผลลัพธ์ CSS "ไหลจากองค์ประกอบหนึ่งไปอีกองค์ประกอบ" ได้ดีขึ้นมาก Husted ชี้ให้เห็นถึงพลังในการสร้างสไตล์ภายในคลาส - แทนที่จะเพียงแค่สร้างสไตล์ที่มีอยู่ในคลาสนั้น ๆ เขากล่าวว่าผู้พัฒนาสามารถสร้างไมโครคลาสหรือคลาสย่อยที่มีอินสแตนซ์บางประเภทเท่านั้น

Zach Feldman ทำงานที่ New York Code + Design Academy และรวมเนื้อหาใน Sass เข้าไว้ในหลักสูตรเช่น Front End 101 และการพัฒนาเว็บ เขากล่าวว่าด้วยตัวแปรและส่วนต่างๆ Sass อนุญาตให้ใช้รหัสฐานแบบแยกส่วนได้มากขึ้น

ส่วนหน้าและส่วนท้ายด้านหลัง

เช่นเดียวกับเครื่องมือออกแบบเว็บไซต์ที่มีประโยชน์ประเภทอื่น ๆ ตั้งแต่ Dreamweaver และเครื่องมือแก้ไข HTML ขั้นสูงอื่น ๆ ไปจนถึงการเปลี่ยนระเบียบสำหรับไวยากรณ์ HTML Sass ไม่จำเป็นต้องทำให้หน้าเว็บดูดีขึ้น มันเปลี่ยนวิธีการทำงานของนักพัฒนา

“ ไม่ใช่ว่าส่วนหน้าของการใช้ SCSS จะดีกว่าผลของการใช้ CSS” Husted กล่าว“ กระบวนการของการไปถึงที่นั่นจะมีการจัดระเบียบมากขึ้นและเข้าใจง่ายขึ้นสำหรับบุคคลที่สาม - บุคคลและง่ายต่อการทำเพื่อนักพัฒนา”

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

สิ่งหนึ่งที่แน่นอน - พลังการออกแบบเว็บทั้งหมดนี้ทำให้ชุมชนนักพัฒนาซอฟต์แวร์ในปัจจุบันสามารถสร้างรูปแบบที่น่าประทับใจและสร้างแรงบันดาลใจได้เช่นเดียวกับด้านหน้าอาคารเก่าของ Wild West สามารถทำให้องค์กรและเอเจนซี่ดูดียิ่งขึ้นกว่าเดิม สำหรับหลาย ๆ คนที่อยู่ในแนวหน้าของโครงการที่ทะเยอทะยานเหล่านี้การมี Sass ในมือเป็นตัวช่วยประหยัดเวลาจริงและเป็นส่วนหนึ่งของกล่องเครื่องมือเสมือนจริงของพวกเขา