ตัวดำเนินการใน Nesting
บทความนี้อธิบายเกี่ยวกับตัวดำเนินการใน Nesting
เราจะอธิบายวิธีการใช้ตัวดำเนินการใน Nesting กับ SASS และให้ตัวอย่างโค้ดเพื่อช่วยให้คุณเข้าใจทีละขั้นตอน
YouTube Video
ตัวดำเนินการใน Nesting
ใน SASS คุณสามารถเขียนตัวเลือก CSS ได้อย่างกระชับโดยอิงตามความสัมพันธ์ระหว่างพาเรนต์และลูก แต่ต้องใส่ใจเป็นพิเศษเมื่อต้องจัดการกับตัวดำเนินการ เช่น ตัวเลือก descendant และ adjacent
พื้นฐานของ Nesting
ใน SASS การซ้อนตัวเลือกของลูกไว้ภายในตัวเลือกของพาเรนต์จะช่วยแสดงความสัมพันธ์พาเรนต์-ลูกใน CSS ได้อย่างชัดเจนและกระชับ
ตัวอย่าง: การซ้อนขั้นพื้นฐาน
1.nav {
2 ul {
3 li {
4 color: blue;
5 }
6 }
7}
CSS ที่คอมไพล์แล้ว
1.nav ul li {
2 color: blue;
3}
อ้างอิงตัวเลือกพาเรนต์ (&
)
&
ใน SASS ใช้สำหรับอ้างอิงตัวเลือกพาเรนต์ปัจจุบัน
การผสมตัวดำเนินการและ &
เมื่อใช้ &
คุณสามารถสร้างตัวเลือกได้อย่างยืดหยุ่น
ตัวอย่าง
1.card {
2 & > .title {
3 font-weight: bold;
4 }
5 & + .card {
6 margin-top: 20px;
7 }
8}
CSS ที่คอมไพล์แล้ว
1.card > .title {
2 font-weight: bold;
3}
4.card + .card {
5 margin-top: 20px;
6}
สัญลักษณ์ย่อสำหรับ &
ใน SASS เมื่อคอมไบเนเตอร์ถูกวางไว้ที่จุดเริ่มต้นของตัวเลือก ตัวเลือกแม่จะถูกแทรกโดยอัตโนมัติ คุณจึงสามารถละ &
ได้
กรณีที่สามารถละได้
ตัวอย่างเช่น เมื่อคุณเขียน + .item
SASS จะตีความภายในว่าเป็น & + .item
และสร้างการจับคู่กับตัวเลือกแม่โดยอัตโนมัติ
ตัวอย่าง
1.item {
2 + .item {
3 margin-top: 10px;
4 }
5 &--hover {
6 background-color: red;
7 }
8}
CSS ที่คอมไพล์แล้ว
1.item + .item {
2 margin-top: 10px;
3}
4.item--hover {
5 background-color: red;
6}
ภาพรวมของตัวดำเนินการ
ตัวดำเนินการ CSS ใช้เพื่อกำหนดความสัมพันธ์ระหว่างตัวเลือก ต่อไปนี้เป็นประเภทหลักของตัวดำเนินการ
-
ตัวเลือก Descendant (ช่องว่าง) ตัวเลือก descendant จะเลือกทุกองค์ประกอบลูกที่อยู่ภายในพาเรนต์ ตัวอย่าง:
.parent .child
-
ตัวเลือก Child (
>
) ตัวเลือก child จะเลือกเฉพาะองค์ประกอบลูกโดยตรงเท่านั้น ตัวอย่าง:.parent > .child
-
ตัวเลือก Adjacent (
+
) ตัวเลือก adjacent จะเลือกองค์ประกอบพี่น้องต่อเนื่องถัดไปโดยตรง ตัวอย่าง:.sibling1 + .sibling2
-
ตัวเลือก General Sibling (
~
) ตัวเลือก general sibling จะเลือกองค์ประกอบพี่น้องทุกรายการที่ตามหลัง ตัวอย่าง:.sibling1 ~ .sibling2
วิธีใช้ตัวดำเนินการใน SASS
ตัวเลือก Descendant (ช่องว่าง)
ใน SASS การซ้อนจะใช้ตัวเลือก descendant (ช่องว่าง) โดยอัตโนมัติ
ตัวอย่าง
1.container {
2 .header {
3 .title {
4 font-size: 20px;
5 }
6 }
7}
CSS ที่คอมไพล์แล้ว
1.container .header .title {
2 font-size: 20px;
3}
ตัวเลือก Child (>
)
หากต้องการใช้ตัวเลือก child ให้เขียน >
ลงในโค้ด SASS ให้ชัดเจน
ตัวอย่าง
1.container {
2 & > .header {
3 & > .title {
4 font-size: 20px;
5 }
6 }
7}
CSS ที่คอมไพล์แล้ว
1.container > .header > .title {
2 font-size: 20px;
3}
ตัวเลือก Adjacent (+
)
หากต้องการกำหนดสไตล์ให้พี่น้องถัดไปโดยตรง ให้ใช้ +
ตัวอย่าง
1.item {
2 & + .item {
3 margin-top: 10px;
4 }
5}
CSS ที่คอมไพล์แล้ว
1.item + .item {
2 margin-top: 10px;
3}
ตัวเลือก General Sibling (~
)
หากต้องการกำหนดสไตล์ให้พี่น้องทุกรายการที่อยู่ในระดับเดียวกัน ให้ใช้ ~
ตัวอย่าง
1.alert {
2 & ~ .alert {
3 border-top: 1px solid red;
4 }
5}
CSS ที่คอมไพล์แล้ว
1.alert ~ .alert {
2 border-top: 1px solid red;
3}
Pseudo-Classes และ Pseudo-Elements ในการซ้อน
Pseudo-class และ pseudo-element ก็สามารถเขียนใน SASS ได้อย่างง่ายดายเช่นกัน
ตัวอย่าง
1.button {
2 &:hover {
3 background-color: blue;
4 }
5 &::after {
6 content: '';
7 display: block;
8 }
9}
CSS ที่คอมไพล์แล้ว
1.button:hover {
2 background-color: blue;
3}
4.button::after {
5 content: '';
6 display: block;
7}
ตัวอย่างการใช้งานจริง
ด้านล่างเป็นตัวอย่างของสไตล์ที่ซับซ้อนโดยการผสมตัวดำเนินการหลายแบบ
โค้ด SASS
1.menu {
2 .menu-item {
3 & > .submenu {
4 display: none;
5
6 & > .submenu-item {
7 font-size: 14px;
8 }
9 }
10 & + .menu-item {
11 margin-left: 15px;
12 }
13 }
14}
CSS ที่คอมไพล์แล้ว
1.menu .menu-item > .submenu {
2 display: none;
3}
4.menu .menu-item > .submenu > .submenu-item {
5 font-size: 14px;
6}
7.menu .menu-item + .menu-item {
8 margin-left: 15px;
9}
สรุป
หากคุณเข้าใจการซ้อนและตัวดำเนินการใน SASS อย่างถูกต้อง คุณจะสามารถเขียน CSS ได้กระชับและอ่านง่ายยิ่งขึ้น
คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย