Faedah warisan melalui @extend dalam sass

Takeaways Key

Ciri @Extend Sass's Sass membolehkan kelas berkongsi sifat antara satu sama lain, memudahkan organisasi gaya CSS dan membuat laman web berskala besar lebih mudah untuk gaya dengan berkesan.

Ciri @Extend dapat mengurangkan pertindihan dalam stylesheets CSS dan menjadikan kelas HTML bersih, menjimatkan masa dan usaha pemaju, dan menjadikan struktur CSS lebih teratur dan lebih mudah untuk dikekalkan.
• Walau bagaimanapun, berhati -hati dinasihatkan apabila menggunakan @Extend kerana ia secara drastik dapat meningkatkan saiz fail CSS dan prestasi impak jika digunakan dengan sembarangan. Ia hanya boleh digunakan apabila kelas yang diwarisi secara langsung berkaitan dengan objek yang diwarisi dari.
• Sass adalah lanjutan yang berharga kepada CSS yang boleh menjadikannya lebih bersih, berstruktur, dan lebih mudah untuk dibangunkan dan dikekalkan. Adalah disyorkan untuk mereka yang belum mencubanya sebelum ini, tetapi ia harus digunakan dengan teliti untuk mengelakkan perangkap yang berpotensi.
Menganjurkan gaya CSS telah menjadi penting untuk menggayakan laman web berskala besar dengan berkesan, tetapi gaya -gaya dalam projek kami semakin besar, lebih kompleks dan sukar untuk dikekalkan ketika mereka berkembang. Di sinilah Sass datang untuk menjadikan semuanya lebih mudah. ​​
Bagi mereka yang belum meneroka SASS, ia adalah lanjutan CSS. Ia menyediakan ciri -ciri untuk kita yang tidak wujud dalam CSS asli seperti ungkapan, pembolehubah, bersarang, mixins (nama sass untuk fungsi), warisan, dan banyak lagi.

Dalam artikel ini saya akan memberikan gambaran keseluruhan warisan dalam SASS menggunakan @Extend. Saya akan merangkumi kelebihan ciri ini dan pengalaman saya apabila menggunakannya dalam projek saya sendiri. Adalah penting untuk diperhatikan bahawa @Extend boleh disalahgunakan, Hugo Giraudel di sini di SitePoint bahkan menulis sekeping mengapa anda harus mengelakkan sass @extend. Oleh itu, ambil perhatian bahawa @Extend boleh menjadi subjek perbalahan.

Tonton Atoz: Sass Belajar surat sass mengikut surat

Tonton kursus ini Tonton kursus ini

Dalam contoh berikut, saya akan menggunakan sintaks SCSS. Ini adalah sintaks yang mengandungi semua ciri dan struktur CSS, dengan ciri -ciri tambahan SASS.

Apa itu @extend?

@Extend adalah ciri SASS yang membolehkan kelas berkongsi satu set sifat antara satu sama lain. Pemilih yang @Extend kelas dalam SASS akan mempunyai pemilih mereka disertakan tepat di sebelah kelas yang diperluaskan, menghasilkan senarai yang dipisahkan koma.

sintaksinya kelihatan seperti:

Penggunaan

menggunakan @extend kelihatan seperti:

<span><span>@extend .class-name;</span></span>

ini disusun kepada:

<span><span>.foo</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span><span>@extend .foo;</span>
</span>  <span>background-color: red;
</span><span>}</span>

Dalam contoh di atas, saya ditakrifkan .foo dan .bar yang mempunyai ciri -ciri berikut:

• .bar mewarisi dari .foo, yang mengandungi semua sifat kelas induk .foo.
• .bar meluas .foo dengan menambahkan warna latar belakang harta.

Mengetahui asas -asas, kita sekarang akan melihat beberapa kes penggunaan untuk @extend.

menggunakan @extend

Gunakan Kes 1: Duplikasi

Duplikasi sifat antara kelas adalah sukar untuk dielakkan ketika menyatukan CSS. Ini boleh menjadikan stylesheet anda lebih rumit. Contohnya:

seperti yang dapat kita lihat dalam contoh di atas, .breakfast, .lunch dan .dinner mengandungi warna, sempadan, bayang-bayang kotak, margin dan padding dengan nilai yang sama. Ciri -ciri ini diduplikasi, menjadikan kod kita kelihatan kemas, jadi mari kita menulis semula dengan @extend:

<span><span>@extend .class-name;</span></span>

Dalam CSS yang ditulis semula di atas, kita dapat melihat bahawa menggunakan SASS membantu markup kami menjadi lebih bersih daripada CSS sahaja.

<span><span>.foo</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span><span>@extend .foo;</span>
</span>  <span>background-color: red;
</span><span>}</span>

Lihat pena Duplikasi sifat dalam SCSS oleh SitePoint (@SitePoint) pada codepen.

Kes 2: Menggerakkan pelbagai kelas daripada html

Terdapat sering kes ketika merancang halaman apabila satu kelas harus mempunyai semua gaya kelas lain. Kami sering mengendalikan kes ini dengan menggunakan pelbagai nama kelas dalam HTML.

CSS kami akan kelihatan seperti:

HTML kami untuk CSS:

<span><span>.foo, .bar</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span>background-color: red;
</span><span>}</span>

Dalam contoh di atas, kami mempunyai dua kelas dalam

kami. Bayangkan betapa buruknya ini jika kita mempunyai beberapa kelas:

<span><span>.breakfast</span> {
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.lunch</span> {
</span>  <span>background-color: yellow;
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.dinner</span> {
</span>  <span>background-color: orange;
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}</span>

Kod HTML di atas boleh menjadi agak kompleks. Sesetengah pemaju web lebih suka dengan cara ini, namun saya lebih suka warisan dalam gaya sass saya:

<span><span>.meal-box</span> {
</span>  <span>color: #333;
</span>  <span>border: 1px solid #bbb;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>margin: 0 0 10px;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.breakfast</span> {
</span>  <span><span>@extend .meal-box;</span>
</span><span>}
</span>
<span><span>.lunch</span> {
</span>  <span><span>@extend .meal-box;</span>
</span>  <span>background-color: yellow;
</span><span>}
</span>
<span><span>.dinner</span> {
</span>  <span><span>@extend .meal-box;</span>
</span>  <span>background-color: orange;
</span><span>}</span>

Dengan HTML kami sekarang kelihatan seperti:

<span><span>.candy</span> {
</span>  <span>background-color: black;
</span>  <span>border: 1px solid red;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.strawberry-candy</span> {
</span>  <span>background-color: #ff6666;
</span>  <span>color: white;
</span><span>}</span>

Kali ini kita hanya memerlukan satu kelas. Semua gaya yang ditakrifkan untuk kelas. Candy juga digunakan untuk kelas .Strawberry-Candy, kini kod HTML kami menjadi lebih bersih.

<span><span><span><div</span> class<span>="candy strawberry-candy"</span>></span>
</span>  This is the strawberry candy!
<span><span><span></div</span>></span></span>

Lihat pena bergerak pelbagai kelas keluar dari HTML dengan @Extend oleh SitePoint (@SitePoint) pada Codepen.

Kes 3: Memperluas pemilih kompleks

pemilih kelas bukanlah satu -satunya perkara yang boleh dilanjutkan. Kami juga boleh memperluaskan pemilih yang kompleks ke dalam satu elemen, seperti: hover, .parentclass.childclass dan sebagainya. Contohnya:

ini disusun kepada:

<span><span><span><div</span> class<span>="candy strawberry-candy sugar-free-candy free-candy"</span>></span>
</span>  This is just an example
<span><span><span></div</span>></span></span>

yang kemudiannya boleh kita gunakan dalam html kita seperti ini:

<span><span>.candy</span> {
</span>  <span>background-color: black;
</span>  <span>border: 1px solid red;
</span>  <span>box-shadow: 1px 1px 0 #ddd;
</span>  <span>padding: 15px;
</span><span>}
</span>
<span><span>.strawberry-candy</span> {
</span>  <span><span>@extend .candy;</span>
</span>  <span>background-color: #ff6666;
</span>  <span>color: white;
</span><span>}</span>

lihat pena yang memanjangkan pemilih kompleks dengan @Extend oleh SitePoint (@SitePoint) pada CodePen.

<span><span><span><div</span> class<span>="strawberry-candy"</span>></span>
</span>  This is the very sweet candy!
<span><span><span></div</span>></span></span>

Kelebihan @Extend

Berjalan melalui contoh -contoh di atas, kita dapat melihat beberapa kelebihan warisan melalui @extend. Ini termasuk:

Kelas HTML Cleaner

seperti yang anda lihat dalam kajian kes kedua, menggunakan begitu banyak kelas dalam satu elemen boleh menjadikannya sukar untuk menentukan punca akar jika anda menghadapi masalah. Struktur tag HTML juga tidak kelihatan sangat bagus dan bersih.

Dari sudut pandangan saya ketika membuat produk yang baik, kami menganggap bukan sahaja perspektif pengguna akhir tetapi juga kualiti strategi pembangunan kami. Oleh itu, @Extend membantu kami menyusun kelas kami dengan cara yang lebih bersih dalam setiap elemen HTML.

Mengurangkan pertindihan CSS

Dalam pembangunan web, kami sentiasa mempunyai beberapa pertindihan dalam gaya CSS kami. Oleh itu, menggunakan semula kod sumber CSS bertulis boleh sangat diperlukan. @Extend dapat membantu kami menggunakan semula CSS kami apabila sesuai dan bersih untuk berbuat demikian.

menjimatkan masa dan usaha

Dengan kedua -dua kelebihan yang disebutkan di atas, pemaju dapat menjimatkan masa dan usaha semasa berkembang.

Pemaju boleh menggunakan semula CSS untuk pelbagai elemen, mengurangkan usaha yang diperlukan untuk mencari punca utama masalah CSS dan menjadikan struktur CSS mereka bagus dan bersih.

Walau bagaimanapun, menggunakan @Extend bukan tanpa bahaya. Kelebihan di atas hanya digunakan apabila @Extend digunakan dengan teliti - ia boleh digunakan terlalu banyak menyebabkan kesan yang bertentangan.

bahaya @extend

Saya telah memohon @Extend dalam projek saya sendiri dan saya perlu memberikan kata -kata berhati -hati apabila menggunakan @extend. Anda mesti berhati -hati.

@extend boleh meningkatkan saiz fail CSS anda secara drastik dan memberi kesan kepada prestasi CSS anda apabila digunakan tanpa penjagaan. Saya mempunyai bahagian kesakitan saya dalam situasi seperti ini dan menghabiskan banyak masa refactoring penggunaan sass saya @extend. Berikut adalah contoh bagaimana saya mula menggunakan @Extend secara tidak betul:

Contoh:

<span><span>@extend .class-name;</span></span>

dikumpulkan kepada:

<span><span>.foo</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span><span>@extend .foo;</span>
</span>  <span>background-color: red;
</span><span>}</span>

Dalam contoh ini, .base-CSS adalah kelas dengan banyak kelas yang diwarisi berdasarkannya. Jika anda melihat contohnya, anda dapat melihat bahawa kelas yang diwarisi tidak berkaitan dengan satu sama lain. Saya mempunyai .btn untuk butang saya dan. Booter untuk footer saya. Jika saya mempunyai 100 kelas yang mewarisi dari .base-CSS, pemilih yang mempunyai ciri-ciri .base-CSS akan meningkat. Ini dengan ketara dan tidak perlu merumitkan hasil akhir CSS kami. Selain itu, ini menjadikannya lebih sukar untuk memeriksa sifat setiap pemilih.

Setelah mempraktikkan semula sass saya, saya menyedari bahawa kita hanya perlu menggunakan @Extend apabila kelas yang diwarisi secara langsung berkaitan dengan objek yang kita mewarisi dari. Ia harus menjadi variasi objek atau gaya, bukannya peraturan selimut untuk banyak unsur yang tidak berkaitan. Untuk warisan seperti contoh saya di atas, kita harus bergantung pada keupayaan sedia ada CSS untuk melambangkan gaya kita ke dalam elemen kanak -kanak.

<span><span>.foo, .bar</span> {
</span>  <span>color: black;
</span>  <span>border: 1px solid black;
</span><span>}
</span>
<span><span>.bar</span> {
</span>  <span>background-color: red;
</span><span>}</span>

dikumpulkan kepada:

<span><span>@extend .class-name;</span></span>

kita dapat melihat bahawa contoh di atas adalah lebih tepat dan munasabah. Kami telah mengurangkan skop dengan menggunakan @Extend hanya ke kelas yang harus mewarisi dari satu sama lain kerana menjadi variasi jenis objek. Sebagai contoh, gaya di atas semuanya berkaitan dengan jenis butang yang berbeza.

Kesimpulan

SASS adalah lanjutan yang berharga yang dapat meningkatkan CSS kami untuk menjadikannya lebih bersih, berstruktur, teratur dan mudah dibangunkan dan dikekalkan. Jika anda belum mencuba SASS sebelum ini, saya sangat mengesyorkannya. Apabila anda berasa lebih selesa dengan asas -asas SASS, kami mengesyorkan membaca artikel SitePoint Hugo Giraudel mengenai apa yang tiada siapa yang memberitahu anda tentang @extend SASS. Kami juga mempunyai panduan rujukan keseluruhan SASS di Rujukan Sass SitePoint dengan banyak contoh untuk anda meneroka.

Terima kasih kepada Steve dan Ezekiel dalam komen untuk mengambil kesilapan dalam versi pertama siaran ini, sejak itu telah dikemas kini.

Soalan Lazim (Soalan Lazim) mengenai Warisan melalui Sass

Apakah kelebihan utama menggunakan @Extend dalam SASS?

Kelebihan utama menggunakan @Extend dalam SASS adalah bahawa ia membolehkan kebolehgunaan semula kod, yang membawa kepada kod yang lebih bersih dan lebih diselenggara. Ia membolehkan kelas mewarisi gaya kelas lain, dengan itu mengurangkan keperluan untuk menulis kod berulang. Ini bukan sahaja menjadikan kod lebih mudah dibaca tetapi juga mengurangkan saiz fail, yang dapat meningkatkan masa beban laman web. @Extend dan @mixin dalam SASS membenarkan kebolehgunaan semula kod, mereka bekerja dengan cara yang berbeza. @Extend membolehkan pemilih mewarisi gaya pemilih lain, sedangkan @mixin termasuk blok gaya yang boleh digunakan semula di seluruh stylesheet. Perbezaan utama ialah @Extend menghasilkan kurang output CSS kerana ia mengumpulkan pemilih dengan gaya yang sama bersama -sama, manakala @mixin boleh membawa kepada lebih banyak output CSS kerana ia menduplikasi gaya setiap kali ia dimasukkan. @Extend dengan pemilih kompleks dalam sass?

Ya, anda boleh menggunakan @Extend dengan pemilih kompleks dalam SASS. Walau bagaimanapun, penting untuk diperhatikan bahawa @Extend hanya akan berfungsi dengan pemilih yang hadir dalam fail yang sama. Ia tidak akan berfungsi dengan pemilih yang ditakrifkan dalam fail yang berbeza atau yang dihasilkan oleh @Mixin atau fungsi. 🎜>

Dalam SASS, anda tidak boleh menggunakan @Extend di dalam pertanyaan media untuk melanjutkan kelas yang ditakrifkan di luar pertanyaan media. Ini kerana @Extend berfungsi dengan mengumpulkan pemilih dengan gaya yang sama bersama -sama, dan ia tidak dapat melakukan ini di seluruh blok pertanyaan media yang berbeza. Untuk bekerja di sekitar ini, anda boleh menentukan kelas yang anda ingin melanjutkan ke dalam blok pertanyaan media yang sama.

Bolehkah saya menggunakan @Extend dalam peraturan bersarang di sass?

Ya, anda boleh menggunakan @Extend dalam peraturan bersarang di SASS. Walau bagaimanapun, penting untuk diperhatikan bahawa pemilih yang dilanjutkan akan dimasukkan ke tahap atas stylesheet, bukan dalam peraturan bersarang. Ini kerana SASS mengikuti peraturan CSS bahawa semua pemilih mesti berada di peringkat tertinggi dokumen. 🎜> Ralat ini berlaku apabila anda cuba menggunakan @Extend di luar peraturan yang ditetapkan dalam SASS. Untuk mengelakkan kesilapan ini, pastikan anda menggunakan @Extend dalam set peraturan. Sebagai contoh, bukannya menulis "@extend .class;", anda harus menulis ". Baru-kelas {@extend .class; } ".

Bolehkah saya menggunakan @Extend dengan kelas pseudo dalam sass?

Ya, anda boleh menggunakan @Extend dengan kelas pseudo dalam sass. Walau bagaimanapun, penting untuk diperhatikan bahawa @Extend hanya akan memanjangkan gaya kelas pseudo, bukan kelas pseudo itu sendiri. Ini bermakna jika anda menggunakan "@extend: hover;", ia tidak akan menambah kesan hover kepada pemilih, tetapi sebaliknya akan memanjangkan gaya: hover pseudo-class. Tidak bekerja di Sass?

Mungkin ada beberapa sebab mengapa @Extend anda tidak berfungsi di SASS. Salah satu sebab yang sama ialah pemilih yang anda cuba luangkan tidak hadir dalam fail yang sama. Sebab lain ialah anda cuba memperluaskan pemilih dalam pertanyaan media atau peraturan bersarang, yang tidak dibenarkan dalam SASS. Pastikan untuk menyemak mata ini jika @Extend anda tidak berfungsi.

Bolehkah saya menggunakan @Extend dengan pelbagai kelas dalam sass?

Ya, anda boleh menggunakan @Extend dengan pelbagai kelas dalam sass. Anda boleh melakukan ini dengan memisahkan kelas dengan koma. Sebagai contoh, ".snew-class {@extend .class1, .class2; } "Akan memanjangkan gaya kedua -dua .class1 dan .class2. kelas lanjutan di Sass. Anda boleh melakukan ini dengan menentukan gaya baru selepas Arahan @Extend. Gaya baru akan mengatasi gaya kelas lanjutan untuk pemilih yang menggunakan @extend.

Atas ialah kandungan terperinci Faedah warisan melalui @extend dalam sass. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!