กอด Sass: ทำไมคุณควรหยุดใช้ Vanilla CSS

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

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

ทำไมต้องใช้ Sass ต่อไป?

องค์กร: @import

โครงการนี้ที่ฉันเพิ่งพูดถึง ซึ่งเป็นเว็บไซต์อีคอมเมิร์ซขนาดใหญ่ มีไฟล์ CSS ไฟล์เดียวที่มีการประกาศรูปแบบที่ไม่บีบอัด 7184 บรรทัด ใช่ คุณอ่านถูกต้องแล้ว: CSS เจ็ดพันหนึ่งร้อยแปดสิบสี่บรรทัด ฉันแน่ใจว่านี่ไม่ใช่ไฟล์ CSS ที่ใหญ่ที่สุดที่นักพัฒนา front-end ต้องจัดการในอุตสาหกรรมนี้ แต่มันใหญ่พอที่จะทำให้ยุ่งเหยิงได้

นี่คือเหตุผลแรกที่คุณต้องการ Sass: ช่วยให้คุณจัดระเบียบและทำให้สไตล์ชีตของคุณเป็นแบบโมดูล มันไม่ใช่ตัวแปร มันไม่ใช่การซ้อน สำหรับฉัน ฟีเจอร์หลักของ Sass เป็นเพียงบางส่วน และจะขยายกฎ CSS @import เพื่ออนุญาตให้นำเข้าไฟล์ SCSS และ Sass ได้อย่างไร ในทางปฏิบัติ หมายความว่าคุณจะสามารถแยกไฟล์ style.css ขนาดใหญ่ออกเป็นไฟล์ขนาดเล็กหลายๆ ไฟล์ ซึ่งจะง่ายต่อการดูแลรักษา ทำความเข้าใจ และจัดระเบียบ

กฎ @import มีมานานเกือบเท่ากับ CSS เอง อย่างไรก็ตาม มันได้รับชื่อเสียงที่ไม่ดี เนื่องจากเมื่อคุณใช้ @import ในไฟล์ CSS คุณจะทริกเกอร์คำขอ HTTP แยกกัน หนึ่งไฟล์สำหรับไฟล์ CSS แต่ละไฟล์ที่คุณกำลังนำเข้า ซึ่งอาจส่งผลเสียต่อประสิทธิภาพของไซต์ของคุณ จะเกิดอะไรขึ้นสิ่งที่คุณใช้กับ Sass? หากคุณไม่เคยหยุดคิดว่าคำว่า "ตัวประมวลผลล่วงหน้า" หมายถึงอะไร ตอนนี้ก็ถึงเวลาแล้ว

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

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

 @import “variables”; @import “reset”; @import “fonts”; @import “base”; @import “buttons”; @import “layout”;

อย่าทำซ้ำตัวเอง: ตัวแปร

บทความใด ๆ ที่ยกย่อง Sass อาจเริ่มต้นด้วยการกล่าวถึงคุณลักษณะเด่น - ตัวแปร การใช้ตัวแปรที่พบบ่อยที่สุดคือจานสี กี่ครั้งแล้วที่คุณพบการประกาศหลายครั้งเกี่ยวกับสีที่ควรจะเป็นสีเดียวกัน และลงเอยด้วย CSS เป็นเฉดสีที่ต่างกันเล็กน้อยเพราะไม่มีใครใช้รหัสฐานสิบหกเหมือนกัน Sass เพื่อช่วยชีวิต ใน Sass คุณสามารถประกาศตัวแปรด้วยค่าเกือบใดก็ได้ ดังนั้นจานสีของเราอาจเป็นดังนี้:

 $brand: #226666; $secondary: #403075; $emphasis: #AA8439;

คำที่ขึ้นต้นด้วย “$” คือตัวแปร Sass ความหมายก็คือ ภายหลังในสไตล์ชีตของคุณ คุณจะสามารถใช้คำเหล่านั้นได้ และจะถูกจับคู่กับค่าที่คุณกำหนดไว้ก่อนหน้านี้:

 body { background: $secondary; } .logo { color: $brand; } a { color: $emphasis; } a:hover { color: $brand; }

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

ฉันเขียนโค้ดตัวอย่างนี้ใน Sassmeister ซึ่งเป็นสนามเด็กเล่น Sass ไปข้างหน้าและลองเปลี่ยนตัวแปรเหล่านั้นเป็นอย่างอื่น

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

ซอร์สโค้ดตัวทำความสะอาด: การทำรัง

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

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; } .header.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .header .nav { list-style: none; } .header .nav li { display: inline-block; } .header .nav li a { display: block; padding: 0.5em; color: #AA8439; }

เมื่อใช้ Nesting คุณสามารถเพิ่มคลาสระหว่างวงเล็บปีกกาของการประกาศได้ Sass จะรวบรวมและจัดการตัวเลือกอย่างสังหรณ์ใจ คุณยังสามารถใช้อักขระ "&" ​​เพื่อดูข้อมูลอ้างอิงของตัวเลือกพาเรนต์ได้อีกด้วย กลับไปที่ตัวอย่าง CSS ของเรา เราสามารถแปลงเป็น:

 .header { margin: 0; padding: 1em; border-bottom: 1px solid #CCC; &.is-fixed { position: fixed; top: 0; right: 0; left: 0; } .nav { list-style: none; li { display: inline-block; a { display: block; padding: 0.5em; color: #AA8439; } } } }

มันดูสวยงามและอ่านง่ายกว่า อย่าลังเลที่จะเล่นกับตัวอย่างนี้

อีกครั้ง! อย่าทำซ้ำตัวเอง: มิกซ์อินและขยาย

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

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

 .box { border: 2px solid red; } .box .button { background: red; }

สมมติว่าตอนนี้คุณต้องการโมดูลกล่องเดียวกัน แต่มีสีต่างกัน คุณจะเพิ่มสิ่งนี้ให้กับ CSS ของคุณ:

 .box-alt { border: 2px solid blue; } .box-alt .button { background: blue; }

ในตอนนี้ สมมติว่าคุณต้องการโมดูลแบบกล่อง แต่มีขอบที่บางกว่า คุณจะเพิ่ม:

 .box-slim { border: 1px solid red; } .box-slim .button { background: red; }

ซ้ำเยอะไม่ใช่เหรอ? ด้วย Sass คุณสามารถสรุปกรณีเหล่านี้เพื่อลดการซ้ำซ้อน คุณสามารถกำหนดมิกซ์อินแบบนี้:

 @mixin box($borderSize, $color) { border: $borderSize solid $color; .button { background: $color; } }

ดังนั้น ซอร์สโค้ดของคุณสามารถถูกลดขนาดเป็น:

 .box { @include box(2px, red); } .box-alt { @include box(2px, blue); } .box-slim { @include box(1px, red); }

ดูสวยใช่มั้ย? ลองใช้ตัวอย่างนี้ดู คุณสามารถสร้างไลบรารีมิกซ์อินของคุณเองหรือดีกว่านั้นก็คือคุณสามารถใช้หนึ่งในไลบรารีชุมชนที่มีอยู่ได้

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

สมมติว่าคุณประกาศกล่องแรก:

 .box { margin: 1em; padding: 1em; border: 2px solid red; }

ตอนนี้คุณต้องการสองกล่องที่คล้ายกับกล่องนี้ แต่มีสีเส้นขอบต่างกัน คุณสามารถทำสิ่งต่อไปนี้:

 .box-blue { @extend .box; border-color: blue; } .box-red { @extend .box; border-color: red; }

นี่คือลักษณะของ CSS ที่คอมไพล์แล้ว:

 .box, .box-blue, .box-red { margin: 1em; padding: 1em; border: 2px solid red; } .box-blue { border-color: blue; } .box-red { border-color: red; }

แรงใช่มั้ย คุณสามารถหาตัวอย่างได้ที่นี่ หากคุณตรวจทานผลลัพธ์ CSS คุณจะรู้ว่าคลาส .box ถูกรวมไว้ในผลลัพธ์ หากคุณไม่ต้องการพฤติกรรมนี้ คุณสามารถรวม @extend กับ “placeholders” ได้ ตัวยึดตำแหน่งเป็นตัวเลือกพิเศษที่จะไม่ส่งออกคลาสใน CSS ตัวอย่างเช่น บางครั้งฉันพบว่าตัวเองกำลังรีเซ็ตรูปแบบเริ่มต้นของรายการเป็นจำนวนมาก ฉันมักใช้ @extend กับตัวยึดตำแหน่งดังนี้:

 %unstyled-list { list-style: none; margin: 0; padding: 0; }

จากนั้น คุณสามารถใช้รูปแบบนี้ซ้ำในสไตล์ชีตทั้งหมดของคุณ:

 .search-results { @extend %unstyled-list; } .posts { @extend %unstyled-list; } .nav { @extend %unstyled-list; }

CSS ที่คุณคอมไพล์แล้วจะมีลักษณะดังนี้:

 .search-results, .posts, .nav { list-style: none; margin: 0; padding: 0; }

ดูตัวอย่างได้ที่นี่

มีอีกไหม

อย่างแน่นอน! ฉันไม่ต้องการให้บทความนี้ซับซ้อนเกินไป แต่มีโลก Sassy ที่รอให้คุณค้นพบ และยังมีฟีเจอร์อื่นๆ อีกมากนอกเหนือจากนั้น: operation, single-line comments with //, functions, if loops … ถ้าคุณเคยคิดว่า “มันคงจะดีที่จะทำบางสิ่ง 'X' ด้วย CSS” ฉันแน่ใจ สิ่งที่ 'X' ได้ทำไปแล้วโดย Sass “CSS with superpowers” ​​เป็นสโลแกนของมัน และนั่นไม่สามารถเข้าใกล้ความจริงได้มากกว่านี้

บทสรุป

ไปที่หน้าการติดตั้งและเริ่มแฮ็ค! เชื่อฉันคุณจะไม่เสียใจ

ใช่ มีทางเลือกอื่นสำหรับ Sass ตัวประมวลผลล่วงหน้าอื่นๆ (LESS, Stylus), ตัวประมวลผลภายหลัง, Grunt เป็นต้น และยังมี CSS Variables อีกด้วย ฉันไม่ได้บอกว่า Sass เป็นเทคโนโลยีเดียวที่มีอยู่ ทั้งหมดที่ฉันพูดก็คือว่ามันดีที่สุด! อย่างน้อยก็ตอนนี้. ไม่เชื่อในสิ่งที่ฉันพูด? ไปข้างหน้าและลองด้วยตัวคุณเอง คุณจะไม่เสียใจเลย!