Pagka-nest sa SASS

Ipinaliwanag ng artikulong ito ang pagka-nest sa SASS.

Ipapaliwanag namin ang pagka-nest ng SASS hakbang-hakbang, kabilang ang mga sample code para mas mapalalim ang iyong pag-unawa.

YouTube Video

Pagka-nest sa SASS

Ang SASS ay isang pinalawak na stylesheet na wika para sa CSS na nag-aalok ng maraming tampok para sa mas episyenteng pag-istilo. Sa mga tampok na ito, ang pagka-nest ay napaka-kapaki-pakinabang para sa visual na representasyon ng istraktura ng CSS.

Pangunahing Kaalaman sa Pagka-nest

Sa SASS, maaari mong ayusin ang iyong code sa pamamagitan ng pagsulat ng CSS selectors sa isang hierarchical na estraktura. Halimbawa, tingnan natin kung paano mo maisusulat muli ang sumusunod na CSS code gamit ang pagka-nest.

 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}

Gamit ang SASS, maaari mong isulat nang mas maikli ang code na ito gamit ang pagka-nest gaya ng ipinapakita sa ibaba.

 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}

• Ginagamit ng code na ito ang feature ng pagka-nest sa SASS upang ilarawan nang maikli at hierarchically ang mga estilo ng navigation menu. Sa paggamit ng pagka-nest, mas nagiging malinaw ang relasyon ng parent at child selectors at mas nababasa nang maayos ang code.

Pag-reference ng Parent Selectors (&)

Kung kailangang i-reference ang parent selector sa loob ng nested styles, gamitin ang &. Pinapayagan ka nitong gumawa ng mga selector na may partikular na states o modifiers.

 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}

• Ginagamit ng code na ito ang & sa SCSS upang tukuyin ang :hover at :active na estado para sa parent na .button selector.

Nabuong 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}

Pagka-nest ng Media Queries

Sa SASS, maaari mo ring i-nest ang mga media query. Pinapayagan ka nitong magpatupad ng responsive design habang pinananatili ang kaayusan ng iyong mga estilo.

 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}

• Ang code na ito ay naglalagay ng media query sa loob ng .container class, kaya nagbibigay-daan sa responsive design na nagbabago ang lapad batay sa laki ng screen.

Nabuong 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}

Mga Dapat Tandaan Tungkol sa Pagka-nest

Ang labis na paggamit ng pagka-nest ay maaaring magpalalim ng iyong code at magpababa ng maintainability. Dapat iwasan ang sobrang lalim ng pagka-nest gaya ng halimbawa sa ibaba.

 1.header {
 2    .nav {
 3        ul {
 4            li {
 5                a {
 6                    color: red;
 7                }
 8            }
 9        }
10    }
11}

Ang ganitong uri ng code ay masyadong malalim ang pagkaka-nest, kaya maaari itong i-refactor tulad ng sumusunod.

1.header .nav ul li a {
2    color: red;
3}

Praktikal na Halimbawa: Navigation Bar

Narito ang halimbawa ng pag-istilo ng navigation bar gamit ang pagka-nest sa 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}

• Inaayos at itinatalaga ng code na ito ang mga estilo para sa mga listahan at link sa loob ng navigation bar, kabilang ang hover effects, gamit ang pagka-nest sa SASS.

Nabuong 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}

Buod

Ang feature na pagka-nest sa SASS ay isang makapangyarihang kasangkapan para ilarawan nang maigsi ang hierarchical na estraktura ng CSS at mapahusay ang readability. Gayunpaman, mahalagang iwasan ang sobrang pagka-nest at ayusin nang maayos ang iyong code.

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