Warisi kelas ke dalam fail lain dalam Sass

SASS ialah prapemproses yang dibina di atas CSS untuk memanipulasi kod CSS dengan lebih baik. Ia mengandungi berbilang arahan dan peraturan yang memudahkan penulisan kod CSS. Ia juga mengandungi beberapa ciri yang sangat berguna seperti pewarisan, pernyataan if/else, fungsi, dsb.

Dalam SASS, kami boleh mengimport satu fail ke fail lain dan menggunakan kandungan satu fail dalam fail lain. Ia juga membolehkan kami mencipta warisan antara berbilang kelas. Kita boleh mewarisi satu kelas ke kelas lain menggunakan arahan @extend. Dengan menggunakan warisan dalam CSS, kami boleh meningkatkan kebolehgunaan semula kod kami.

Dalam tutorial ini, kita akan belajar cara mewarisi kelas daripada fail lain dalam SASS.

Tatabahasa

Pengguna boleh mengikuti sintaks di bawah untuk mewarisi kelas ke dalam fail lain dalam SASS.

@import "filename";

.element {
   @extend .classname;
   // other css
}

Kami telah menggunakan peraturan @import dalam sintaks di atas untuk mengimport fail. Selepas itu, kami melanjutkan kelas "elemen" dengan kelas "nama kelas" menggunakan arahan @extend.

Contoh 1 (warisan kelas asas)

Dalam contoh di bawah, kami menunjukkan pewarisan kelas asas. Di sini, dalam fail card.scss, kami telah menambah kelas 'kad' dengan beberapa sifat CSS. Kita boleh mengatakan bahawa ia mengandungi semua sifat CSS asas dan nilai yang kita perlukan untuk membuat kad.

Dalam fail style.scss, kami menggunakan arahan @import untuk mengimport fail card.scss. Selepas itu, kami menggayakan kelas 'card-div' dan 'card-container'. Pada masa yang sama, kami menggunakan peraturan @extend untuk mewarisi kelas 'card-div' dan 'card-container' ke dalam kelas 'card'.

Dalam output, kita boleh melihat hasil kelas yang diwarisi. Selain itu, pengguna boleh melihat kebolehgunaan semula kod dalam contoh di bawah.

Nama fail - card.scss

.card {
   background-color: aliceblue;
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 10px;
   margin: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

Nama fail – style.scss

@import "card";

.card-container {
   @extend .card;
   width: 300px;
   height: 300px;
}
.card-div {
   @extend .card;
   width: 200px;
   height: 200px;
}

Output

.card,
.card-container,
.card-div {
   background-color: aliceblue;
   border: 1px solid #ccc;
   border-radius: 5px;
   padding: 10px;
   margin: 10px;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

.card-container {
   width: 300px;
   height: 300px;
}

.card-div {
   width: 200px;
   height: 200px;
}

Contoh 2 (Mewarisi pelbagai kelas)

Dalam contoh di bawah, kami menunjukkan warisan berbilang kelas. Kami menambah kelas berbeza yang mengandungi sifat CSS dalam fail "specs.scss". Dalam fail style.scss, kami mengimport fail "specs.scss". Selain itu, kami melanjutkan kesemua 3 kelas fail "specs.scss" ke dalam kelas "div" menggunakan arahan @extend. Jadi kami mewarisi berbilang kelas ke dalam satu kelas daripada fail lain.

Nama fail - specs.scss

.margin {
   margin-top: 10px;
   margin-left: 10px;
}
.padding {
   padding-top: 10px;
   padding-left: 10px;
}
.size {
   font-size: 20px;
}

Nama fail – style.scss

@import "specs";

.div {
   @extend .margin;
   @extend .padding;
   @extend .size;
   width: 300px;
   height: 300px;
   border: 2px dotted blue;
   border-radius: 12px;
}

Output

.margin,
.div {
   margin-top: 10px;
   margin-left: 10px;
}
.padding,
.div {
   padding-top: 10px;
   padding-left: 10px;
}
.size,
.div {
   font-size: 20px;
}
.div {
   width: 300px;
   height: 300px;
   border: 2px dotted blue;
   border-radius: 12px;
}

Contoh 3 (warisan bersarang)

Dalam contoh di bawah, kami menunjukkan warisan bersarang. Dalam fail form.scss, kami mencipta dua kelas berbeza dan menambah sifat CSS.

Dalam fail style.scss, kami mewarisi kelas 'form-group' melalui kelas 'form-field' dan menambah kelas 'form-input'. Kelas 'input-field' mewarisi kelas 'form-input'. Jadi, kami menggunakan kelas warisan bersarang.

Nama fail - form.scss

// form.scss
.form-field {
   margin-bottom: 20px;
}
input-field {
   border: 1px solid #cccccc;
   padding: 5px;
}

Nama fail – style.scss

@import 'fonts';

.form-group {
   @extend .form-field;

   .form-input {
      @extend .input-field;
   }
}

Output

.form-field,
.form-group {
   margin-bottom: 20px;
}
.input-field,
.form-group .form-input {
   border: 1px solid #cccccc;
   padding: 5px;
}

Pengguna belajar untuk mewarisi kelas dari satu fail ke fail yang lain dalam SASS. Pengguna perlu mengimport fail yang mengandungi kelas dan menggunakan nama kelas arahan @extend untuk mewarisi dari satu kelas ke kelas yang lain.

Atas ialah kandungan terperinci Warisi kelas ke dalam fail lain dalam Sass. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!