ตัวดำเนินการใน Nesting

ตัวดำเนินการใน 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 ใช้เพื่อกำหนดความสัมพันธ์ระหว่างตัวเลือก ต่อไปนี้เป็นประเภทหลักของตัวดำเนินการ

  1. ตัวเลือก Descendant (ช่องว่าง) ตัวเลือก descendant จะเลือกทุกองค์ประกอบลูกที่อยู่ภายในพาเรนต์ ตัวอย่าง: .parent .child

  2. ตัวเลือก Child (> ) ตัวเลือก child จะเลือกเฉพาะองค์ประกอบลูกโดยตรงเท่านั้น ตัวอย่าง: .parent > .child

  3. ตัวเลือก Adjacent (+) ตัวเลือก adjacent จะเลือกองค์ประกอบพี่น้องต่อเนื่องถัดไปโดยตรง ตัวอย่าง: .sibling1 + .sibling2

  4. ตัวเลือก 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 ด้วย

YouTube Video