Ringkasan penggunaan css preprocessor scss worth collect

Artikel ini membawa anda pengetahuan yang berkaitan tentang pemproses css scss Prapemproses css: menggunakan bahasa pengaturcaraan khas untuk menambah beberapa ciri pengaturcaraan pada CSS, menggunakan CSS sebagai sasaran untuk menjana fail, dan kemudian Pembangun hanya perlu menggunakan bahasa ini. untuk kerja pengekodan. Semoga ia membantu semua orang.

1. Mengapakah prapemproses CSS muncul

–CSS bukan bahasa pengaturcaraan dan hanya boleh digunakan untuk menulis gaya tapak web hari web, Pada masa itu, pembinaan laman web masih agak asas, dan gaya yang diperlukan selalunya sangat mudah. Walau bagaimanapun, dengan peningkatan dalam keperluan pengguna dan peningkatan teknologi laman web, kaedah penulisan statik CSS secara beransur-ansur tidak lagi berpuas hati dengan projek itu. Tanpa semua pembolehubah, pemalar dan sintaks pengaturcaraan lain bahasa pengaturcaraan seperti js, kod css pasti akan menjadi kembung dan sukar untuk dikekalkan. Tetapi tiada pengganti untuk CSS, jadi prapemproses CSS muncul dalam teknologi bahagian hadapan sebagai lanjutan CSS.

---

2. Prapemproses css biasa

– Setakat ini, teknologi prapemproses CSS telah agak matang, dan banyak bahasa prapemproses CSS yang berbeza telah muncul. Pada masa ini terdapat tiga arus perdana: Sass (Scss), Less dan Stylus.

---

3. Kemudahan prapemproses CSS

–Ambil Sass sebagai contoh

–Fungsi utama Sass ialah: membenarkan definisi pembolehubah dan membenarkan kod CSS Bersarang, fungsi, campuran, warisan, dsb. Fungsi ini menjadikan penulisan CSS lebih konsisten dengan tabiat bahasa pengaturcaraan, menjadikan kod CSS lebih boleh digunakan semula, menjadikan fungsi kod lebih intuitif dan lebih mudah untuk pengaturcara membaca dan menyelenggara.

---

4. Prapemproses Sass

Pembolehubah

Sass membenarkan penentuan pembolehubah untuk penggunaan semula kod, gunakan $ untuk definisi pembolehubah. Apabila terdapat blok kod yang menggunakan atribut yang sama, anda boleh menentukan pembolehubah untuk menyimpan atribut yang digunakan semula dalam pembolehubah. Apabila nilai atribut tertentu perlu diubah suai secara seragam, tidak perlu mencari atribut yang perlu diubah suai satu persatu dalam kod Sebaliknya, pembolehubah boleh diubah suai secara langsung.

Dalam arahan ubat komponen awam, gaya sempadan komponen ditetapkan secara berasingan. Gaya ini juga digunakan untuk sempadan yang memisahkan bahagian dalam komponen. Oleh itu, gaya boleh disimpan dalam pembolehubah untuk digunakan semula.

/deep/ .borderLayout.showBorder{
border: 1px solid #EBEEF5
}
/deep/.borderLayout > p.showBorder.left {
border-right: 1px solid #EBEEF5;
}

Peraturan bersarang melalui scss boleh diubah suai sebagai:

$border: 1px solid #EBEEF5
/deep/ .borderLayout.showBorder{
border: $border
}
/deep/.borderLayout > p.showBorder.left {
border-right: $border;
}

---

Bersarang

–Sass membenarkan set bersarang kod , digunakan untuk memilih keturunan. Berbanding dengan pemilih keturunan asli CSS, kod gaya bersarang adalah lebih intuitif.

/deep/ .ant-anchor-link-active>.ant-anchor-link-title{
color:#303133
}

Blok kod css komponen awam 'Arahan Dadah' digunakan untuk menetapkan gaya paparan tajuk apabila bar navigasi kiri dipilih dengan klik tetikus

Gunakan bersarang peraturan untuk menggabungkan kod Selepas bersarang:

/deep/ .ant-anchor-link-active{
 .ant-anchor-link-title{
   color:#303133
 }
}

Kod selepas bersarang lebih dekat dengan struktur seperti js, bukannya keseluruhan baris pemilih. Ia lebih kondusif untuk memerhatikan pelbagai hubungan antara kod.

Selain itu, scss juga boleh melaksanakan sarang atribut dan sarang unsur pseudo, dengan itu mencapai kod yang lebih diperkemas

---

Mixin

Dalam pengaturcaraan bahasa seperti JavaScript, ia dibenarkan untuk menulis blok kod yang perlu digunakan semula menjadi fungsi, dan memanggil ungkapan ini jika perlu untuk melengkapkan fungsi menulis kod sekali dan menggunakannya semula beberapa kali. Mixin scss juga melaksanakan fungsi yang serupa. Tetapi blok kod mixin tidak menghasilkan nilai.

Anda perlu menggunakan @mixin untuk mentakrifkan blok kod Mixin Untuk memanggil blok kod Mixin yang ditentukan, gunakan @include

Ia masih berdasarkan penerangan kod komponen. arahan ubat

/deep/ .borderLayout > p > .layoutCon {
   overflow: hidden;
   &:hover{ // 此处即为伪元素嵌套
       overflow: auto;
   }
}
.m-nav-bar{
   display: flex;
   flex-direction: column;
   overflow: auto;
   height:100%;
   overflow: hidden;
   &:hover{
       overflow: auto;
   }
}

Terdapat dua pemilih dalam komponen yang kedua-duanya mempunyai blok kod css yang sama Fungsinya adalah untuk menyembunyikan bar skrol pada halaman Apabila tetikus melayang ke kawasan yang sepadan bar skrol dipaparkan.

Kod untuk menyembunyikan bar skrol boleh ditakrifkan secara berasingan menggunakan mixin dan kemudian dipanggil.

@mixin hide-scroll{
 overflow: hidden;
   &:hover{
       overflow: auto;
   }
}

/deep/ .borderLayout > p > .layoutCon {
  @include hide-scroll;
}

.m-nav-bar{
		@include hide-scroll;
   display: flex;
   flex-direction: column;
   overflow: auto;
   height:100%;
}

---

Warisan

Warisan juga merupakan fungsi penting dalam bahasa pengaturcaraan untuk mengurangkan jumlah kod dalam scss, fungsi warisan ialah sama penting. Warisan berguna jika satu gaya hampir sama dengan gaya lain, dengan hanya sedikit perbezaan.

Apabila anda perlu mewarisi sekeping kod, anda boleh menggunakan @extend Pemilih selepas lanjutan ialah kod yang diwarisi.

(Nampaknya fungsi yang dilaksanakan secara warisan dan mixin adalah serupa. Jika kod @mixin diwarisi secara langsung, adakah fungsi yang dilaksanakan akan sama?)

(Belajar perkongsian Video : tutorial video css)

Atas ialah kandungan terperinci Ringkasan penggunaan css preprocessor scss worth collect. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!