PostCSS Deep Dive: Roll Preprocessor Milikmu Sendiri

Indonesian (Bahasa Indonesia) translation by Ridho Anbia Habibullah (you can also view the original English article)

Dalam tutorial sebelumnya, kami membahas cara menggunakan paket preprocessing yang sangat baik 'PreCSS'. Dalam tutorial ini, kami akan mendekati pra-pemrosesan berbasis PostCSS dengan cara yang berbeda; menginstal pilihan plugin yang dipilih secara khusus untuk membangun preprocessor kita dari bawah ke atas.

Aku akan membawamu melalui pengaturan apa yang aku temukan secara pribadi untuk menjadi campuran hebat plugin ekstensi bahasa. Tetapi ketika tiba saatnya kamu menggulirkan preprocessor milikmu sendiri, kamu mungkin memilih untuk menggunakan hanya beberapa plugin yang kita bahas di sini, atau kamu mungkin tidak memilih sama sekali, melainkan lebih memilih opsi lain.

Itulah keindahan dari proses ini; Kamu memiliki pengaturan preprocessor milikmu, sesuai yang kamu mau. Tujuan dari tutorial ini adalah untuk memberikan kepadamu pengalaman dalam menyusun preprocessor PostCSS, dan mempermudah kamu mengisi pada fitur-fitur dari plugin yang tersedia saat ini sehingga kamu dapat memutuskan sendiri mana yang ingin kamu gunakan.

Mari kita mulai!

Siapkan Proyekmu

Hal pertama yang perlu kamu lakukan adalah mengatur proyek milikmu untuk menggunakan Gulp atau Grunt, tergantung pada preferensimu. Jika kamu belum memiliki preferensi untuk satu atau yang lain, aku sarankan untuk menggunakan Gulp karena kamu akan membutuhkan lebih sedikit kode untuk mencapai tujuan yang sama.

Kamu dapat membaca tentang cara menyiapkan proyek Gulp atau Grunt untuk PostCSS di tutorial sebelumnya

masing-masing.

Jika kamu tidak ingin secara manual mengatur proyekmu dari awal, kamu dapat mengunduh file sumber yang dilampirkan pada tutorial ini, dan ekstrak proyek starter Gulp atau Grunt yang tersedia ke dalam folder proyek kosong.

Kemudian, dengan terminal atau command prompt menunjuk pada folder, jalankan perintah npm install.

Catatan pada instalasi Plugin

Tutorial ini akan menganggap kamu telah mengikuti entri sebelumnya dalam rangkaian dan sekarang terbiasa dengan cara menginstal plugin ke dalam proyek kamu dan memuatnya melalui Gulpfile atau Gruntfile milikmu.

Penting! Saat kita selesai, pastikan untuk memuat plugin ke Gulpfile / Gruntfile milikmu dalam urutan yang kamu lihat dalam tutorial ini; urutan muatan penting dalam PostCSS agar semuanya berjalan lancar.

Menambahkan impor untuk parsial

Tempat pertama yang akan kita mulai dengan menyusun preprocessor kustom kami adalah impor. Kamu telah melihat PostCSS inlining dari @import stylesheet dalam tutorial sebelumnya untuk Minification dan optimasi dan Preprocessing dengan PreCSS. Cara impor yang akan digunakan dalam preprocessor ini tidak berbeda.

kita baru saja menyentuh di atas pada kenyataan bahwa urutan muatan penting dalam PostCSS, dan di sini kita menemukan contoh pertama ini. Kita ingin memastikan semua file @import masuk sebagai langkah pertama, sehingga kita memiliki semua kode proyek kita di satu tempat untuk sisa plugin kita untuk melawan.

Sebagai contoh, kita dapat menyimpan semua variabel kita dalam file parsial, dan menggunakan @import untuk membawa sebagian ke dalam stylesheet utama kami. Jika kita tidak menjalankan plugin yang mengubah file @import terlebih dahulu, variabel kita tidak akan diimpor dan karenanya tidak akan tersedia untuk sisa pemrosesannya.

Pertama, Ubah File Sumber Gulpfile menjadi 'style.css'

Karena kita akan mulai mengimpor parsial, kita ingin membuat sedikit perubahan pada Gulpfile kita sebelum kita menambahkan fungsi impornya.

Catatan: jika menggunakan Grunt, kamu tidak perlu melakukan perubahan apa pun pada tahap ini.

Saat ini kita memiliki file '.css' apa pun yang ditemukan di folder 'src' yang dikompilasi, tetapi kita tidak ingin secara tidak sengaja mengkompilasi sebagian file. Kita akan mengimpor semuanya ke dalam 'style.css' kita file sehingga satu-satunya yang perlu dikompilasi.

Temukan baris ini :

1	return gulp.src('./src/*.css')

.. .dan mengubahnya untuk:

1	return gulp.src('./src/style.css')

Impor Plugin yang digunakan:

postcss-impor oleh Maxime Thirouin: https://github.com/postcss/postcss-import

Ini adalah plugin yang sama yang kita gunakan dalam tutorial 'Untuk Minifikasi dan Pengoptimalan', dan itu juga digunakan dalam PreCSS, jadi kamu akan sedikit terbiasa dengannya pada saat ini.

Instal plugin ke dalam proyekmu, kemudian di folder 'src' mu buat sebuah file bernama '_vars.css' dan tambahkan beberapa kode uji dasar ke dalamnya. Perhatikan kita belum menambahkan fungsionalitas variabel, jadi hanya beberapa CSS lurus, misalnya:

1	.test {
2	background: black;
3	}

Sekarang impor file variabel barumu ke dalam “src / style.css” utama milikmu file dengan menambahkan kode ini di baris pertama:

1	@import "_vars";

Kompilasi kodemu, lalu periksa 'dest / style.css'mu file dan kamu akan melihatnya sekarang berisi kode dari '_vars.css'-mu file.

Tambahkan Mixins

Plugin Mixins Digunakan:

postcss-mixins oleh Andrey Sitnik: https://github.com/postcss/postcss-mixins

Catatan: plugin ini harus dijalankan sebelum postcss-nested dan postcss-simple-vars plugin, yang kita akan menggunakan.

Lanjutkan dan pasang postcss-mixins, lalu tambahkan kode berikut ke “src / style.css” file:

@define-mixin icon $network, $color {
    .button.$(network) {
      background-image: url('img/$(network).png');
		background-color: $color;
	}
}

@mixin icon twitter, blue;

Setelah kompilasi, 'dest / style.css' harus memiliki kode dikompilasi berikut yang ditambahkan ke dalamnya:

1	.button.twitter {
2	background-image: url('img/twitter.png');
3	background-color: blue;
4	}

Plugin postcss-mixins yang kami gunakan di sini sama dengan yang digunakan di PreCSS. kita membahas cara menggunakannya dalam tutorial tentang PreCSS, jadi untuk rincian lengkap tentang sintaksnya, periksa bagian 'Mixins' dari tutorial sebelumnya.

Pilihan Plugin Mixin lainnya:

postcss-sassy-mixins oleh Andy Jansson: https://github.com/andyjansson/postcss-sassy-mixins

Jika kamu lebih suka menggunakan sintaks Sass ketika membuat mixins, periksa plugin Andy postersons-sassy-mixins Andy Jansson, yang bekerja dengan cara yang sama seperti postcss-mixins tetapi dengan syntax @mixin untuk mendefinisikan mixin, dan @include untuk digunakan satu.

Tambahkan "for" loops

"for" Loops Plugin digunakan:

postcss-untuk oleh Anton Yakushev: https://github.com/antyakushev/postcss-for

Catatan: plugin postcss-for adalah yang lain yang harus dieksekusi sebelum postcss-nested dan postcss-simple-vars.

Pasang plugin postcss-for, kemudian uji coba berfungsi seperti yang diharapkan dengan menambahkan kode ini ke “src / style.css” milikmu file:

1	@for $i from 1 to 3 {
2	p:nth-of-type($i) {
3	margin-left: calc( 100% / $i );
4	}
5	}

Ini harus dikompilasi untuk tampilanmu:

1	p:nth-of-type(1) {
2	margin-left: calc( 100% / 1 );
3	}
4
5	p:nth-of-type(2) {
6	margin-left: calc( 100% / 2 );
7	}
8
9	p:nth-of-type(3) {
10	margin-left: calc( 100% / 3 );
11	}

Sekali lagi, plugin kita menggunakan untuk menambahkan @for loop adalah sama seperti yang digunakan dalam PreCSS, jadi untuk tambahan informasi yang memeriksa sintaks "Loop" bagian dalam tutorial sebelumnya.

Pilihan Plugin Loop “for” lainnya:

Garpu dari postcss-untuk oleh Anton Yakushev: https://github.com/xori/postcss-for

Plugin posts-for harus dijalankan sebelum postcss-simple-vars, yang berarti tidak ada cara untuk menggunakan variabel untuk mengatur rentang yang kamu inginkan dari @for loop milikmu.

Jika ini adalah masalah, kamu dapat menggunakan this fork dari postcss-for plugin yang seharusnya dimuat setelah plugin postcss-simple-vars.

Karena ini berjalan setelah variabel dievaluasi, kamu bebas menggunakan variabel untuk mengatur rentang yang kamu inginkan dari @for loop milikmu, melalui iterasi, seperti ini:

@from: 1;
@count: 3;

@for $i from @from to @count {
    p:nth-of-type($i) {
    	margin-left: calc( 100% / $i );
	}
}

Menambahkan variabel

Kita akan menambahkan dua jenis variabel ke preprocessor kita, yang keduanya bisa sangat berguna. Jenis pertama menggunakan sintaks seperti Sass, dan yang kedua menggunakan sintaks dari CSS custom properties, atau dikenal sebagai variabel CSS.

Variabel plugin digunakan:

postcss-sederhana-vars oleh Andrey Sitnik: https://github.com/postcss/postcss-simple-vars
postcss-css-variable oleh Eric Eastwood: https://github.com/MadLittleMods/postcss-css-variables

Pasang dua plugin ini, lalu kita akan menguji masing-masing satu per satu.

Pertama, kita akan menguji Sass-seperti sintaks postcss-sederhana-vars. Buka '_vars.css' file yang kamu buat sebelumnya, hapus isinya dan tambahkan kode berikut:

1	$default_padding: 1rem;

Tambahkan yang berikut ini ke file 'src / style.css' milikmu berkas dan mengkompilasi ulang:

1	.post {
2	padding: $default_padding;
3	}

Ini harus dikompilasi untukmu:

1	.post {
2	padding: 1rem;
3	}

Sekarang kami akan menguji properti khusus CSS seperti sintaks variabel postcss-css. Tambahkan kode berikut ke file “src / style.css”milikmu file:

:root {
    --h1_font_size: 3rem;
}

h1 {
	font-size: var(--h1_font_size);
}

@media ( max-width: 75rem ){
	h1 {
		--h1_font_size: 4vw;
	}
}

Ini harus dikompilasi menjadi:

h1 {
    font-size: 3rem;
}

@media ( max-width: 75rem ) {

	h1 {
		font-size: 4vw;
	}
}

Perhatikan bahwa ketika menggunakan variabel CSS, kita hanya perlu mengubah nilai variabel --h1_font_size di dalam kueri media dan secara otomatis menampilkan properti font-size yang terkait. Ini adalah fungsi yang sangat berguna.

Mengapa Menggunakan Kedua Jenis Variabel?

Sebelum aku melanjutkan, aku akan menyebutkan secara singkat lagi, bahwa pendekatan yang dilakukan dalam tutorial ini bukanlah pendekatan yang harus kamu ambil. Jika Anda ingin menggunakan satu jenis variabel dan bukan yang lain, itu benar-benar baik.

Dari perspektifku, alasan aku suka menggunakan kedua jenis variabel adalah aku menggunakannya dalam dua cara berbeda. Aku biasanya akan menggunakan sintaksis properti kustom CSS di stylesheet utama punyaku, sementara aku menggunakan variabel seperti Sass di sebagian file punyaku.

Ini memungkinkan aku menetapkan properti kustom CSS untuk jenis variabel yang mungkin aku gunakan dalam proyek langsung jika / ketika mereka didukung dengan baik di seluruh browser. Seperti yang kamu lihat pada contoh di atas, mereka juga memiliki fungsi tertentu yang tidak dimiliki variabel Sass.

Sementara itu, aku dapat menggunakan variabel seperti Sass untuk hal-hal yang tidak termasuk dalam lembar gaya hidup, terutama yang murni diproses melalui hal-hal seperti setiap loop, kondisional, dan transformasi lainnya.

Opsi Plugin Variabel Lainnya:

postcss-advanced-variabel oleh Jonathan Neal: https://github.com/jonathantneal/postcss-advanced-variables

Sebagai alternatif untuk menggunakan postcss-simple-vars punyamu mungkin ingin mempertimbangkan menggunakan variabel postcss-advanced, plugin yang digunakan sebagai bagian dari paket PreCSS.

Ini juga merupakan pilihan yang sangat baik, dengan perbedaan utama menangani conditional, loop dan variabel dalam plugin yang sama. Bagi ku, alasan saat ini memilih postcss-simple-vars adalah aku lebih suka memiliki conditional yang berasal dari plugin terpisah; postcss-conditionals yang akan kita bahas segera.

postcss-custom-properti oleh Maxime Thirouin: https://github.com/postcss/postcss-custom-properties

Daripada menggunakan postcss-css-variabel, kamu mungkin lebih suka postcss-custom-properti.

Perbedaan mendasar antara keduanya adalah properti-properti paska-pas memenuhi sesuai dengan spesifikasi W3C untuk properti kustom sehingga Anda dapat yakin bahwa Anda hanya menulis CSS yang benar di masa mendatang. Di sisi lain, variabel postcss-css menawarkan fungsionalitas tambahan, tetapi dalam melakukannya tidak mengklaim memiliki paritas lengkap dengan spec.

Aku pribadi memilih variabel postcss-css karena menggunakannya dalam konteks preprocessing di mana menulis banyak kode non-spec pula. Karena itu saya lebih suka memiliki fungsionalitas tambahan lebih dari 100% spec kepatuhan.

Namun, jika kamu menggunakan variabel dalam konteks penulisan CSS di masa mendatang, kamu mungkin menemukan properti khusus pascss lebih cocok untukmu.

Tambahkan loop "each"

"each" Loop Plugin yang digunakan:

postcss-masing-masing oleh Alexander Madyankin: https://github.com/outpunk/postcss-each

Menginstal plugin postcss-each kemudian tambahkan kode variabel ini untuk Anda "_vars.css" file:

1	$social: twitter, facebook, youtube;

Kode ini mendefinisikan daftar, disimpan dalam variabel $social.

Sekarang kita akan menciptakan @each loop untuk iterate melalui nilai yang disimpan dalam variabel $social kami. Tambahkan kode ini untukmu "src/style.css" file:

@each $icon in ($social){
    .icon-$(icon) {
		background: url('img/$(icon).png');
	}
}

Loop @each kita sekarang siap, tapi sebelum kita dapat mengkompilasi kita perlu membuat sedikit perubahan ke pilihan postcss-sederhana-vars konfigurasi.

kamu akan melihat bahwa dalam kode di atas kita menggunakan $icon untuk mewakili nilai saat ini kami sedang iterasi melalui. Beberapa kesulitan dapat timbul dari ini karena plugin postcss-sederhana-vars mencari tanda $ untuk mengidentifikasi variabel.

Ini berarti itu akan melihat $icon, berpikir itu adalah variabel, mencoba untuk proses itu, kemudian melihat tidak memiliki nilai. Itu akan membuatnya berhenti kompilasi dan log kesalahan ke konsol bahwa ia telah menemukan sebuah variabel undefined.

Untuk mengatasi ini, kami ingin menambahkan opsi silent: true to our options for the plugin. Ini berarti bahwa jika ia menemukan sebuah variabel undefined itu tidak akan menghentikan menyusun log kesalahan, itu hanya akan membawa. Oleh karena itu tidak akan terganggu oleh kehadiran $icon dalam lingkaran @each dan kita akan mampu mengumpulkan hingga berhasil.

Dalam array prosesor Gulpfile atau Gruntfile, mengatur opsi:

/* Gulpfile */
simple_vars({silent: true})

/* Gruntfile */
require('postcss-simple-vars')({silent: true})

Sekarang mengkompilasi CSS dan kamu harus meng-get:

.icon-twitter {
    background: url('img/twitter.png');
}

.icon-facebook {
	background: url('img/facebook.png');
}

.icon-youtube {
	background: url('img/youtube.png');
}

Pilihan Plugin Loop 'each' lainnya:

postcss-advanced-variabel oleh Jonathan Neal: https://github.com/jonathantneal/postcss-advanced-variables

Seperti disebutkan sebelumnya, variabel pascapekses adalah opsi plugin lain yang sangat baik yang menangani variabel, loop dan kondisional semua dalam satu.

Tambahkan conditional

Conditional Plugin yang digunakan:

postcss-conditional oleh Andy Jansson: https://github.com/andyjansson/postcss-conditionals

Aku sebutkan sebelumnya bahwa plugin ini adalah preferensi untuk menangani conditional. Hal ini karena aku telah menemukan hal ini mampu menangani lebih kompleks bersyarat cek. Ini termasuk dukungan untuk @else if sintaks, yang berarti kamu dapat menguji terhadap lebih banyak kondisi dalam satu bagian kode.

Setelah menginstal plugin postcss-conditional, menguji it out dengan menambahkan kode ini untuk pada fil "src/style.css" file:

$column_count: 3;

.column {
    @if $column_count == 3 {
		width: 33%;
		float: left;
	} @else if $column_count == 2 {
		width: 50%;
		float: left;
	}	@else {
		width: 100%;
	}
}

Kode ini akan memeriksa nilai kami tetapkan dalam variabel @column_count dan akan output lebar yang berbeda dan nilai-nilai float tergantung pada apa yang ia menemukan. Ia bekerja dalam cara yang sama seperti kode yang kita digunakan dalam tutorial preprocessing sebelumnya, tapi sekarang bahwa kita memiliki kemampuan untuk menggunakan @else if baris kita telah mampu meningkatkan jumlah kondisi kita sedang menguji dua sampai tiga.

Setelah mengkompilasi ulang ini seharusnya membantumu :

1	.column {
2	width: 33%;
3	float: left
4	}

Coba $column_count 2 atau 1 dan kompilasi lagi untuk melihat bagaimana perubahan CSS output.

Kita juga dapat menggunakan jenis conditional baik di dalam mixins, yang menambahkan dukungan sebelumnya. Sebagai contoh, kita dapat membuat mixin untuk menghasilkan kolom tata letak kode seperti:

@define-mixin columns $count {
    @if $count == 3 {
		width: 33%;
		float: left;
	} @else if $count == 2 {
		width: 50%;
		float: left;
	}	@else {
		width: 100%;
	}
}

.another_column {
	@mixin columns 2;
}

Ini akan memberi output:

1	.another_column {
2	width: 50%;
3	float: left;
4	}

Pilihan conditional lainnya:

postcss-advanced-variabel oleh Jonathan Neal: https://github.com/jonathantneal/postcss-advanced-variables

Seperti disebutkan sebelumnya, postcss-maju-variabel adalah pilihan plugin hebat lain yang menangani variabel, loop dan conditional semua dalam satu.

Menambahkan Calc() untuk matematika

Calc() Plugin yang digunakan:

postcss-calc oleh Maxime Thirouin: https://github.com/postcss/postcss-calc

Dalam tutorial sebelumnya kami menggunakan postcss-calc, melalui cssnano, untuk membantu membuat contoh penggunaan calc() lebih efisien. Dalam konteks preprocessing, namun, itu bisa sangat berguna di mana pun kita mungkin ingin menggunakan matematika dalam stylesheet kita.

Pergi ke depan dan menginstal postcss-calc, maka kita akan menguji it out dengan membuat kolom generasi mixin kami menambahkan di atas lebih efisien.

Sekarang kita menggunakan conditional untuk memeriksa jika mixin's $count argumen diatur untuk baik 1, 2 atau 3 kemudian Keluaran yang sesuai pra-dihitung lebar. Sebaliknya, kita akan menggunakan calc() untuk secara otomatis output lebar tepat untuk kode kolom kita, tidak peduli apa nomor melewati mixin.

Tambahkan ke "src/style.css" file:

@define-mixin columns_calc $count {
    width: calc( 100% / $count );
	@if $count > 1 {
		float: left;
	}
}

.column_calculated {
    @mixin columns_calc 2;
}

Bukan keras pengkodean lebar persentase kita perlu tertentu jumlah kolom, kita sekarang sedang menghitung pada terbang.

Plugin postcss-calc akan mengkonversi lebar: calc (100% / $count); ke dalam jumlah yang statis tergantung pada nilai berlalu saat kita memanggil mixin, dalam hal ini 2.

Mengkompilasi ulang kode dan kamu akan melihat output ini:

1	.column_calculated {
2	width: 50%;
3	float: left;
4	}

Catatan: Dimanapun postcss-calc dapat menyelesaikan calc() ke nilai statis itu akan output itu ke dalam kode Anda. Jika tidak bisa, itu akan mengubah apa-apa, jadi Anda masih dapat menggunakan calc() untuk nilai-nilai yang perlu ditangani oleh browser pada saat runtime.

Tambahkan Nesting

Plugin Nesting Digunakan:

postcss-bersarang oleh Andrey Sitnik: https://github.com/postcss/postcss-nested

Untuk bersarang kita sedang menggunakan plugin yang sama seperti yang digunakan dalam kemasan PreCSS, sehingga kamu dapat merujuk kembali ke tutorial sebelumnya untuk informasi lengkap tentang sintaks.

Menginstal postcss-nested kemudian menguji bahwa semuanya bekerja dengan benar dengan kompilasi kode ini:

.menu {
  width: 100%;
    a {
		text-decoration: none;
	}
}

CSS yang dihasilkan harus:

.menu {
    width: 100%;
}

.menu a {
	text-decoration: none;
}

Add Extends

Extends Plugin Used:

postcss-sass-memperpanjang oleh Jonathan Neal: https://github.com/jonathantneal/postcss-sass-extend

Untuk meluas, kita akan menggunakan plugin postcss-sass-extend. Ini akan memberi kita Hotel-sintaks berbeda untuk digunakan daripada yang kita bahas dalam tutorial sebelumnya kita bekerja dengan PreCSS. Alih-alih memperluas didefinisikan dengan @define-extend extend_name {...} mereka didefinisikan dengan % extend_name {...}.

Mereka masih digunakan dengan pada dasarnya sintaks yang sama dari @extend % extend_name;.

Perhatikan bahwa plugin postcss-sass-extend benar-benar dikirimkan dengan PreCSS, namun aku menganggap itu tidak memuat secara default ketika aku mencoba menggunakan sintaks yang diperlukan yang tidak dikompilasi.

Setelah menginstal postcss-sass-memperluas ke dalam proyek, mengujinya dengan kode berikut:

%rounded_button {
    border-radius: 0.5rem;
	padding: 1em;
	border-width: 0.0625rem;
	border-style: solid;
}

.blue_button {
	@extend %rounded_button;
	border-color: #2F74D1;
	background-color: #3B8EFF;
}

.red_button {
	@extend %rounded_button;
	border-color: #C41A1E;
	background-color: #FF2025;
}

Itu harus mengkompilasi ke:

.blue_button, .red_button {
  border-radius: 0.5rem;
    padding: 1em;
	border-width: 0.0625rem;
	border-style: solid;
}

.blue_button {
	border-color: #2F74D1;
	background-color: #3B8EFF;
}

.red_button {
	border-color: #C41A1E;
	background-color: #FF2025;
}

Opsi Plugin Perluasan Lain:

postcss-memperpanjang: https://github.com/travco/postcss-extend
postcss-sederhana-memperpanjang: https://github.com/davidtheclark/postcss-simple-extend

Ekstra

Sejauh ini kita telah membahas apa bisa dianggap sebagai fitur inti umum untuk sebagian preprocessors. Namun, masih ada lebih banyak lagi plugin yang tersedia untuk menawarkan fitur tambahan; beberapa fitur ini ditemukan di preprocessor lain, dan beberapa dari kamu harus pergi ke PostCSS untuk menemukannya. Kita akan pergi ke opsi-opsi tambahan ini sebentar sekarang.

Warna manipulasi

Plugin:

postcss-warna-fungsi oleh Maxime Thirouin: https://github.com/postcss/postcss-color-function
postcss-warna-alpha oleh Ivan Vlasenko: https://github.com/avanes/postcss-color-alpha
postcss-warna-scale oleh Kristofer Joseph: https://github.com/kristoferjoseph/postcss-color-scale

Kemampuan untuk men-tweak warna dapat menjadi salah satu fitur yang paling berguna yang ditemukan di preprocessors. Ada benar-benar beberapa plugin warna untuk PostCSS, tapi ini adalah tiga yang menemukan diri mereka terutama di rumah dalam preprocessing setup. Mereka memungkinkan untuk berbagai warna transformasi termasuk pemutih, penggelapan, menjenuhkan, menambahkan nilai-nilai alpha dan banyak lagi.

Definisi properti

Plugin:

postcss-mendefinisikan-properti oleh Dale Eidd: https://github.com/daleeidd/postcss-define-property

Fungsionalitas yang ditawarkan oleh plugin ini dapat dibandingkan dengan mixless Stylus, dimana, daripada menggunakan sintaks seperti mixin, Kamu mendefinisikan potongan kode sedemikian rupa sehingga mereka dapat digunakan dalam kode dengan cara yang sama seperti properti asli, misalnya

/* Define a property */
size: $size {
  height: $size;
  width: $size;
}

/* Use it like a native property */
.square {
  size: 50px;
}

Plugin juga dapat digunakan untuk mendefinisikan kembali sifat-sifat asli sesuai dengan kebutuhan.

Properti Lookup

Plugin:

postcss-properti-lookup oleh Simon Smith: https://github.com/simonsmith/postcss-property-lookup

Properti lookup adalah sebuah fitur yang ditemukan di Stylus yang dapat sangat berguna. Hal ini memungkinkan kamu lookup nilai properti dari dalam gaya yang sama. Misalnya, Anda dapat menetapkan margin kanan untuk mencocokkan kiri dengan: margin kiri: 20px; margin-right: @margin-left;

Nested Properties

Plugin:

postcss-bersarang-alat peraga oleh Jed Mao: https://github.com/jedmao/postcss-nested-props

Sementara bersarang biasa yang kita bahas di atas unwraps penyeleksi, plugin postcss-bersarang-alat peraga unwraps properti yang bersarang, misalnya:

/* Origincal code */
.element {
    border: {
        width: 1px;
        style: solid;
        color: #ccc;
    }
}

/* After processing */
.element {
    border-width: 1px;
    border-style: solid;
    border-color: #ccc;
}

Pencocokan

Plugin:

postcss-match oleh Ryan Tsao: https://github.com/rtsao/postcss-match

Pencocokan memberi kamu cara lain untuk melakukan pemeriksaan bersyarat, kali ini menggunakan pencocokan pola Karat, sesuatu yang mirip dengan pergantian pernyataan dalam JavaScript atau PHP. Ini dapat memberi kamu cara yang lebih efisien untuk memeriksa beberapa kondisi daripada menulis banyak if else checks.

CSS Sprite generasi

Plugin:

postcss-sprite oleh Viktor Vasilev: https://github.com/2createStudio/postcss-sprites

CSS sprite generasi, fitur populer di Kompas, juga dapat dilakukan melalui plugin postcss-sprite. Plugin akan memindai CSS untuk gambar, menggabungkan gambar-gambar itu ke dalam lembar sprite, dan memperbarui kode seperti yang diperlukan untuk menampilkan dari lembar sprite yang baru dengan benar.

Banyak lebih banyak pilihan

Saat ini ada daftar benar-benar kuat bahasa ekstensi plugin untuk memilih dari, lebih dari kita dapat mencakup di sini, jadi memeriksa daftar lengkap di: https://github.com/postcss/postcss#language-extensions

Segera hadir: Syntaxes alternatif

Bagi banyak orang, kemampuan untuk menulis di singkat, efisien sintaks (biasanya sans tanda koma dan kurung kurawal) adalah salah satu besar banding dari preprocessors seperti Stylus atau Sass. Versi baru dirilis 5.0 PostCSS sekarang mendukung parsers kustom yang akan memungkinkan baru syntaxes harus didukung. SugarSS harus parser singkat sintaks, dan diskusi saat ini terbuka pada bagaimana sintaks ini akan disusun.

Anda Selalu Bisa Menambahkan Sendiri

PostCSS masih relatif baru dan mungkin menemukan ada sesuatu yang ingin dicapai dengan preprocessor kustom milikmu yang saat ini tidak ada plugin. Keindahan ekosistem modular ini adalah Anda memiliki pilihan untuk menyelesaikan sendiri masalah itu dengan membuat plugin sendiri. Siapa pun dapat melakukannya, dan penghalang untuk masuk jauh lebih rendah daripada kamu untuk mencoba dan menambahkan fungsi sendiri ke Stylus, Sass atau LESS. Kami akan belajar caranya di tutorial selanjutnya.

Dalam Tutorial berikutnya

Kamu tidak harus memilih antara PreCSS dan menggulirkan preprocessor sendiri jika ingin menggunakan PostCSS. Kamu benar-benar dapat memilih tidak menggunakan pra-pemrosesan berbasis PostCSS sepenuhnya jika memilih, alih-alih menggunakannya berdampingan dengan preprocessor favoritmu.

Dalam tutorial berikutnya, kita akan belajar cara menggunakan PostCSS bersama dengan Stylus, Sass, atau LESS. Sampai jumpa!