แนวทางที่ง่ายและสะดวกในการทำความเข้าใจ Sass

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

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

• เครื่องมือทางการค้า
• ตัวแปร
• การทำรัง
• การขยายกฎ
• mixins
• ตัวเลือกตัวแทน
• การดำเนินงาน
• ฟังก์ชั่น

เครื่องมือทางการค้า

Thoriq แสดงวิธีที่คุณสามารถใช้ Sass จากบรรทัดคำสั่งโดยใช้ sass - ดู คำสั่ง.

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

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

ตัวแปร

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

 $ primary_color: # 666666; .button color: $ primary_color;  .important color: $ primary_color;  

สิ่งนี้อาจดูเหมือนไม่มีประโยชน์ที่นี่ แต่ลองนึกภาพว่ามีโค้ด 3,000 บรรทัด หากรูปแบบสีของคุณมีการเปลี่ยนแปลงคุณจะต้องแทนที่ค่าสีแต่ละค่าใน CSS ด้วย Sass คุณสามารถทำได้ ปรับเปลี่ยนค่า ของ $ primary_color ตัวแปรและจะทำกับมัน.

ตัวแปรที่ใช้สำหรับ การจัดเก็บชื่อตัวอักษรขนาดสีและโฮสต์ของข้อมูลอื่น ๆ. สำหรับโครงการขนาดใหญ่เราอาจคุ้มค่าที่จะแยกตัวแปรทั้งหมดของคุณเป็นไฟล์แยกต่างหาก (เราจะดูว่าจะทำอย่างไรในไม่ช้า) สิ่งนี้ช่วยให้คุณสามารถเปลี่ยนสีโครงการทั้งหมดของคุณและเปลี่ยนแบบอักษรและลักษณะสำคัญอื่น ๆ โดยไม่ต้องสัมผัสกฎ CSS จริง. สิ่งที่คุณต้องทำคือแก้ไขตัวแปรบางอย่าง.

การทำรัง

ฟีเจอร์พื้นฐานอีกอย่างที่ Sass มอบให้คุณคือ ความสามารถในการซ้อนกฎ. สมมติว่าคุณกำลังสร้างเมนูการนำทาง คุณมี nav องค์ประกอบที่มีรายการเรียงลำดับรายการและลิงค์ ใน CSS คุณสามารถทำสิ่งนี้:

 #header nav / * กฎสำหรับพื้นที่นำทาง * / #header nav ul / * กฎสำหรับเมนู * / #header nav li / * กฎสำหรับรายการในรายการ * / #header nav กฎ / * สำหรับลิงค์ * / 

ในตัวเลือกเราจะทำซ้ำตัวเองมาก หากองค์ประกอบมีรากร่วมกันเราสามารถใช้การทำรังกับ เขียนกฎของเราในวิธีที่สะอาดกว่ามาก.

นี่คือลักษณะของโค้ดด้านบนใน Sass:

 #header nav / * กฎสำหรับพื้นที่นำทาง * / ul / * กฎสำหรับเมนู * / li / * กฎสำหรับรายการ * / a / * กฎสำหรับลิงก์ * / 

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

ข้อเสียเปรียบอย่างหนึ่งของการทำรังก็คือ นำไปสู่การจำเพาะที่ไม่จำเป็น. ในตัวอย่างด้านบนฉันได้อ้างถึงลิงก์ด้วย #header nav a. คุณสามารถใช้ #header nav ul li a ซึ่งอาจจะมากเกินไป.

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

 #header nav / * กฎสำหรับพื้นที่นำทาง * / ul / * กฎสำหรับเมนู * / li / * กฎสำหรับรายการในรายการ * / a / * กฎสำหรับลิงค์ * / 

การขยายกฎ

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

 .ปุ่ม display: inline-block; สี: # 000; พื้นหลัง: # 333; border-radius: 4px; การขยาย: 8px 11px;  .button-primary @extend .button; พื้นหลัง: # 0091C2 .button-small @extend .button; font-size: 0.9em; การขยาย: 3px 8px;  

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

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

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

mixins

มิกซ์อินเป็นอีกหนึ่งฟีเจอร์ที่ผู้ใช้พรีโพรเซสเซอร์ชื่นชอบ มิกซ์อินเป็นชุดกฎที่ใช้ซ้ำได้ - เหมาะสำหรับกฎเฉพาะของผู้ขายหรือสำหรับกฎ CSS แบบย่อ.

วิธีสร้างกฎการเปลี่ยนแปลงสำหรับองค์ประกอบโฮเวอร์:

 @mixing hover-effect -webkit-transition: 200ms สีพื้นหลัง; -moz-transition: 200ms สีพื้นหลัง; -o-transition: 200ms สีพื้นหลัง; การเปลี่ยนแปลง: 200ms สีพื้นหลัง;  a @include hover-effect;  .button @include hover-effect;  

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

 @mixin hover-effect (ความเร็ว $) -webkit-transition: ความเร็ว $ สีพื้นหลัง; -moz-transition: ความเร็ว $ สีพื้นหลัง; -o-transition: ความเร็ว $ สีพื้นหลัง; การเปลี่ยนแปลง: ความเร็ว $ สีพื้นหลัง;  a @ รวมถึงโฮเวอร์เอฟเฟ็กต์ (200ms);  .button @ รวมถึงโฮเวอร์เอฟเฟกต์ (300ms);  

ตัวเลือกตัวแทน

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

 .ข้อความ ขนาดตัวอักษร: 1.1em; padding: 11px; ชายแดนกว้าง: 1px; ชายแดนสไตล์: ของแข็ง  .message-อันตราย @extend .message; พื้นหลัง: # C20030; สี: # fff; สีเส้นขอบ: # A8002A;  .message-success @extend .message; พื้นหลัง: # 7EA800; สี: # fff; สีเส้นขอบ: # 6B8F00;  

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

 ข้อความ% ขนาดตัวอักษร: 1.1em; padding: 11px; ชายแดนกว้าง: 1px; ชายแดนสไตล์: ของแข็ง  .message-อันตรายปุ่ม @extend%; พื้นหลัง: # C20030; สี: # fff; สีเส้นขอบ: # A8002A;  .message-success ปุ่ม @extend%; พื้นหลัง: # 7EA800; สี: # fff; สีเส้นขอบ: # 6D9700  

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

การดำเนินงาน

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

 .คอนเทนเนอร์ ความกว้าง: 100%;  บทความ ลอย: ซ้าย; ความกว้าง: 600px / 960px * 100%;  กัน ลอย: ใช่; ความกว้าง: 300px / 960px * 100%;  

ตัวอย่างข้างต้นสร้างระบบกริดที่ใช้ 960px ซึ่งมีความยุ่งยากน้อยที่สุด มันจะเรียบเรียงอย่างดีกับ CSS ต่อไปนี้:

 .คอนเทนเนอร์ ความกว้าง: 100%;  บทความ ลอย: ซ้าย; ความกว้าง: 62.5%;  กัน ลอย: ใช่; ความกว้าง: 31.25%;  

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

 $ หลัก: # 7EA800; .message-success @extend% ปุ่ม; พื้นหลัง: $ หลัก; สี: # fff; เส้นขอบสี: $ หลัก - # 111;  

ยิ่งสีที่ถูกหักจางลงเฉดสีที่ได้จะยิ่งเข้มขึ้นเท่านั้น ยิ่งสีที่เพิ่มมากขึ้นเท่าไรสีก็จะยิ่งเข้มขึ้นเท่านั้น.

ฟังก์ชั่น

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

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

 $ หลัก: # 7EA800; .message-success @extend% ปุ่ม; พื้นหลัง: $ หลัก; สี: # fff; เส้นขอบสี: มืดลง ($ หลัก 5);  

อาร์กิวเมนต์ที่สองของฟังก์ชันคือเปอร์เซ็นต์ของการทำให้มืดลงที่ต้องการ ฟังก์ชั่นทั้งหมดมีพารามิเตอร์ ลองดูที่เอกสารเพื่อดูว่าพวกเขาคืออะไร! นี่คือฟังก์ชั่นสีอื่น ๆ ที่อธิบายตนเอง desaturate, เปียกโชก, กลับหัวกลับหาง, โทนสีเทา.

ceil function เช่นเดียวกับใน PHP ส่งคืนตัวเลขที่ปัดเศษเป็นจำนวนเต็มถัดไป สามารถใช้เมื่อคำนวณความกว้างของคอลัมน์หรือหากคุณไม่ต้องการใช้ตำแหน่งทศนิยมจำนวนมากใน CSS สุดท้าย.

 .ชื่อ font-size: ceil ($ header_size * 1.3314);  

ภาพรวม

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

หากคุณสนใจ CSS preprocessor อื่นที่คล้ายกันฉันขอแนะนำให้ดูที่ LESS (หรือดูคู่มือผู้เริ่มต้นใช้งานของเรา) - ตัวการอ้างอิงพื้นฐานจะเหมือนกันมาก!