เนื้อหา
- พรีโปรเซสเซอร์ CSS คืออะไร?
- Sass คืออะไร?
- วิธีใช้ Sass
- ไวยากรณ์
- ตัวแปร
- การทำรัง
- บางส่วน
- นำเข้า
- มิกซ์
- ขยาย / สืบทอด
- โอเปอเรเตอร์
Sass คืออะไร? นั่นคือคำถามที่เราต้องการคำตอบ หากคุณยังใหม่กับการออกแบบเว็บไซต์คุณอาจเคยได้ยินคำที่ลอยอยู่รอบ ๆ แต่คุณอาจไม่ค่อยเข้าใจว่า Sass คืออะไรใช้ทำอะไรและควรใช้หรือไม่ ในระยะสั้น Sass เป็นตัวประมวลผลล่วงหน้า CSS ซึ่งเพิ่มคุณสมบัติพิเศษเช่นตัวแปรกฎที่ซ้อนกันและส่วนผสม (บางครั้งเรียกว่าน้ำตาลวากยสัมพันธ์) ลงใน CSS ปกติ จุดมุ่งหมายคือทำให้กระบวนการเขียนโค้ดง่ายขึ้นและมีประสิทธิภาพมากขึ้น มาดูรายละเอียดเพิ่มเติมกัน
สำหรับเครื่องมือเพิ่มเติมโปรดดูคำแนะนำของเราเกี่ยวกับไฟล์ เฟรมเวิร์ก CSS ที่ดีที่สุด และด้านบน เครื่องมือออกแบบเว็บไซต์ ที่จะลอง
- โปรแกรมแก้ไขโค้ดที่ดีที่สุด
พรีโปรเซสเซอร์ CSS คืออะไร?
CSS preprocessor เป็นภาษาสคริปต์ที่ขยาย CSS โดยอนุญาตให้นักพัฒนาเขียนโค้ดในภาษาเดียวแล้วรวบรวมเป็น CSS Sass อาจเป็นพรีโปรเซสเซอร์ที่ได้รับความนิยมมากที่สุดในตอนนี้ แต่ตัวอย่างอื่น ๆ ที่รู้จักกันดี ได้แก่ Less และ Stylus
ก่อนที่เราจะดำเนินการต่อไปการประกาศบริการสาธารณะอย่างรวดเร็วเป็นไปตามลำดับ: นักออกแบบเว็บไซต์ส่วนใหญ่จะบอกว่าถ้าคุณเพิ่งเริ่มใช้ CSS คุณควรหลีกเลี่ยง Sass (หรือตัวประมวลผลล่วงหน้าส่วนขยายหรือเฟรมเวิร์ก) ในขณะที่คุณยังอยู่ การเรียนรู้. แม้ว่าจะเป็นเรื่องจริง แต่ก็มีข้อได้เปรียบมากมายในด้านความเร็วและประสิทธิภาพ แต่สิ่งสำคัญคือคุณต้องเข้าใจพื้นฐานของ CSS อย่างแท้จริง ตรวจสอบให้แน่ใจว่าคุณได้เรียนรู้แนวคิดหลักก่อนที่จะเริ่มสำรวจทางลัดและสิ่งที่ทำให้สับสน
Sass คืออะไร?
Sass (ซึ่งย่อมาจาก "สไตล์ชีตที่ยอดเยี่ยมทางไวยากรณ์) เป็นส่วนขยายของ CSS ที่ช่วยให้คุณสามารถใช้สิ่งต่างๆเช่นตัวแปรกฎที่ซ้อนกันการนำเข้าแบบอินไลน์และอื่น ๆ นอกจากนี้ยังช่วยจัดระเบียบสิ่งต่างๆและช่วยให้คุณสร้างสไตล์ชีตได้เร็วขึ้น
Sass เข้ากันได้กับ CSS ทุกเวอร์ชัน ข้อกำหนดเดียวในการใช้งานคือคุณต้องติดตั้ง Ruby นอกจากนี้ยังขอให้ผู้ใช้ปฏิบัติตามหลักเกณฑ์ของชุมชน Sass
วิธีใช้ Sass
ในส่วนต่อไปนี้เราจะสรุปเคล็ดลับพื้นฐานบางประการสำหรับการใช้ Sass โดยใช้ตัวอย่างจากเว็บไซต์ Sass อย่างเป็นทางการ ดูเอกสาร Sass สำหรับข้อมูลอ้างอิงและตัวอย่างเพิ่มเติม
ไวยากรณ์
Sass มีตัวเลือกไวยากรณ์สองแบบ:
- SCSS (Sassy CSS): ใช้ไฟล์ .scss นามสกุลไฟล์และสอดคล้องกับไวยากรณ์ CSS อย่างสมบูรณ์
- เยื้อง (เรียกง่ายๆว่า "Sass"): ใช้ .sass นามสกุลไฟล์และการเยื้องแทนที่จะเป็นวงเล็บ ไม่สอดคล้องกับไวยากรณ์ CSS อย่างสมบูรณ์ แต่เขียนได้เร็วกว่า
โปรดทราบว่าไฟล์สามารถแปลงจากไวยากรณ์หนึ่งไปเป็นอีกแบบหนึ่งโดยใช้ แปลง sass คำสั่ง
ตัวแปร
เช่นเดียวกับภาษาโปรแกรมอื่น ๆ Sass อนุญาตให้ใช้ตัวแปรที่สามารถจัดเก็บข้อมูลที่คุณสามารถใช้ได้ตลอดสไตล์ชีตของคุณ ตัวอย่างเช่นคุณสามารถจัดเก็บค่าสีในตัวแปรที่ด้านบนของไฟล์จากนั้นใช้ตัวแปรนี้เมื่อตั้งค่าสีขององค์ประกอบของคุณ สิ่งนี้ช่วยให้คุณสามารถเปลี่ยนสีของคุณได้อย่างรวดเร็วโดยไม่ต้องแก้ไขแต่ละบรรทัดแยกกัน
ตัวอย่างเช่น:
$ font-stack: Helvetica, sans-serif; $ หลักสี: # 333; เนื้อความ {font: 100% $ font-stack; สี: $ หลักสี; }
CSS ต่อไปนี้จะถูกสร้างขึ้น:
ร่างกาย {font: 100% Helvetica, sans-serif; สี: # 333; }
การทำรัง
การทำรังเป็นดาบสองคม แม้ว่าจะเป็นวิธีที่ยอดเยี่ยมในการลดจำนวนโค้ดที่คุณต้องเขียน แต่ก็สามารถนำไปสู่ CSS ที่มีคุณสมบัติมากเกินไปหากไม่ดำเนินการอย่างระมัดระวัง แนวคิดคือการซ้อนตัวเลือก CSS ของคุณในลักษณะที่เลียนแบบลำดับชั้น HTML ของคุณ
ต่อไปนี้แสดงรูปแบบการนำทางพื้นฐานที่ใช้การซ้อนกัน:
nav {ul {margin: 0; ช่องว่างภายใน: 0; สไตล์รายการ: ไม่มี; } li {display: inline-block; } ก {display: block; ช่องว่างภายใน: 6px 12px; ตกแต่งข้อความ: ไม่มี; }}
เอาต์พุต CSS มีดังนี้:
nav ul {ระยะขอบ: 0; ช่องว่างภายใน: 0; สไตล์รายการ: ไม่มี; } nav li {display: inline-block; } นำทาง {display: block; ช่องว่างภายใน: 6px 12px; ตกแต่งข้อความ: ไม่มี; }
บางส่วน
บางส่วนเป็นไฟล์ Sass ขนาดเล็กที่สามารถนำเข้า (ดูหัวข้อถัดไป) ไปยังไฟล์ Sass อื่น ๆ คิดว่าบางส่วนเป็นข้อมูลโค้ด ด้วยข้อมูลโค้ดเหล่านี้ CSS ของคุณสามารถเป็นโมดูลาร์และดูแลรักษาได้ง่ายขึ้น บางส่วนถูกกำหนดให้เป็นเช่นนั้นโดยการตั้งชื่อด้วยเครื่องหมายขีดล่าง: _partial.scss.
นำเข้า
ใช้กับ Partials (ดูหัวข้อก่อนหน้า), ไฟล์ @ นำเข้า คำสั่งอนุญาตให้คุณนำเข้าไฟล์บางส่วนของคุณไปยังไฟล์ปัจจุบันเพื่อสร้างไฟล์ CSS ไฟล์เดียว โปรดทราบจำนวนการนำเข้าที่คุณใช้เป็นคำขอ HTTP ที่จะถูกสร้างขึ้นสำหรับแต่ละรายการ
// _reset.scss html, body, ul, ol {margin: 0; ช่องว่างภายใน: 0; }
// basefile.scss @import 'รีเซ็ต'; ร่างกาย {font: 100% Helvetica, sans-serif; สีพื้นหลัง: #efefef; }
และเอาต์พุต CSS ที่สอดคล้องกัน:
html, ร่างกาย, ul, ol {margin: 0; ช่องว่างภายใน: 0; } body {font: 100% Helvetica, sans-serif; สีพื้นหลัง: #efefef; }
หมายเหตุ: เมื่อนำเข้าบางส่วนคุณไม่จำเป็นต้องใส่นามสกุลไฟล์หรือขีดล่าง
มิกซ์
ข้อดีอย่างหนึ่งของการใช้พรีโปรเซสเซอร์คือความสามารถในการใช้โค้ดที่ซับซ้อนและยืดยาวและทำให้ง่ายขึ้น นี่คือสิ่งที่มิกซ์อินมีประโยชน์!
ตัวอย่างเช่นหากคุณต้องการรวมคำนำหน้าผู้ขายคุณสามารถใช้ mixin แทนได้ ลองดูตัวอย่างนี้สำหรับ เส้นขอบรัศมี:
@mixin border-radius (รัศมี $) {-webkit-border-radius: $ radius; -moz-border-radius: $ radius; -ms-border-radius: $ radius; เส้นขอบรัศมี: รัศมี $; } .box {@include border-radius (10px); }
สังเกต @mixin คำสั่งที่ด้านบน ได้รับการตั้งชื่อ เส้นขอบรัศมี และใช้ตัวแปร รัศมี $ เป็นพารามิเตอร์ ตัวแปรนี้ใช้เพื่อกำหนดค่ารัศมีสำหรับแต่ละองค์ประกอบ
ต่อมา @ รวม คำสั่งเรียกพร้อมกับชื่อมิกซ์อิน (เส้นขอบรัศมี) และพารามิเตอร์ (10px). ด้วยประการฉะนี้ .box {@ รวมรัศมีเส้นขอบ (10px); }.
สร้าง CSS ต่อไปนี้:
.box {-webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; เส้นขอบรัศมี: 10px; }
ขยาย / สืบทอด
@extend คำสั่งได้รับการขนานนามว่าเป็นหนึ่งในคุณสมบัติที่ทรงพลังที่สุดของ Sass หลังจากที่ได้เห็นการใช้งานจริงแล้วก็เป็นที่ชัดเจนว่าทำไม
แนวคิดก็คือด้วยคำสั่งนี้คุณจะไม่ต้องรวมชื่อชั้นเรียนหลายชื่อในองค์ประกอบ HTML ของคุณและสามารถทำให้รหัสของคุณแห้ง (อย่าทำซ้ำ) ตัวเลือกของคุณสามารถสืบทอดสไตล์ของตัวเลือกอื่น ๆ จากนั้นขยายได้อย่างง่ายดายเมื่อต้องการ ตอนนี้มีประสิทธิภาพแล้ว
โอเปอเรเตอร์
การมีความสามารถในการคำนวณใน CSS ของคุณช่วยให้คุณทำสิ่งต่างๆได้มากขึ้นเช่นแปลงค่าพิกเซลเป็นเปอร์เซ็นต์ คุณจะสามารถเข้าถึงฟังก์ชันคณิตศาสตร์มาตรฐานเช่นการบวกการลบการคูณและการหาร แน่นอนว่าฟังก์ชันเหล่านี้สามารถรวมกันเพื่อสร้างการคำนวณที่ซับซ้อนได้
นอกจากนี้ Sass ยังมีฟังก์ชั่นในตัวบางอย่างเพื่อช่วยจัดการกับตัวเลข ฟังก์ชั่นเช่น เปอร์เซ็นต์ (), ชั้น () และ รอบ() เพื่อชื่อไม่กี่
