Panduan Pengaturcaraan Gaya SASS CSS_HTML/Xhtml_Penghasilan Halaman Web-html tutorial-php.cn

Memandangkan semakin ramai pembangun menggunakan SASS, kami perlu memberi perhatian kepada bilangan kod SASS. Kita boleh bermula dari sintaks CSS (helaian gaya berlatarkan) untuk menerangkan beberapa ciri khas sintaks SASS Lagipun, panduan gaya CSS adalah sangat biasa.

Artikel ini terutamanya memperkenalkan beberapa ciri yang saya minati secara peribadi. Anda mungkin boleh mendapat manfaat daripadanya dan membentuk set panduan penggunaan SASS anda sendiri.
Teruskan mengekalkan peraturan pemformatan CSS biasa dan panduan gaya anda

Artikel ini memfokuskan pada membincangkan beberapa kandungan tentang SASS, tetapi atas dasar ini, pembangun harus mengekalkan peraturan pemformatan sedia ada dan baik mereka. Jika anda belum membangunkan set peraturan pemformatan anda sendiri, berikut ialah ulasan beberapa panduan gaya yang akan membantu anda membangunkan tabiat menulis CSS anda sendiri. Berikut adalah beberapa perkara yang disertakan:

1. Pastikan lekukan garis konsisten
2. Pastikan bilangan ruang sebelum dan selepas titik bertindih/tanda gigi konsisten
3. Pastikan satu pemilih setiap baris dan satu peraturan setiap baris
4. Cuba untuk tulis atribut yang berkaitan dalam Bersama
5. Mempunyai rancangan untuk peraturan penamaan nama kelas
6. Elakkan menggunakan pemilih id CSS
7. Tunggu

Seterusnya mari belajar cara menulis kod SASS yang cantik, mengambil menulis sifat kelas .weather sebagai contoh:
Senarai pertama @extend(s)

Kod CSSSalin kandungan ke papan keratan

.cuaca {
@melanjutkan %modul;

Melakukan perkara ini boleh membolehkan pembangun mengekalkan idea yang jelas, dapat mengetahui dengan segera hubungan antara kelas ini dan atributnya serta kelas lain serta atributnya, dan mengekalkan idea yang jelas tentang ketekalan atribut dan penggunaan semula atribut.

Gaya biasa

Kod CSS

Salin kandungan ke papan keratan

.cuaca {
: LightCyan; ..
}
@include(s)
.cuaca {
@melanjutkan %modul;
latar belakang
@termasuk peralihan(semua
... }
Pemilih bersarang

Kod CSS
Salin kandungan ke papan keratan

.cuaca {
@melanjutkan %modul;
latar belakang: LightCyan;
semua 0.3s mudah); > h3 {
: 1px pepejal putih; @include transform(putar(90deg));
Dalam bahagian bersarang, teruskan menggunakan peraturan gaya di atas. Bahagian bersarang hendaklah sentiasa datang yang terakhir.

Awalan vendor (awalan CSS) sangat sensitif masa. Disebabkan kemas kini kepada penyemak imbas moden, awalan ini akan digunakan semakin kurang. Anda boleh menyesuaikan diri dengan perubahan ini dengan mengemas kini kandungan mixin anda (atau sesetengah pustaka yang digunakan dalam mixin anda akan dikemas kini secara automatik). Walaupun mixin hanya satu baris, tidak mengapa.

Tetapi apabila penswastaan beberapa awalan vendor adalah sangat serius, awalan ini akan menjadi sangat sukar untuk diseragamkan dan menggunakan awalan lain atau versi tidak awalan tidak akan bernilai keuntungan saya akan memilih untuk meninggalkan @mixin awalan vendor ini. Contohnya -webkit-line-clamp, -mscontent-zoom-chaining atau situasi yang serupa.
Jangan bersarang lebih daripada 3 peringkat

Kod CSS
Salin kandungan ke papan keratan

.cuaca {

."lebar: auto; tinggi: auto; float: none;"
"14_nwp">"text-decoration: none;" mpid="14" sasaran ="_kosong" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf =1001&ch=0&di=128&fv=0&is_app=0&jk=be9ebff1476c47c4&k=cities&k0=city&kdi0=0&luki=6&n=10&p=baidu&q=06011078_cpr=1&sf_c44 be&ssp2=1&stid=0&t=tpclicked3_hc&tu=u1922429&u=http://www. admin10000 .com/document/2137.html&urlid=0" id="14_nwl">"warna : #0000ff;font-size:14px;width:auto;height:auto;float:none;">cities { li {
Jika anda membuat sarang lebih daripada tiga kali, anda mungkin akan menulis pemilih yang menipu (buruk?). Sebab penipuan ialah pemilih ini terlalu bergantung pada struktur HTML (tidak stabil), terlalu terperinci (fungsinya terlalu berkuasa dan tidak mempunyai fleksibiliti), atau kebolehgunaan semula terlalu lemah (tidak boleh digunakan). Pada masa yang sama, terlalu banyak tahap bersarang boleh membawa kepada kod yang tidak jelas dan sukar difahami.

Kod CSS

Salin kandungan ke papan keratan

.cuaca
> h3 {
@lanjutkan %line-under;
}
}

Kod bersarang tidak boleh melebihi 50 baris

Jika sarang dalam SASS adalah lebih daripada 50 baris, ia mungkin tidak dipaparkan sepenuhnya pada satu halaman pengkompil, yang akan menyukarkan kod untuk dibaca dan difahami. Bersarang pada asalnya bertujuan untuk memudahkan dan memudahkan pemikiran dan organisasi kod. Jika ia melanggar kebolehbacaan, sila jangan bersarang.
Urutan fail SASS global dan serantau adalah bersamaan dengan kandungan jadual

Dalam erti kata lain, mereka tidak mempunyai gaya tetap. Pemaju harus mengingatkan diri mereka untuk memastikan gaya semua bahagian konsisten dan teratur.

Mula-mula senaraikan vendor/perpustakaan global, kemudian senaraikan perpustakaan tersuai, kemudian mod, dan akhirnya perpustakaan yang digunakan oleh setiap bahagian.

Dengan cara ini, 'direktori' kelihatan seperti contoh berikut, yang jelas sekali imbas:

Kod CSSSalin kandungan ke papan keratan

/* Ketergantungan Vendor */
@import "kompas";
/* Ketergantungan Pengarang */
"lebar: auto tinggi: auto; terapung: tiada;" id="10_nwp">teks-hiasan: tiada;" mpid="10" target=" _kosong" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di=128&fv=0&is_app =0&jk=be9ebff1476c47c4&k=global&k0=global&kdi0=0&luki=9&n=10&p=baidu&q=06011078_cpr&rb=0&rs=1&seller_id=1&sid=c4476c47f1bt=c4476c47f1 hc& tu=u1922429&u=http://www.admin10000.com/document/2137. html&urlid =0" id="10_nwl">warna:#0000ff;saiz fon:14px; lebar :auto;tinggi:auto; terapung:tiada;">global;
"global/campuran";
@import
; @import "global/modals"
@import "global/header";
"global/footer";
Fail ini seperti kompas, warna dan campuran tidak menghasilkan kod CSS yang disusun, ia adalah perpustakaan kendiri semata-mata. Corak diperkenalkan selepas ini untuk menjadikan penulisan semula lebih selamat tanpa konflik kekhususan.
Bahagikan SASS dengan munasabah kepada berbilang fail kecil

Tidak salah untuk melakukan ini. Apabila keadaan mengizinkan, cuba gunakan berbilang fail yang kecil dan tepat, supaya pembangun boleh mencari fail tertentu dan bukannya mencari jarum dalam timbunan jerami dalam beberapa fail besar dengan kod yang panjang.

...
Kod CSSSalin kandungan ke papan keratan
1. @import "lebar: auto; tinggi: auto; tiada;" id="9_nwp">teks-hiasan: tiada;" mpid="9" target=" _kosong" href="http://cpro.baidu.com/cpro/ui/uijs.php?adclass=0&app_id=0&c=news&cf=1001&ch=0&di= . d =0&t=tpclicked3_hc&tu=u1922429&u=http://www.admin10000.com/document/ 2137.html&urlid=0" id="9_nwl">warna :#0000ff;saiz fon:14px;lebar:auto;tinggi:auto>terapung:tiada;">global< ;/span>/header/header/"; @import "global/header/logo/"
2. @import "global/header/dropdowns/"
3. @import "global/header/nav/";
4. "global/header/really-specific-thingy/"
5. Perkara yang sering saya lakukan ialah merujuk fail ini satu demi satu dalam fail scss global, bukannya merujuk fail _header.scss, dan kemudian merujuknya satu demi satu dalam fail _header.scss. Melakukannya boleh mengurangkan masa pengindeksan dan meningkatkan kecekapan membaca.
  
  Anda boleh menggunakan globbing apabila terdapat terlalu banyak fail dan urutan import terlalu panjang.
  Ingat untuk menamakan Partials _partial.scss
  
  Ini adalah penamaan biasa untuk fail yang tidak boleh disusun sendiri. Fail sedemikian akan bergantung pada fail lain sedikit sebanyak, menjadikannya mustahil untuk melengkapkan kompilasi secara bebas. Saya secara peribadi suka menambah garis bawah sebelum nama fail, seperti _dropdown-menu.scss
  Tambah pemetaan baris
  semasa menyusun secara setempat
  Lihat di sini, ini bermakna alat pembangunan boleh memberitahu anda sumber setiap peraturan, walaupun ia adalah fail separa yang diimport.
  Semasa menggunakan, ingat untuk menyusun fail diperkemas
  
  Halaman web yang sedang berjalan hendaklah sentiasa menggunakan CSS minimum.
  Tidak perlu menyerahkan fail .css
  
  Ia mungkin mengambil sedikit masa, tetapi ia boleh menjadi perkara yang sangat baik untuk tidak mempunyai fail .css dalam repositori Penyusunan fail dilakukan pada masa penggunaan. Jadi satu-satunya perkara yang anda boleh lihat ialah fail sass yang diformat dengan cantik yang telah diperkemaskan. Ini menjadikan penghuraian fail sangat berguna. Perihalan fail digunakan untuk membandingkan beberapa perubahan yang dibuat oleh penerbit versi. Untuk fail .css yang telah diperkemas, penerangan fail pada asasnya tidak diperlukan.
  Nota penggunaan yang murah hati
  
  Jarang orang menyesal meninggalkan komen dalam kod mereka. Sama ada ulasan itu berguna atau tidak mencolok, ia akhirnya akan dipadamkan apabila disusun ke dalam fail CSS yang diperkemas, tanpa kos tambahan kepada pembangun.
  
  .tindanan {
  /* modal ialah 6000, menyimpan mesej ialah 5500, pengepala ialah 2000 */
  z-index: 5000;
  Bercakap tentang anotasi, anda juga mungkin perlu membuat beberapa pelarasan standardisasi padanya. Dalam SASS, '//' bagus untuk menambah ulasan dan '//' menjadikan mengulas dan menyahulas sangat mudah.
  　
  Tukar beberapa nilai dan nilai yang biasa digunakan dengan makna istimewa kepada pembolehubah
  Jika anda mendapati diri anda menggunakan semula nilai (yang sangat biasa dalam reka bentuk bahagian hadapan), anda lebih baik menukarnya menjadi pembolehubah. Dengan cara ini anda boleh mengingatkan diri anda tentang maksud nilai dengan menamakannya dan mengekalkan konsistensi semasa menulis kod Ya, anda tidak perlu melaraskan baris demi baris apabila menukar nilai ini.
  
  Jika nombor mempunyai makna yang jelas, maka menukarnya kepada pembolehubah adalah penting.
  Kod CSS
  Salin kandungan ke papan keratan
  
  $zHeader: 2000; $zTindan: 5000; $zMesej: 5050;
  
  .header {
  
  z-index
  
  : $zHeader
  
  } .tindihan {
  
  z-index
  
  : $zOverlay
  
  } .mesej {
  
  z-index
  
  : $zMessage
  
  } Nombor ini mungkin disimpan dalam satu fail dan diimport sebagai @imported. Kaedah ini membolehkan anda melaksanakan pengurusan bersatu semua indeks-z atau pembolehubah lain
  
  dan menukar warna kepada pembolehubah
  Kecuali hitam dan putih. Banyak warna tidak dimaksudkan untuk digunakan sekali sahaja, walaupun anda fikir anda tidak akan menggunakannya lagi. Tetapi jika anda menukarnya menjadi pembolehubah, anda mungkin mendapati ia digunakan di tempat lain. Untuk pembolehubah warna, terdapat fungsi warna dalam Sass yang boleh mengendalikannya, seperti lighten() dan darkern(). Ini memberi anda kawalan warna keseluruhan yang mudah (tukar sekali, lupakan sahaja)
  
  Sarang dan namakan pustaka media anda
  Fungsi pustaka media bersarang dalam Sass bermakna 1. anda tidak perlu menulis semula pemilih di tempat lain dan menyebabkan ralat yang tidak perlu 2. peraturan yang anda tulis semula menjadi jelas dan jelas, dan apabila ini Ini boleh menjadi sangat mengelirukan apabila kod berada di hujung kod css anda atau dalam fail lain.
  
  Kod CSS
  Salin kandungan ke papan keratan
  .bar sisi {
  
  terapung: kanankanan;
  
  lebar: 33.33%; @include bp(mama-bear) {
  
  lebar
  : 25%; }
  
  }
  
  Terdapat penjelasan yang lebih terperinci di sini: http://css-tricks.com/naming-media-queries/
  Letakkan Malu di penghujung
Dalam helaian gaya global anda, perkenalkan fail _shame.scss pada penghujungnya.

Kod CSS
Salin kandungan ke papan keratan
@import
1. "kompas"
2. ...
4. @import
_shame.scss dengan lebih baik. Untuk butiran, sila lihat: http://csswizardry.com/2013/04/shame-css/
Anda adalah pemimpin yang menentukan segala-galanya

Sass tidak akan melakukan apa-apa yang anda tidak suruh, jadi output akhir fail sass adalah berbeza untuk semua orang. Menulis fail css dengan sass adalah seperti tidak menggunakan sass, anda adalah ketua kod.

Label berkaitan：

css sass

sumber：php.cn

Artikel sebelumnya：Cara menulis teg Nofollow dan pengenalan kepada penggunaan nofollow_HTML/Xhtml_Web page production Artikel seterusnya：Pengenalan kepada perbezaan antara HTML dan XHTML, dan HTML4 dan HTML5 tags_HTML/Xhtml_Webpage Production

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel terbaru oleh pengarang