การซ้อนโครงสร้าง (Nesting) ใน SASS
บทความนี้อธิบายเรื่องการซ้อนโครงสร้างใน SASS
เราจะอธิบายการซ้อนโครงสร้างใน SASS ทีละขั้นตอน พร้อมตัวอย่างโค้ดเพื่อให้คุณเข้าใจมากยิ่งขึ้น
YouTube Video
การซ้อนโครงสร้าง (Nesting) ใน SASS
SASS เป็นภาษาสำหรับเขียนสไตล์ชีทที่ขยายความสามารถของ CSS โดยมีฟีเจอร์มากมายเพื่อการจัดการสไตล์ที่มีประสิทธิภาพ ในบรรดาฟีเจอร์ต่าง ๆ นั้น การซ้อนโครงสร้าง (Nesting) เป็นคุณสมบัติที่มีประโยชน์ในการแสดงโครงสร้างลำดับชั้นของ CSS อย่างชัดเจน
พื้นฐานของการซ้อนโครงสร้าง (Nesting)
ใน SASS คุณสามารถจัดระเบียบโค้ดให้ดูง่ายขึ้นโดยเขียนตัวเลือก CSS แบบโครงสร้างลำดับชั้น ตัวอย่างเช่น ลองดูว่าคุณสามารถเขียนโค้ด CSS ต่อไปนี้ใหม่โดยใช้การซ้อนโครงสร้างได้อย่างไร
1/* CSS */
2.nav {
3 background-color: #333;
4}
5.nav ul {
6 margin: 0;
7 padding: 0;
8}
9.nav ul li {
10 list-style: none;
11}
12.nav ul li a {
13 color: #fff;
14 text-decoration: none;
15}
เมื่อใช้ SASS คุณสามารถเขียนโค้ดนี้แบบกระชับโดยใช้การซ้อนโครงสร้างดังตัวอย่างด้านล่าง
1/* SASS */
2.nav {
3 background-color: #333;
4
5 ul {
6 margin: 0;
7 padding: 0;
8
9 li {
10 list-style: none;
11
12 a {
13 color: #fff;
14 text-decoration: none;
15 }
16 }
17 }
18}
- โค้ดนี้ใช้คุณสมบัติการซ้อนโครงสร้างของ SASS เพื่อกำหนดสไตล์เมนูนำทาง (navigation menu) อย่างกระชับและเป็นลำดับขั้น ด้วยการใช้การซ้อนโครงสร้าง ความสัมพันธ์ระหว่างแม่ลูก (parent-child) จะเห็นได้ชัดเจนขึ้นและทำให้อ่านโค้ดได้ง่ายขึ้น
การอ้างอิงตัวเลือกแม่ (&
)
เมื่อคุณต้องการอ้างอิง selector ของแม่ภายในสไตล์ที่ซ้อนกันอยู่ ให้ใช้ &
วิธีนี้ช่วยให้คุณสร้าง selector ที่มีสถานะหรือคุณสมบัติเฉพาะได้
1.button {
2 background-color: #007bff;
3 color: #fff;
4
5 &:hover {
6 background-color: #0056b3;
7 }
8
9 &:active {
10 background-color: #003f7f;
11 }
12}
- โค้ดนี้ใช้
&
ใน SCSS เพื่อกำหนดสถานะ:hover
และ:active
สำหรับ selector.button
ที่เป็นแม่
CSS ที่ถูกสร้างขึ้น
1.button {
2 background-color: #007bff;
3 color: #fff;
4}
5.button:hover {
6 background-color: #0056b3;
7}
8.button:active {
9 background-color: #003f7f;
10}
การซ้อนโครงสร้าง Media Queries
ใน SASS คุณสามารถซ้อน Media Query ได้เช่นกัน วิธีนี้ช่วยให้คุณทำ Responsive Design ได้ โดยยังคงความเกี่ยวข้องของสไตล์แต่ละส่วน
1.container {
2 width: 100%;
3
4 @media (min-width: 768px) {
5 width: 750px;
6 }
7
8 @media (min-width: 1024px) {
9 width: 970px;
10 }
11}
- โค้ดนี้ซ้อน Media Query ไว้ในคลาส
.container
เพื่อให้เกิด Responsive Design ที่เปลี่ยนความกว้างตามขนาดหน้าจอ
CSS ที่ถูกสร้างขึ้น
1.container {
2 width: 100%;
3}
4@media (min-width: 768px) {
5 .container {
6 width: 750px;
7 }
8}
9@media (min-width: 1024px) {
10 .container {
11 width: 970px;
12 }
13}
ข้อควรระวังเกี่ยวกับการซ้อนโครงสร้าง (Nesting)
การใช้การซ้อนโครงสร้างมากเกินไปอาจทำให้โค้ดซับซ้อนเกินไปและดูแลรักษายาก คุณควรหลีกเลี่ยงการซ้อนโครงสร้างที่ลึกเกินไปเหมือนตัวอย่างด้านล่าง
1.header {
2 .nav {
3 ul {
4 li {
5 a {
6 color: red;
7 }
8 }
9 }
10 }
11}
โค้ดประเภทนี้มีการซ้อนกันลึกเกินไป ดังนั้นสามารถปรับโครงสร้างใหม่ได้ดังนี้
1.header .nav ul li a {
2 color: red;
3}
ตัวอย่างการใช้งานจริง: แถบเมนูนำทาง (Navigation Bar)
ด้านล่างนี้คือตัวอย่างการจัดสไตล์แถบเมนูนำทางโดยใช้การซ้อนโครงสร้างของ SASS
1.navbar {
2 background-color: #222;
3 color: #fff;
4
5 ul {
6 display: flex;
7 list-style: none;
8 margin: 0;
9 padding: 0;
10
11 li {
12 margin-right: 15px;
13
14 a {
15 color: #fff;
16 text-decoration: none;
17
18 &:hover {
19 text-decoration: underline;
20 }
21 }
22 }
23 }
24}
- โค้ดนี้จัดระเบียบและกำหนดสไตล์สำหรับลิสต์และลิงก์ในแถบเมนูนำทาง รวมถึงเอฟเฟกต์ hover โดยใช้การซ้อนโครงสร้างใน SASS
CSS ที่ถูกสร้างขึ้น
1.navbar {
2 background-color: #222;
3 color: #fff;
4}
5.navbar ul {
6 display: flex;
7 list-style: none;
8 margin: 0;
9 padding: 0;
10}
11.navbar ul li {
12 margin-right: 15px;
13}
14.navbar ul li a {
15 color: #fff;
16 text-decoration: none;
17}
18.navbar ul li a:hover {
19 text-decoration: underline;
20}
สรุป
ฟีเจอร์การซ้อนโครงสร้างใน SASS เป็นเครื่องมือที่มีประสิทธิภาพสำหรับการอธิบายโครงสร้างแบบลำดับชั้นของ CSS อย่างกระชับและช่วยให้โค้ดอ่านง่ายขึ้น อย่างไรก็ตาม ควรหลีกเลี่ยงการซ้อนโครงสร้างมากเกินไปและจัดระเบียบโค้ดให้เหมาะสม
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย