CSS sebaris di Jekyll

Takeaways Key

inline CSS di Jekyll boleh menjadi alat yang berharga untuk laman web dengan CSS yang cukup kecil, kerana ia membolehkan anda menghantar semua gaya di Roundtrip Server pertama, menghapuskan keperluan untuk stylesheet luaran. Ini amat berkesan untuk memberikan gaya kritikal yang membentuk rupa kawasan kandungan atas dan utama halaman.
Di Jekyll, gaya boleh dimasukkan secara langsung dalam folder _ includes, kemudian diimport di dalam kepala dokumen. Jika menggunakan SASS, penapis SCSSIFY boleh digunakan untuk menukar rentetan SASS yang diformat ke CSS, mengekalkan keupayaan untuk menggunakan SASS walaupun ketika gaya terbabas.
Penapis scssify di Jekyll juga menghormati konfigurasi sass anda dari _config.yml. Oleh itu, jika anda menetapkan gaya output untuk dimampatkan dalam fail konfigurasi anda, penapis akan menyusun SASS ke CSS yang dimampatkan, membantu dalam minifikasi.

Saya telah lama menjadi peminat Jekyll. Ia mempunyai beberapa kelemahan dan tidak semestinya alat terbaik untuk pekerjaan itu, namun, ia boleh menjadi alat yang hebat untuk beberapa situasi. Saya telah kehilangan kiraan berapa banyak laman web yang saya bina dengannya.

Baru -baru ini, saya membuat satu lagi laman web dengan Jekyll, kali ini untuk jargon JavaScript yang dipermudahkan dan saya mendapati diri saya menghadapi masalah yang tidak begitu biasa - menggariskan gaya di .

Keperluan

Anda mungkin pernah mendengar CSS kritikal. Idea di sebalik konsep ini adalah untuk menyediakan gaya kritikal (yang bertanggungjawab untuk melihat kawasan kandungan atas dan utama halaman) secepat mungkin kepada penyemak imbas supaya tidak ada kelewatan sebelum mengakses kandungan.

Terdapat peraturan biasa yang mengatakan adalah baik untuk menghantar apa yang diperlukan untuk menjadikan bahagian atas halaman di bawah 14KB, kerana itu adalah kira -kira berapa banyak pelayan boleh mengendalikan dalam satu roundtrip. Wawasan Google PagesPeed memberikan lebih banyak maklumat mengenai ini dalam dokumentasi mereka, jadi jangan ragu untuk melihat jika anda ingin tahu mengapa ia berfungsi dengan cara ini.

Setakat ini, jika CSS anda cukup kecil (seperti itu untuk SJSJ), anda boleh menyamakan semuanya di dan hantar semuanya bersama -sama di Roundtrip pertama tanpa mengganggu dengan lembaran luaran. Itu tidak biasa, tetapi apabila ia cukup, ia cukup rad.

kembali ke Jekyll

jadi idea saya adalah memasukkan gaya di dalam tag di kepala dokumen, dan melangkaui lembaran gaya luaran sama sekali. Pertaruhan pertama saya adalah untuk membina laman web ini, kemudian gerakkan fail CSS yang dihasilkan di dalam folder _ includes supaya ia dapat disertakan dengan blok { % termasuk %}. Ia berfungsi, tetapi agak membosankan sebagai proses.

maka saya menyedari bahawa jika saya dapat menyamakan semua gaya saya di kepala halaman, itu kerana saya tidak mempunyai banyak daripada mereka, jadi saya pasti dapat menangani masalah itu dengan cara yang lain.

Daripada menggerakkan gaya saya di dalam folder _ termasuk binaan, saya boleh membuatnya terus di dalam folder itu. Saya kemudian boleh mempunyai fail CSS yang diimport di dalam kepala dokumen dari sana.

<span>/* _includes/styles.css */
</span>
<span><span>.foo-bar</span> {
</span>  <span>color: pink;
</span><span>}
</span>

dan kemudian:

<span><!-- _includes/head.html -->
</span>
<span><span><span><style>></style></span><span>
</span></span><span><span><span>{% include styles.css %}
</span></span></span><span><span></span><span><span></span>></span>
</span></span>

tada! Ia memberi kita apa yang kita mahukan:

<span><!-- … -->
</span><span><span><span><style>></style></span><span>
</span></span><span><span><span><span>.foo-bar</span> {
</span></span></span><span><span>  <span>color: pink;
</span></span></span><span><span><span>}
</span></span></span><span><span></span><span><span></span>></span>
</span><span><!-- … -->
</span></span>

bagaimana dengan sass?

Baiklah, anda mungkin berfikir "Ya, tetapi itu bermakna kita tidak boleh menggunakan SASS lagi." Ya dan tidak. Pada asasnya, kami telah mengambil saluran paip keseluruhan dari Jekyll keluar sepenuhnya, tetapi masih ada cara.

Jika anda pernah membaca dokumentasi dari Jekyll, anda mungkin perasan bahawa terdapat penapis scssify dan sassify. Dokumentasi mengatakan ini membolehkan kita untuk:

Tukar rentetan SASS- atau SCSS ke CSS.

bagus. Ini bermakna kita masih boleh menggunakan SASS dengan paip keseluruhan fail kita ke dalam perkara ini. Satu -satunya masalah ialah kita tidak boleh memohon penapis pada blok, seperti { % termasuk %}. Caranya adalah untuk menangkap kandungan fail dalam pembolehubah (terima kasih kepada { % Capture %}), dan kemudian gunakan penapis kami ke pembolehubah ini apabila mengeluarkannya.

<span><!-- _includes/head.html -->
</span>{% capture styles %}
{% include styles.css %}
{% endcapture %}

<span><span><span><style>></style></span><span>
</span></span><span><span><span>{{ styles | scssify }}
</span></span></span><span><span></span><span><span></span>></span>
</span></span>

tada (sekali lagi)!

bagaimana dengan pengabaian?

Perkara yang baik dengan penapis scssify ini adalah bahawa ia menghormati konfigurasi sass anda dari _config.yml. Oleh itu, jika anda menetapkan gaya output untuk dimampatkan dalam fail konfigurasi anda, penapis akan menyusun sass ke CSS yang dimampatkan.

<span># _config.yml
</span>
<span>sass:
</span>  <span>style: compressed
</span>

tada (sekali lagi)!

<span><!-- … -->
</span><span><span><span><style>></style></span><span>
</span></span><span><span><span><span>.foo-bar</span>{color:pink}
</span></span></span><span><span></span><span><span></span>></span>
</span><span><!-- … -->
</span></span>

Pemikiran Akhir

Seperti yang anda lihat, tidak ada yang pecah dalam artikel ini. Walau bagaimanapun, saya mesti mengatakan bahawa ia tidak pernah berlaku kepada saya bahawa saya hanya boleh menulis gaya saya dalam folder _ termasuk secara langsung sebelum saya menghabiskan masa memikirkan isu ini pada hari yang lain.

Sudah tentu, idea ini akan jatuh pendek apabila berurusan dengan lembaran gaya yang lebih besar daripada 14KB, di mana anda perlu mengekstrak CSS kritikal dengan beberapa alat. Tetapi untuk halaman dan laman web kecil - ia sangat berguna!

Jika anda ingin melihat bagaimana ia berfungsi pada projek sebenar, anda boleh menyemak fail pada repositori SJSJ:

_includes/styles.css
_includes/head.html

harap ia membantu, dan pengekodan gembira!

soalan yang sering ditanya mengenai CSS sebaris di Jekyll

Apakah perbezaan antara CSS dalam talian dan CSS luaran?

inline CSS adalah kaedah di mana CSS digunakan secara langsung dalam tag HTML anda menggunakan atribut 'gaya'. Kaedah ini berguna untuk menggunakan gaya unik untuk elemen tertentu pada halaman. Sebaliknya, CSS luaran melibatkan menghubungkan ke fail .css luaran dari dokumen HTML anda. Kaedah ini bermanfaat apabila anda ingin menggunakan gaya yang sama di beberapa halaman, kerana ia menggalakkan kebolehgunaan semula dan mengurangkan kelebihan.

Bagaimana saya boleh menggunakan CSS dalam talian di Jekyll? Sebagai contoh, jika anda ingin menukar warna perenggan ke merah, anda akan menulis:

Ini adalah perenggan merah.

. Ingatlah, sifat CSS harus ditulis dalam unta ketika menggunakan CSS sebaris di Jekyll. gaya kepada elemen tertentu pada satu halaman. Ia mengatasi sebarang gaya yang bercanggah di CSS luaran atau dalaman, memberikan anda lebih banyak kawalan ke atas penampilan halaman web anda. Walau bagaimanapun, lebih baik menggunakan CSS dalam talian dengan berhati -hati, kerana ia boleh membuat dokumen HTML anda tidak kemas dan sukar untuk dikekalkan jika terlalu banyak digunakan. , Anda boleh menggunakan kedua -dua CSS dan CSS luaran di Jekyll. Walau bagaimanapun, perlu diingat bahawa CSS dalam talian mempunyai kekhususan yang lebih tinggi daripada CSS luaran. Ini bermakna jika terdapat gaya yang bercanggah, CSS sebaris akan mengatasi CSS luaran. kekhususan yang tinggi. Walau bagaimanapun, anda boleh menggunakan peraturan '! Penting' dalam CSS luaran atau dalaman anda untuk mengatasi CSS sebaris. Sebagai contoh, jika anda mempunyai gaya sebaris yang menetapkan warna perenggan menjadi merah, anda boleh mengatasinya di CSS luaran anda seperti ini: p {color: blue! Penting;}. Inline CSS di Jekyll?

Walaupun CSS sebaris di Jekyll menyediakan tahap kawalan yang tinggi ke atas unsur -unsur individu, ia mempunyai batasannya. Ia boleh membuat dokumen HTML anda kemas dan sukar untuk dikekalkan jika terlalu banyak digunakan. Ia juga tidak menggalakkan kebolehgunaan semula, seperti yang anda perlu gunakan secara manual gaya untuk setiap elemen. Kelajuan pemuatan laman Jekyll anda kerana penyemak imbas tidak perlu membuat permintaan HTTP tambahan untuk mengambil fail CSS luaran. Walau bagaimanapun, jika anda mempunyai banyak CSS, lebih baik menggunakan CSS luaran untuk memastikan dokumen HTML anda bersih dan mudah dikekalkan. 🎜> Tidak, anda tidak boleh menggunakan kelas dan ID CSS dengan CSS sebaris di Jekyll. CSS sebaris digunakan terus ke elemen HTML menggunakan atribut 'gaya', dan ia tidak menyokong kelas atau ID. Sekiranya anda ingin menggunakan kelas atau ID, anda harus menggunakan CSS luaran atau dalaman. CSS di Jekyll. Pertanyaan media digunakan dalam CSS luaran atau dalaman untuk menggunakan gaya yang berbeza untuk peranti atau saiz skrin yang berbeza. Jika anda perlu menggunakan pertanyaan media, anda harus menggunakan CSS luaran atau dalaman.

Bolehkah saya menggunakan kelas pseudo dan pseudo-elemen dengan CSS inline di Jekyll? Kelas pseudo dan elemen pseudo digunakan dalam CSS luaran atau dalaman untuk gaya bahagian tertentu elemen atau untuk menambah kesan khas. Jika anda ingin menggunakan kelas pseudo atau elemen pseudo, anda harus menggunakan CSS luaran atau dalaman.

Atas ialah kandungan terperinci CSS sebaris di Jekyll. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!