Panduan Pengaturcaraan Gaya SASS CSS_HTML/Xhtml_Penghasilan Halaman Web

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

1. .cuaca {
2. @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

1. .cuaca {
@melanjutkan %modul;
latar belakang
3. : LightCyan; ..
4. }
5. @include(s)
7. .cuaca {
8. @melanjutkan %modul;
9. latar belakang
: LightCyan;
10. @termasuk peralihan(semua
0.3s pelonggaran);
11. ... }
Ini membolehkan pembangun melihat penggunaan @extend(s) dan @include(s) sepintas lalu, menjadikannya lebih mudah untuk diri mereka sendiri dan pembangun lain untuk mentafsir kod. Anda juga boleh memutuskan sama ada untuk membezakan antara @includes tersuai dan sumber awam @includes dalam sesetengah kes (terutama mempertimbangkan kebolehgunaan semula kod dan ketepatan masa)
13. Pemilih bersarang

Kod CSS
Salin kandungan ke papan keratan

1. .cuaca {
2. @melanjutkan %modul;
3. latar belakang: LightCyan;
@termasuk peralihan(
4. semua 0.3s mudah); > h3 {
bawah sempadan
6. : 1px pepejal putih; @include transform(putar(90deg));
}
｝
9. Dalam bahagian bersarang, teruskan menggunakan peraturan gaya di atas. Bahagian bersarang hendaklah sentiasa datang yang terakhir.
Semua awalan vendor menggunakan @mixins

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 {

1. ."lebar: auto; tinggi: auto; float: none;"
id=
2. "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 {
// tiada lagi
}
}
}
7. 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.
Kadangkala terdapat terlalu banyak kod yang berkaitan dengan kelas, jadi anda perlu menggunakan pemilih teg. Anda mungkin perlu sangat spesifik tentang kelas untuk mengelakkan lata yang tidak perlu. Walaupun boleh, gunakan lanjutan untuk memanfaatkan beberapa ciri kebolehgunaan semula dalam CSS.

Kod CSS

Salin kandungan ke papan keratan

1. .cuaca
2. > h3 {
3. @lanjutkan %line-under;
4. }
5. }

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

1. /* Ketergantungan Vendor */
2. @import "kompas";
4. /* Ketergantungan Pengarang */
@import
5. "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;
@import
6. "global/campuran";
/* Corak */
8. @import
"global/tab"
9. ; @import "global/modals"
;
/* Bahagian */
12. @import "global/header";
@import
13. "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/";
    @import
    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

       1. $zHeader: 2000; $zTindan: 5000; $zMesej: 5050;
       3. .header {
       4. z-index
       5. : $zHeader
       6. } .tindihan {
       7. z-index
       8. : $zOverlay
       9. } .mesej {
       10. z-index
       11. : $zMessage
       12. } Nombor ini mungkin disimpan dalam satu fail dan diimport sebagai @imported. Kaedah ini membolehkan anda melaksanakan pengurusan bersatu semua indeks-z atau pembolehubah lain
       13. 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

       
       

       1. .bar sisi {
       2. terapung: kanankanan;
       3. lebar: 33.33%; @include bp(mama-bear) {
       lebar
       5. : 25%; }
       6. }
       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
    "malu"
    Jika anda perlu membuat beberapa perubahan pantas, anda boleh mengubah suainya di sini. Jika anda mempunyai masa dan tenaga yang sesuai pada masa hadapan, anda boleh mengatur dan menstrukturkan pengubahsuaian pada keseluruhan seni bina yang dibuat dalam

    _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.

Kenyataan：

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 sebelumnya：Cara menulis teg Nofollow dan pengenalan kepada penggunaan nofollow_HTML/Xhtml_Web page productionArtikel seterusnya：Cara menulis teg Nofollow dan pengenalan kepada penggunaan nofollow_HTML/Xhtml_Web page production

Artikel berkaitan

Lihat lagi

• Html小知识总结
• 如何快速学习HTML
• html xhtml xml的区别
• src与href属性的区别
• 关于HTML5和CSS替换使用