Posting & Pra Pemrosesan CSS

Halo pembaca. Dalam perjalanan Anda belajar tata letak, sudahkah Anda mempelajari CSS dan ingin melanjutkan? Lalu untukmu di bawah kucing. Perhatian, banyak kode.

Pada artikel ini, saya akan mengulas preprosesor dan postprocessor (s?).

Saya tidak akan membahas detail tentang CSS, menyiratkan bahwa Anda sudah mengetahuinya. Saya akan menyebutkan kelas dalam notasi BEM . Juga, saya tidak akan mempelajari instalasi dan konfigurasi semua yang akan saya tulis, tetapi saya akan meninggalkan tautan yang dapat Anda ikuti dan pelajari cara melakukannya sendiri.

Mari kita mulai dengan preprosesor.

Preprosesor

Apa yang dimaksud dengan preprosesor di luar konteks dengan CSS? Vicki tahu jawabannya.

Apa itu preprocessor dalam konteks CSS? Dalam kasus kami, preprocessor adalah program yang menerima kode yang ditulis dalam bahasa preprocessor untuk input, dan pada output kami mendapatkan CSS yang dapat kami berikan input ke browser kami.

Apa saja preprosesornya? Ada beberapa perwakilan, misalnya: Sass (.sass, .scss), Less (.less) dan Stylys (.stylus).
Juga di antara preprosesor, PostCSS (atau lebih tepatnya parser SugarSS dan plugin PreCSS) dapat dipilih secara terpisah. Ke depan, saya akan mengatakan bahwa ya, PostCSS bukan hanya post-prosesor.

Saya akan melakukan review pada contoh Sass. Lebih tepatnya, pada sintaks baru - SCSS, karena lebih dekat ke CSS daripada sintaks lama. Mari kita mulai dengan kemampuan yang ditambahkan oleh preprosesor yang tidak ada dalam CSS, dan akhiri dengan masalah yang sedang dipecahkan.

Kemungkinan

Variabel

//style.scss $color: #fff; span { color: $color; background: $color; } //style.css span { color: #fff; background: #fff; } 

Kegunaan variabel sulit ditaksir terlalu tinggi. Sekarang Anda dapat memberikan nama yang bermakna untuk warna ($ tomat: rgb (255,99,71)), menghitung nilai bukan melalui konstanta, tetapi melalui variabel (tinggi: $ body_height - $ footer_height) dan banyak lagi. Banyak yang mungkin berpendapat bahwa ada variabel dalam CSS. Tapi Bisakah Saya Menggunakan mengatakan tidak ada dukungan untuk IE (dan untuk alasan yang jelas, itu tidak diharapkan).

Bersarang

 //style.scss .chat-area { width: 40%; &__button { // & -    (   & = .chat-area) display: inline-block; height:36px; width: 10px; } a { color: red; } } //style.css .chat-area { width: 40%; } .chat-area__button { display: inline-block; height:36px; width: 10px; } .chat-area a { color: red; } 

Di awal artikel, saya merujuk ke BEM. Dalam contoh ini, elemen dengan kelas area obrolan adalah blok. Jika tiba-tiba ada kebutuhan untuk mengganti nama, sekarang dimungkinkan untuk melakukannya di satu tempat, dan ini menjadi rutin jika beberapa lusin penyeleksi diketik dalam satu file yang berisi nama blok. Saya juga ingin mencatat bahwa ini adalah semacam perlindungan terhadap kesalahan ketik, karena nama blok ditulis satu kali.

Mixin

 //style.scss @mixin border-radius($radius) { -webkit-border-radius: $radius; -moz-border-radius: $radius; -ms-border-radius: $radius; border-radius: $radius; } .box { @include border-radius(10px); } //style.css .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } 

Mixin adalah salah satu topik yang paling sulit untuk dipahami. Secara kasar, mixin adalah fungsi yang mengambil argumen dan menerapkan aturan yang bergantung pada argumen tersebut kepada pemilih tertentu. Dalam contoh ini, mixin radius batas diterapkan ke pemilih .box

Fungsi tambahan

 //style.scss $color: #202020; h1, h2 { color: lighten($color, 40%); } //style.css h1, h2 { color: #868686; } 

Pada dasarnya, fitur-fitur baru memudahkan untuk bekerja dengan warna. Misalnya, fungsi meringankan - mencerahkan warna dengan jumlah persen yang ditentukan (kebalikannya adalah fungsi menggelapkan).

Memecahkan masalah

Modularitas

Masalah dengan impor standar adalah membuat permintaan tambahan ke server, yang merupakan operasi yang mahal. Alangkah baiknya jika impor segera memasukkan semua teks yang diimpor ke file sumber, kan?

Bagaimanapun, tidak ada preprosesor sebelumnya, dan masalahnya harus dipecahkan entah bagaimana. Misalnya, Anda dapat menulis semua kode dalam satu file.


Namun, kami memiliki preprosesor dan mereka akan menyelesaikan masalah ini untuk kami. Preprocessor mengesampingkan impor standar dan sekarang alih-alih meminta server, ia memasukkan impor ke dalam file sumber, seperti yang saya inginkan.

 //style.scss @import "selector1"; @import "selector2"; //selector1.scss span { color: white; } //selector2.scss div { color: gold; } //style.css div { color: gold; } span { color: white; } 

Harap perhatikan bahwa file sumber dikonversi menjadi satu. Satu permintaan ke server untuk statika - satu jawaban.

Warisan

<sarcasm> Kami punya kelas, tapi tidak ada warisan, bagaimana? </sarcasm>. Sekarang dimungkinkan untuk memilih apa yang disebut "penyeleksi template" dan memperluasnya dengan penyeleksi lainnya.

 // style.scss %equal-heights { //   height: 100%; } %message { //   padding: 10px; } .success { @extend %message; color: green; } .error { @extend %message; color: red; } // style.css .success, .error { padding: 10px; } .success { color: green; } .error { color: red; } 

Keindahan pemilih template adalah bahwa mereka tidak cocok dengan gaya yang dihasilkan. Ekualiser template% equal-heights tidak terlibat dalam kode dan tidak meninggalkan jejak apa pun di CSS. Pesan pemilih% direfleksikan dalam bentuk aturan untuk pemilih yang memperluasnya. Anda dapat mewarisi dari penyeleksi biasa, tetapi lebih baik menggunakan penyeleksi templat sehingga tidak ada sampah berlebih.

Memformat

Setelah kode ditulis, perlu diformat (dikompresi untuk produksi). Anda dapat melakukan ini dengan bantuan kolektor seperti paket web, atau Anda dapat melalui alat standar.

Ada 4 jenis pemformatan di Sass.

 //expanded span { color: gold; display: block; } div { color: red; } //nested span { color: gold; display: block; } div { color: red; } //compact span { color: gold; display: block; } div { color: red; } //compressed span{color:gold;display:block}div{color:red} 

diperluas - Paling mirip dengan kode yang ditulis manusia.
bersarang - Perkiraan format sintaks lama. Keterbacaan tidak hilang, tetapi ini adalah masalah hollywood.
kompak - Masih mempertahankan keterbacaan, tetapi dengan kesulitan. Berguna untuk menentukan jumlah penyeleksi dalam suatu proyek berdasarkan mata.
dikompresi - Sudah format yang benar-benar tidak dapat dibaca. Semua karakter yang dapat dihapus dihapus. Cocok untuk memberi makan browser.

Catatan tambahan

Saya tidak mengerti beberapa fitur yang ditambahkan oleh Sass. Misalnya, loop atau fitur operator aritmatika . Aku akan membiarkan mereka membiasakan dirimu.

Postprocessors

Setelah berurusan dengan preprosesor, kami beralih ke postprocessor.

Dalam konteks Css, postprocessor pada dasarnya sama dengan preprocessor, tetapi input ke postprocessor tidak diberikan kode yang ditulis dalam bahasa preprocessor, tetapi juga css. Yaitu, postprocessor adalah program pada input yang diberikan css, dan outputnya adalah css. Tidak terlalu jelas mengapa ini perlu.

Saya akan menjelaskan tentang contoh nyata operasi PostCSS - satu-satunya perwakilan postprocessor dalam konteks css.

PostCSS di luar kotak tidak benar-benar melakukan apa pun dengan CSS. Ini hanya mengembalikan file yang diberikan padanya pada input. Perubahan dimulai ketika plugin terhubung ke PostCSS.

Seluruh siklus PostCSS dapat digambarkan sebagai berikut:

• File sumber diberikan ke input PostCSS dan diuraikan.
• Plugin 1 melakukan sesuatu
• ...
• Plugin n melakukan sesuatu
• Hasilnya dikonversi ke string dan ditulis ke file output.

Pertimbangkan plugin utama yang ada di ekosistem PostCSS

Plugin

Autoprefixer

Plugin ini sangat populer sehingga banyak orang berpikir bahwa mereka menggunakan plugin ini tetapi tidak menggunakan PostCSS. Mereka salah.

 //in.css div { display: flex } //out.css div { display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex } 

Autoprefixer menambahkan awalan browser ke aturan Anda. Salah satu plugin terpenting yang memulai sejarah PostCSS dengan tidak ada yang bisa diganti. Anda bahkan dapat mengatakan bahwa masuk akal untuk meletakkan PostCss hanya demi plugin ini.

Prasetel env

 //in.css @custom-media --med (width <= 50rem); @media (--med) { a:hover { color: color-mod(black alpha(54%)); } } //out.css @media (max-width: 50rem) { a:hover { color: rgba(0, 0, 0, 0.54); } } 

PostCSS Preset Env menambahkan fitur yang hanya dibahas dalam konsep draft pengembang css. Dalam contoh ini, arahan @ custom-media diimplementasikan, serta fungsi mod-warna. Mulai gunakan css masa depan hari ini!

Modul CSS

Semua BEM ini bukan untuk Anda, tetapi apakah masih ada masalah dengan konflik nama kelas? Kemudian PostCSS menawarkan solusi yang berbeda.

 //in.css .name { color: gray; } //out.css .Logo__name__SVK0g { color: gray; } 

Modul CSS mengubah nama kelas berdasarkan pola tertentu (semuanya dapat disesuaikan). Sekarang kita tidak tahu sebelumnya nama kelas, karena ditentukan secara dinamis. Bagaimana sekarang untuk mengklasifikasikan elemen jika kita tidak mengetahuinya terlebih dahulu? Menggabungkan PostCSS, Webpack dan ES6 Saya dapat menawarkan solusi ini:

 import './style.css'; //  import styles from './style.css'; //  

Sekarang kita tidak hanya mengimpor file dengan gaya (misalnya, dalam file Bereaksi komponen) dan mengganti nilai yang kita tahu sebelumnya, tetapi mengimpor objek. Kunci dari objek ini akan menjadi penyeleksi asli, dan nilai akan dikonversi. Yaitu, dalam contoh ini, styles ['name'] = 'Logo__name__SVK0g'.

Pendek

 //in.css .icon { size: 48px; } .canvas { color: #abccfc #212231; } //out.css .icon { width: 48px; height: 48px; } .canvas { color: #abccfc; background-color: #212231; } 

PostCSS Short menambahkan banyak entri singkat untuk berbagai aturan. Kode semakin pendek, dan karena itu ada sedikit ruang untuk kesalahan. Plus meningkatkan keterbacaan.

Reset otomatis

 //in.css div { margin: 10px; } a { color: blue; } //out.css div, a { all: initial; } div { margin: 10px; } a { color: blue; } 

Reset Otomatis PostCSS memungkinkan kita untuk tidak membuat file terpisah dengan reset semua gaya. Plugin membuat satu pemilih besar untuk semua pemilih, di mana ia menempatkan aturan, mengatur ulang semua gaya. Secara default, hanya semua aturan yang dibuat dengan nilai awal. Ini berguna dalam kombinasi dengan plugin postcss-initial , yang pada gilirannya mengubah aturan ini menjadi sekumpulan aturan untuk 4 layar. Namun, semuanya dapat dikonfigurasi dan diatur ulang misalnya seperti ini:

 //out.css div, a { margin: 0; padding: 0; } div { margin: 10px; } a { color: blue; } 

Ingat di awal artikel saya mengatakan bahwa PostCSS bukan hanya prosesor pos?

PostCSS - preprocessor?

Pertimbangkan satu parser dan satu plugin, setelah itu Anda akan mengubah pendapat Anda saat ini tentang PostCSS.

Gula

 //in.sss .parent color: white .parent > .child color: black //out.css .parent { color: white } .parent > .child { color: black } 

SugarSS adalah parser (bukan plugin!), Yang didasarkan pada lekukan , dan bukan pada kurung kurawal, sebagai standar. Ini memiliki ekstensi terpisah ".sss". Kode yang ditulis menggunakan SugarSS serupa dengan sintaks Sass lama, tetapi tanpa lotionnya seperti variabel, mixin, pewarisan, dll.

Anda menebak apa yang akan ditambahkan plugin berikutnya?

Precss

 //in.sss $color: black .parent .child color: $color //  SugarSS $color: black; .parent { .child { color: $color } } //out.css .parent .child { color: black } 

PreCSS baru saja menambahkan kemampuan preprosesor yang ditulis pada paruh pertama artikel.

Dan mengapa PostCSS bukan preprosesor sekarang?

Stylelint

Sudah banyak yang ditulis tentang Stylelint . Dia masuk ke ulasan ini karena dia menggunakan PostCSS sebagai pengurai baris file CSS. Misalkan kita memiliki file seperti itu.

 a { color: rgb(1, 1, 1) } div { color: rgb(0, 0, 0) } 

Berikut ini adalah output untuk file saat ini:

  2:21 Expected a trailing semicolon declaration-block-trailing-semicolon 6:21 Expected a trailing semicolon declaration-block-trailing-semicolon 7:1 Unexpected missing end-of-source newline no-missing-end-of-source-newline 

Kegunaan alat ini cukup sulit ditaksir terlalu tinggi.

Kesimpulan

Pra-prosesor menambahkan banyak fungsi baru yang tidak ada dalam CSS. Setelah Anda mencobanya, Anda tidak akan kembali ke CSS biasa.

PostCSS jauh lebih dekat dengan CSS asli daripada preprosesor, tetapi meskipun demikian, dengan plugin tertentu yang terhubung, ia dapat memiliki fungsi yang sama (dan bahkan sintaksis yang serupa). Huruf pemula dapat mengeset tanpa berpikir bahwa tata letak tidak dalam CSS murni. Beberapa plugin (misalnya Autoprefixer) tidak memiliki analog di dunia preprosesor.

Tidak ada yang mengganggu menggunakan preprosesor dan PostCSS bersamaan. Pilihannya cukup bagus untuk proyek yang sudah menggunakan preprosesor dan memiliki tempat tinggal.

Untuk proyek baru, saya akan merekomendasikan hanya menggunakan PostCSS. Desainer tata letak digunakan untuk sintaks preprosesor? Instal plugin PreCSS dan parser SugarSS. Perlu kompatibilitas lintas-browser? Instal plugin Autoprefixer. Kompatibilitas lintas-browser tidak lagi diperlukan (misalnya, proyek Anda dibungkus dengan elektron dan menjadi desktop)? Cukup hapus Autoprefixer! Dengan PostCSS, Anda dapat, seperti halnya dengan konstruktor, membangun dengan tepat apa yang dibutuhkan proyek Anda.