Mga Kombinator sa Pagkakabuklod

Ipinaliwanag ng artikulong ito ang tungkol sa mga kombinator sa pagkakabuklod.

Ipapaliwanag namin kung paano gamitin ang mga kombinator sa pagkakabuklod gamit ang SASS at magbibigay kami ng mga halimbawang code para mas madali mo itong maintindihan.

YouTube Video

Mga Kombinator sa Pagkakabuklod

Sa SASS, maaari kang magsulat ng mga CSS selector nang mas simple batay sa ugnayan ng magulang at anak, ngunit kailangan ng tamang pag-iingat sa paggamit ng mga kombinator tulad ng descendant at adjacent selector.

Mga Batayan ng Pagkakabuklod

Sa SASS, sa pamamagitan ng pagbubuklod ng mga child selector sa loob ng parent selector, malinaw at maikli mong naipapakita ang relasyon ng magulang at anak sa CSS.

Halimbawa: Pangunahing Pagkakabuklod

1.nav {
2    ul {
3        li {
4            color: blue;
5        }
6    }
7}

Na-compile na CSS

1.nav ul li {
2    color: blue;
3}

Paggamit ng Parent Selector Reference (&)

Ang & sa SASS ay ginagamit upang tukuyin ang kasalukuyang parent selector.

Pagsasama ng Mga Kombinator at &

Gamit ang &, makakabuo ka ng mas flexible na selectors.

Halimbawa

1.card {
2    & > .title {
3        font-weight: bold;
4    }
5    & + .card {
6        margin-top: 20px;
7    }
8}

Na-compile na CSS

1.card > .title {
2    font-weight: bold;
3}
4.card + .card {
5    margin-top: 20px;
6}

Daglat na notasyon para sa &

Sa SASS, kapag ang isang kombinador ay inilagay sa simula ng isang selector, ang parent selector ay awtomatikong inilalagay, kaya puwede mong tanggalin ang &.

Mga pagkakataon kung saan puwedeng alisin

Halimbawa, kapag isinulat mo ang + .item, ini-interpret ito ng SASS bilang & + .item at awtomatikong binubuo ang kombinasyon kasama ang parent selector.

Halimbawa

1.item {
2    + .item {
3        margin-top: 10px;
4    }
5    &--hover {
6        background-color: red;
7    }
8}

Na-compile na CSS

1.item + .item {
2  margin-top: 10px;
3}
4.item--hover {
5  background-color: red;
6}

Pangkalahatang-ideya ng Mga Kombinator

Ang mga CSS kombinator ay tumutukoy sa relasyon ng mga selector. Ang mga sumusunod ay ang pangunahing uri ng mga kombinator.

1. Descendant Selector (espasyo) Ang descendant selector ay tumutukoy sa lahat ng elementong nakapaloob bilang anak ng isang parent element. Halimbawa: .parent .child

2. Child Selector (> ) Ang child selector ay tumutukoy lamang sa mga kagyat na anak ng isang parent. Halimbawa: .parent > .child

3. Adjacent Selector (+) Ang adjacent selector ay tumutukoy sa elementong kaagad na kasunod na kapatid. Halimbawa: .sibling1 + .sibling2

4. General Sibling Selector (~) Ang general sibling selector ay tumutukoy sa lahat ng sumusunod na mga kapatid sa parehong antas. Halimbawa: .sibling1 ~ .sibling2

Paano Gamitin ang Mga Kombinator sa SASS

Descendant Selector (espasyo)

Sa pagbubuklod sa SASS, ang descendant selector gamit ang espasyo ay awtomatikong ginagamit.

Halimbawa

1.container {
2    .header {
3        .title {
4            font-size: 20px;
5        }
6    }
7}

Na-compile na CSS

1.container .header .title {
2    font-size: 20px;
3}

Child Selector (> )

Kung gusto mong gumamit ng child selector, isulat nang malinaw ang > sa iyong SASS code.

Halimbawa

1.container {
2    & > .header {
3        & > .title {
4            font-size: 20px;
5        }
6    }
7}

Na-compile na CSS

1.container > .header > .title {
2    font-size: 20px;
3}

Adjacent Selector (+)

Upang i-style ang kagyat na kasunod na kapatid na elemento, gamitin ang +.

Halimbawa

1.item {
2    & + .item {
3        margin-top: 10px;
4    }
5}

Na-compile na CSS

1.item + .item {
2    margin-top: 10px;
3}

General Sibling Selector (~)

Upang i-design ang lahat ng sumusunod na kapatid sa parehong antas, gamitin ang ~.

Halimbawa

1.alert {
2    & ~ .alert {
3        border-top: 1px solid red;
4    }
5}

Na-compile na CSS

1.alert ~ .alert {
2    border-top: 1px solid red;
3}

Mga Pseudo-Class at Pseudo-Element sa Pagkakabuklod

Madali ring maisusulat ang mga pseudo-class at pseudo-element sa SASS.

Halimbawa

1.button {
2    &:hover {
3        background-color: blue;
4    }
5    &::after {
6        content: '';
7        display: block;
8    }
9}

Na-compile na CSS

1.button:hover {
2    background-color: blue;
3}
4.button::after {
5    content: '';
6    display: block;
7}

Praktikal na Halimbawa

Narito sa ibaba ang halimbawa ng mas komplikadong design na gumagamit ng maraming kombinator.

SASS na Code

 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}

Na-compile na 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}

Buod

Kapag tama ang iyong pagkaunawa sa pagbubuklod at mga kombinator sa SASS, makakasulat ka ng mas simple at madaling basahin na CSS.

Maaari mong sundan ang artikulo sa itaas gamit ang Visual Studio Code sa aming YouTube channel. Paki-check din ang aming YouTube channel.

YouTube Video