แนวทางที่ง่ายและสะดวกในการทำความเข้าใจ 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 (หรือดูคู่มือผู้เริ่มต้นใช้งานของเรา) - ตัวการอ้างอิงพื้นฐานจะเหมือนกันมาก!