การซ้อนโครงสร้าง (Nesting) ใน SASS

การซ้อนโครงสร้าง (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 ด้วย

YouTube Video