Apakah arahan @extend dalam SASS?

SASS membolehkan pembangun menulis kod yang lebih mudah dibaca dan mengendalikannya dengan cara yang lebih baik. Ia mengandungi berbilang arahan seperti @media, @content, @include, @mixin, @extend, dll. yang menyediakan ciri supaya pembangun boleh menulis kod yang lebih baik daripada CSS biasa.

Dalam tutorial ini, kita akan belajar tentang @directives dalam SASS. Arahan @extend membolehkan pembangun memanjangkan kod CSS. Walau bagaimanapun, mixin juga memanjangkan kod CSS dan mengelakkan pertindihan. Arahan @extend juga membolehkan kami mengelakkan pertindihan kod.

Sebagai contoh, jika fon aplikasi anda mempunyai CSS biasa dan saiz fon yang berbeza diperlukan di mana-mana, anda boleh memanjangkan gaya fon dan menambah saiz fon tersuai. Ini menghapuskan keperluan untuk menulis kod pendua.

Selain itu, pembangun boleh melaksanakan warisan dalam CSS menggunakan arahan @extend, yang akan kita pelajari melalui contoh.

Tatabahasa

Pengguna boleh menggunakan arahan @extend dalam SASS mengikut sintaks berikut.

selector {
   /* CSS code */
}
Another_CSS_selector {
   @extend selector;
   /* CSS code */
}

Dalam sintaks di atas, kita boleh menulis CSS biasa dalam blok pengisytiharan "pemilih". Selepas itu kita boleh melanjutkan pemilih di dalam "Another_CSS_Selector" dan menambah kod kita sendiri.

Contoh 1 (Penggunaan asas arahan @extend)

Dalam contoh di bawah, kami telah menentukan beberapa gaya untuk elemen HTML dengan nama kelas "kad". Selepas itu, kami mentakrifkan CSS untuk elemen "small_card" dan "large_Card". Kami menggunakan arahan @extend dalam kedua-dua pemilih untuk melanjutkan CSS pemilih "kad". Selain itu, kami telah memasukkan beberapa CSS tambahan seperti lebar, tinggi, dsb. dalam pemilih "small_card" dan "large_card".

.card {
   background-color: aliceblue;
   color: green;
   border: 2px solid pink;
   border-radius: 1.4rem;
}
.small_card {
   @extend .card;
   width: 100px;
   height: 100px;
   margin: 5px;
   padding: 5px;
}
.large_card {
   @extend .card;
   width: 500px;
   height: 500px;
   margin: 10px;
   padding: 10px;
}

Output

Dalam output di bawah, kita dapat melihat bahawa gaya pemilih "kad" digunakan pada pemilih "kad_kecil" dan "kad_besar". CSS tambahan juga digunakan pada kedua-dua pemilih secara berasingan.

.card,
.small_card,
.large_card {
   background-color: aliceblue;
   color: green;
   border: 2px solid pink;
   border-radius: 1.4rem;
}
.small_card {
   width: 100px;
   height: 100px;
   margin: 5px;
   padding: 5px;
}
.large_card {
   width: 500px;
   height: 500px;
   margin: 10px;
   padding: 10px;
}

Contoh 2 (rantaian warisan menggunakan arahan @extend)

Dalam contoh di bawah, kami menunjukkan cara membuat rantaian warisan menggunakan arahan @extend. Di sini kami telah menambahkan beberapa CSS dalam pemilih ".first". Selepas itu, kami melanjutkan pemilih ".pertama" di dalam pemilih ".kedua" dan menambahkan beberapa CSS tambahan.

Seterusnya, kami melanjutkan pemilih ".second" di dalam pemilih ".third" dan pemilih ".third" di dalam pemilih ".fourth". Jadi di sini kami telah mencipta rantaian warisan menggunakan pemilih CSS yang berbeza.

.first {
   width: 100px;
   height: auto;
}
.second {
   @extend .first;
   color: blue;
}
.third {
   @extend .second;
   background-color: pink;
   border: 2px dotted red;
}
.fourth {
   @extend .third;
   margin: 10px;
   padding: 1rem;
}

Output

Output di bawah menunjukkan cara kod CSS digunakan pada pemilih CSS yang berbeza apabila kami membuat rantaian warisan menggunakan arahan @extend.

.first,
.second,
.third,
.fourth {
   width: 100px;
   height: auto;
}
.second,
.third,
.fourth {
   color: blue;
}
.third,
.fourth {
   background-color: pink;
   border: 2px dotted red;
}
.fourth {
   margin: 10px;
   padding: 1rem;
}

Contoh 3 (Pewarisan berbilang menggunakan arahan @extend)

Dalam contoh ini, kami menunjukkan cara menggunakan berbilang warisan menggunakan arahan @extend. Warisan berbilang bermakna pemilih tunggal memanjangkan berbilang pemilih.

Di sini kami mentakrifkan pemilih CSS ".container" dan ".utama" dan menambahkan beberapa CSS. Selepas itu, di dalam pemilih CSS ".element", kami melanjutkan pemilih ".container" dan ".main".

.container {
   width: 500px;
   height: 500px;
   background-color: beige;
}
.main{
   color: pink;
   float: left;
   max-width: 600px;
   max-height: 700px;
   overflow: auto;
}
.element {
   @extend .main;
   @extend .container;
   padding: 2%;
}

Output

.container,
.element {
   width: 500px;
   height: 500px;
   background-color: beige;
}
.main,
.element {
   color: pink;
   float: left;
   max-width: 600px;
   max-height: 700px;
   overflow: auto;
}
.element {
   padding: 2%;
}

Contoh 4 (menggunakan arahan @extend di dalam arahan @media)

Dalam contoh di bawah, kami menggunakan arahan @extend di dalam arahan @media. Walau bagaimanapun, pengkompil SASS melemparkan ralat apabila kami melanjutkan pemilih CSS yang ditakrifkan di luar arahan @media dalam pemilihnya.

Di sini kami telah melanjutkan pemilih CSS ".small_button" dengan pemilih CSS ".button" dalam arahan @media. Pengguna boleh melihat bahawa kedua-dua pemilih di sini terletak dalam arahan @media.

@media small_screen {
   .button {
      width: 50%;
      clear: both;
      font-size: 1.3rem;
   }
   .small_button {
      @extend .button;
      @extend .main;
      height: 25%;
   }
}

Output

@media small_screen {
   .button,
   .small_button {
      width: 50%;
      clear: both;
      font-size: 1.3rem;
   }
   .small_button {
      height: 25%;
   }
}

Contoh 5 (Pemilih Pemegang Tempat)

Seperti namanya, kita boleh mencipta pemilih ruang letak dengan menambahkan simbol (%) sebelum nama pemilih. Apabila kami menyusun kod SASS, pemilih ruang letak tidak akan muncul dalam kod output, tetapi gayanya akan ditambah sebagai ganti pengembangan.

Sebagai contoh, di sini kami mentakrifkan pemilih ruang letak "%container". Selepas itu, kami memanjangkan pemilih bekas di dalam "bekas_kecil" dan "bekas_sederhana".

Dalam output, kita boleh perhatikan bahawa ia tidak mengandungi pemilih "bekas", tetapi "bekas_kecil" dan "bekas_besar" mengandungi kod pemegang tempat "bekas".

%container {
   color: red;
   background-color: green;
   padding: 3%;
   margin: 0 auto;
}
.small_container {
   @extend %container;
   width: 100px;
   height: 100px;
}
.medium_container {
   @extend %container;
   width: 300px;
   height: 300px;
}

Output

.small_container,
.medium_container {
   color: red;
   background-color: green;
   padding: 3%;
   margin: 0 auto;
}
.small_container {
   width: 100px;
   height: 100px;
}
.medium_container {
   width: 300px;
   height: 300px;
}

Pengguna mempelajari cara menggunakan arahan @extend dalam tutorial ini. Pada asasnya, kita boleh menggunakannya untuk melanjutkan lembaran gaya dan mengelakkan pertindihan kod. Selain itu, kita boleh membuat rantaian warisan dalam CSS menggunakan arahan @extend.

Atas ialah kandungan terperinci Apakah arahan @extend dalam SASS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!