亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Rumah hujung hadapan web tutorial css Bina tema atom anda sendiri dengan CSS

Bina tema atom anda sendiri dengan CSS

Feb 19, 2025 am 08:59 AM

Build Your Own Atom Theme with CSS

Build Your Own Atom Theme with CSS Atom, abad ke -21 "Editor Teks Customable" telah menjadi pilihan pertama bagi beribu -ribu pemaju di seluruh dunia. Mudah untuk berkembang dan disesuaikan menjadikannya popular. Pemaju berkongsi ciri -ciri baru dengan komuniti Atom dengan melepaskan pakej dan tema pengembangan. Selepas membaca artikel ini, anda akan dapat menerbitkan tema tatabahasa atom anda sendiri - langkah pertama yang sangat baik untuk memulakan perjalanan penyesuaian atom anda!

Kajian ringkas mengenai mata utama

Atom adalah editor teks yang disesuaikan yang membolehkan pemaju membuat dan berkongsi tema sintaks mereka sendiri menggunakan CSS.
  • Buat tema sintaks, anda perlu memuat turun editor teks atom, dan kemudian gunakan fungsi generasi automatik untuk membuat pakej tema sintaks.
  • Atom menggunakan kurang (superset CSS) kepada gaya, termasuk fungsi seperti pembolehubah, gaya bersarang dan & pengendali. Selepas menukar tema, muat semula tetingkap Atom untuk melihat kesannya.
  • Selepas tema dicipta dan ditapis, ia boleh dikongsi dengan komuniti atom melalui Pengurus Pakej Atom (APM).
Apakah tema tatabahasa?

Tema sintaks digunakan untuk gaya teks/kod di editor. Tema antara muka digunakan untuk menetapkan aspek lain dari editor teks atom (seperti bar sisi, bar status, tab, dan lain -lain). Artikel ini hanya memberi tumpuan kepada penciptaan topik tatabahasa, hanya mempunyai pengetahuan asas CSS.

Panduan Pemula

hanya muat turun editor teks atom dan mulakan! Atom menggunakan kurang, iaitu superset CSS dengan ciri -ciri mudah seperti pembolehubah.

menjana pakej tema tatabahasa atom

Membuat tema tatabahasa yang digunakan untuk menjadi tugas yang membosankan, tetapi sekarang Atom mempunyai ciri-ciri generasi automatik yang kuat:

Buka atom dan tekan CMD Shift P (menggunakan CTRL Shift P untuk Windows).
  1. Masukkan menjana.
  2. Pilih pilihan "Penjana Pakej: Menjana Tema Sintaks".
  3. Atom akan meminta anda memilih lokasi di mana untuk menyimpan pakej, anda boleh memilih seperti yang anda suka.

Namakan beg anda

Atom akan membuka pakej yang dihasilkan sebagai projek dan anda boleh mula mengedit. Atom mengesyorkan bahawa nama pakej berakhir dengan "-syntax" dan dinamakan menggunakan huruf kecil dan tanda hubung. Sebagai contoh, saya menamakan pakej saya

dan menetapkannya kepada tema biru.

blue-everywhere-syntax

Struktur pakej

struktur pakej yang dihasilkan secara automatik adalah jelas dan mudah difahami:

Lembaran gaya utama terletak di
    .
  • index.less Gaya asas terletak di
  • dan definisi warna terletak di
  • . styles/base.less styles/colors.less
  • Fail digunakan untuk menentukan nama, keterangan, dan metadata lain pakej.
  • Fail package.json
  • menerangkan topik anda dalam format markdown, jika anda menerbitkan topik, bacaan ini akan dipaparkan pada halaman muat turun.
  • README.md
Contoh kod

Enjin rendering Atom didasarkan pada kromium (pemahaman elektron memberi anda pemahaman yang mendalam tentang bagaimana ia berfungsi), jadi anda boleh menggunakan CSS untuk tetapan gaya. Atom menggunakan kurang, yang mempunyai ciri -ciri mudah seperti pembolehubah dan import bersarang.

Untuk melihat kesan perubahan, tambah semula atom (menggunakan CMD alt ctrl l atau "view" & gt; "pemaju" & gt; "tambah nilai"). Dalam Tetapan Atom (CMD,) & gt; "Tema", tetapkan tema sintaks editor kepada tema yang baru dibuat.

Tetapkan tema ke biru

Buka fail colors.less (styles & gt; colors.less). Anda boleh melihat pembolehubah bernama @very-dark-gray dengan nilai #1d1f21. Tukarnya menjadi Blue Dark #1d1f33. Muat semula atom (CMD alt ctrl l atau "view" & gt; "pemaju" & gt; "tambah nilai"). Warna latar belakang kawasan teks sepatutnya telah diubah.

Penjelasan kod terperinci

index.less import base.less. base.less Sama seperti CSS, pembolehubah yang kurang (bermula dengan simbol @) digunakan.

warna latar belakang editor ditakrifkan oleh kod berikut:

@import "syntax-variables";

atom-text-editor, :host {
  background-color: @syntax-background-color;
}

@syntax-background-color Definisi dalam syntax-variables.less:

@import "colors";

// ...

@syntax-background-color: @very-dark-gray;

@very-dark-gray ditakrifkan dalam colors.less, itulah sebabnya kita mengubah suai nilai colors.less dalam @very-dark-gray untuk menukar warna latar belakang editor.

Organisasi lembaran gaya

Bagaimana pembolehubah lembaran gaya dianjurkan bergantung kepada keutamaan peribadi. Templat yang dihasilkan oleh Atom mencadangkan item pengumpulan dengan warna yang sama, menggunakan pembolehubah sintaks dalam base.less, dan memberikan nilai kepada setiap pembolehubah dalam syntax-variables.less. Tetapi warna juga boleh ditakrifkan secara langsung dalam base.less.

gaya maju

Di samping pembolehubah dan import, kurang mempunyai beberapa ciri lain:

  1. Gaya bersarang
  2. & operator

Gaya bersarang

kurang menyokong gaya bersarang. Contohnya:

.container {
  .red-block {
    a {
      color: red;
    }
  }
}
ini bersamaan dengan:

a.container .red-block {
  color: red;
}

& operator Pengendali

& mengendali pemilih induk.

Nama pembolehubah biru

Tetapkan semua nama berubah menjadi biru gelap dan tambahkan garis bawah ketika melayang:

Atom secara automatik menambah

kelas ke semua pembolehubah dalam editor kod. Oleh itu, kita perlu mengubah suai gaya kelas .variable: .variable

.variable {
  color: #336699;
  &:hover {
    text-decoration: underline;
  }
  // ...
}

Nombor baris semasa

Tetapkan nombor baris semasa ke biru:

Tambah

dalam colors.less. Gunakan warna ini dalam @deep-sky-blue: #009ACD;: base.less

.gutter {
  // ...

  .line-number {
    &.cursor-line {
      background-color: @syntax-gutter-background-color-selected;
      color: lighten(@deep-sky-blue, 10%);
    }

    &.cursor-line-no-selection {
      color: @deep-sky-blue;
    }
  }
}

Ringkasan

Dengan contoh mudah dan asas CSS, kami telah mencipta tema sintaks Atom baru. Anda boleh terus memperbaiki tema anda dan berkongsi dengan dunia melalui Pengurus Pakej Atom (APM).

Sumber

  1. fungsi operasi warna kurang
  2. Menerbitkan tema atom
  3. Manual Pengguna Atom

FAQ

(bahagian FAQ dalam teks asal ditinggalkan di sini kerana soalan-soalan ini tidak sepadan dengan matlamat asal pseudo topik dan lebih lama.)

Atas ialah kandungan terperinci Bina tema atom anda sendiri dengan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

Alat AI Hot

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tutorial CSS untuk membuat pemuatan dan animasi pemuatan Tutorial CSS untuk membuat pemuatan dan animasi pemuatan Jul 07, 2025 am 12:07 AM

Terdapat tiga cara untuk membuat pemutar pemuatan CSS: 1. Gunakan pemutar asas sempadan untuk mencapai animasi mudah melalui HTML dan CSS; 2. Gunakan pemutar tersuai pelbagai mata untuk mencapai kesan lompat melalui masa kelewatan yang berlainan; 3. Tambahkan pemutar dalam butang dan beralih kelas melalui JavaScript untuk memaparkan status pemuatan. Setiap pendekatan menekankan pentingnya butiran reka bentuk seperti warna, saiz, kebolehcapaian dan pengoptimuman prestasi untuk meningkatkan pengalaman pengguna.

Menangani masalah dan awalan keserasian penyemak imbas CSS Menangani masalah dan awalan keserasian penyemak imbas CSS Jul 07, 2025 am 01:44 AM

Untuk menangani keserasian pelayar CSS dan isu awalan, anda perlu memahami perbezaan sokongan penyemak imbas dan menggunakan awalan vendor dengan munasabah. 1. Memahami masalah biasa seperti Flexbox dan sokongan grid, kedudukan: prestasi tidak sah, dan prestasi animasi adalah berbeza; 2. Periksa status sokongan ciri CANIUSE Ciri; 3. Gunakan dengan betul -webkit-, -moz-, -ms-, -o- dan awalan pengeluar lain; 4. Adalah disyorkan untuk menggunakan autoprefixer untuk menambah awalan secara automatik; 5. Pasang postcss dan konfigurasi penyemak imbas untuk menentukan penyemak imbas sasaran; 6. Secara automatik mengendalikan keserasian semasa pembinaan; 7. Ciri -ciri pengesanan moden boleh digunakan untuk projek lama; 8. Tidak perlu meneruskan konsistensi semua pelayar,

Gaya yang dikunjungi pautan berbeza dengan CSS Gaya yang dikunjungi pautan berbeza dengan CSS Jul 11, 2025 am 03:26 AM

Menetapkan gaya pautan yang telah anda lawati dapat meningkatkan pengalaman pengguna, terutama di laman web yang berintensifkan kandungan untuk membantu pengguna menavigasi lebih baik. 1. Gunakan CSS: Kelas pseudo yang dilawati untuk menentukan gaya pautan yang dikunjungi, seperti perubahan warna; 2. Perhatikan bahawa penyemak imbas hanya membenarkan pengubahsuaian beberapa atribut disebabkan oleh sekatan privasi; 3. Pemilihan warna harus diselaraskan dengan gaya keseluruhan untuk mengelakkan ketangkasan; 4. Terminal mudah alih mungkin tidak memaparkan kesan ini, dan disyorkan untuk menggabungkannya dengan arahan visual lain seperti logo tambahan ikon.

Membuat bentuk tersuai dengan laluan klip CSS Membuat bentuk tersuai dengan laluan klip CSS Jul 09, 2025 am 01:29 AM

Gunakan atribut clip-path CSS untuk menanam unsur-unsur ke dalam bentuk tersuai, seperti segitiga, takik bulat, poligon, dan lain-lain, tanpa bergantung pada gambar atau SVG. Kelebihannya termasuk: 1. Menyokong pelbagai bentuk asas seperti Circle, Ellipse, Polygon, dan lain -lain; 2. Pelarasan responsif dan boleh disesuaikan dengan terminal mudah alih; 3. Mudah untuk animasi, dan boleh digabungkan dengan hover atau javascript untuk mencapai kesan dinamik; 4. Ia tidak menjejaskan aliran susun atur, dan hanya tanaman kawasan paparan. Penggunaan umum adalah seperti laluan klip bulat: bulatan (50pxatcenter) dan triangle clip-path: polygon (50%0%, 100 0%, 0 0%). Notis

Apakah perbezaan antara paparan: inline, paparan: blok, dan paparan: blok sebaris? Apakah perbezaan antara paparan: inline, paparan: blok, dan paparan: blok sebaris? Jul 11, 2025 am 03:25 AM

Themaindifferencesbetweendisplay: inline, block, andinline-blockinhtml/cssarelayoutbehavior, spaceusage, andstylingcontrol.1.inlineelementsflowwithtext, notstartonNewlines, abaikanwidth/height, andonyapplylylylylylinddding/

Apakah API Lukisan CSS? Apakah API Lukisan CSS? Jul 04, 2025 am 02:16 AM

ThecsspaintingapienablesdynamicimageGenerationincsingjavascript.1.DevelopersCreateApaintWorkLetClassWithapaint () method.2.theyRegisteritViaregisterPaint ()

Bagaimana untuk membuat imej responsif menggunakan CSS? Bagaimana untuk membuat imej responsif menggunakan CSS? Jul 15, 2025 am 01:10 AM

Untuk membuat imej responsif menggunakan CSS, ia boleh dicapai terutamanya melalui kaedah berikut: 1. Gunakan maksimum lebar: 100% dan ketinggian: auto untuk membolehkan imej menyesuaikan diri dengan lebar kontena sambil mengekalkan perkadaran; 2. Gunakan atribut SRCSET dan saiz HTML dengan bijak memuatkan sumber imej yang disesuaikan dengan skrin yang berbeza; 3. Gunakan objek-sesuai dan kedudukan objek untuk mengawal penanaman imej dan paparan fokus. Bersama -sama, kaedah ini memastikan bahawa imej dibentangkan dengan jelas dan indah pada peranti yang berbeza.

Apa itu CSS dan apa yang ada? Apa itu CSS dan apa yang ada? Jul 03, 2025 am 01:48 AM

Css, orcascadingstylesheets, isthepartofwebdevelopmentthatthatcontrolsawebpage'svisualappeARance, termasuk colors, fon, jarak, andlayout

See all articles