Penetasan dalam SASS

Artikel ini menerangkan penetasan dalam SASS.

Kami akan menerangkan penetasan SASS langkah demi langkah, termasuk contoh kod untuk memperdalam pemahaman anda.

YouTube Video

Penetasan dalam SASS

SASS ialah bahasa helaian gaya lanjutan untuk CSS yang menawarkan banyak ciri untuk penggayaan yang efisien. Antara ciri-ciri ini, penetasan adalah sangat berguna untuk memaparkan struktur hierarki CSS secara visual.

Asas Penetasan

Dalam SASS, anda boleh menyusun kod anda secara visual dengan menulis penyeleksi CSS dalam struktur hierarki. Sebagai contoh, mari kita lihat bagaimana anda boleh menulis semula kod CSS berikut dengan menggunakan penetasan.

 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}

Dengan menggunakan SASS, anda boleh menulis kod ini secara ringkas dengan penetasan seperti di bawah.

 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}

• Kod ini menggunakan ciri penetasan dalam SASS untuk menerangkan gaya menu navigasi secara ringkas dan hierarki. Dengan menggunakan penetasan, hubungan induk-anak menjadi lebih jelas secara visual dan kebolehbacaan bertambah baik.

Merujuk Penyeleksi Induk (&)

Apabila anda perlu merujuk penyeleksi induk dalam gaya bertindih, gunakan &. Ini membolehkan anda membuat penyeleksi dengan keadaan atau pengubahsuaian tertentu.

 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}

• Kod ini menggunakan & dalam SCSS untuk mentakrif keadaan :hover dan :active bagi penyeleksi induk .button.

CSS Terhasil

 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}

Penetasan Media Query

Dalam SASS, anda juga boleh menetas media query. Ini membolehkan anda melaksanakan reka bentuk responsif sambil mengekalkan kaitan gaya anda.

 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}

• Kod ini menetas media query di dalam kelas .container, membolehkan reka bentuk responsif yang mengubah lebar mengikut saiz skrin.

CSS Terhasil

 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}

Perkara Penting Tentang Penetasan

Menggunakan penetasan berlebihan boleh menyebabkan kod anda menjadi terlalu bersarang dan sukar diselenggara. Anda harus mengelakkan penetasan mendalam seperti contoh di bawah.

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

Kod seperti ini terlalu bersarang, jadi ia boleh diubah suai seperti berikut.

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

Contoh Praktikal: Bar Navigasi

Di bawah adalah contoh penggayaan bar navigasi menggunakan penetasan 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}

• Kod ini menyusun dan mentakrif gaya untuk senarai dan pautan dalam bar navigasi, termasuk kesan hover, menggunakan penetasan SASS.

CSS Terhasil

 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}

Ringkasan

Ciri penetasan dalam SASS ialah alat yang berkuasa untuk menerangkan struktur hierarki CSS secara ringkas dan meningkatkan kebolehbacaan. Walau bagaimanapun, adalah penting untuk mengelakkan penetasan yang berlebihan dan menyusun kod anda dengan baik.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video