PostCSS Deep Menyelam: Preprocessing dengan "PreCSS"

Indonesian (Bahasa Indonesia) translation by Suci Rohini (you can also view the original English article)

Dalam dua terakhir kami melihat cara-cara untuk menggunakan PreCSS pada stylesheet lengkap untuk meningkatkan kompatibilitas dan pengoptimalan lintas browser mereka, pada dasarnya sebagai pasca-prosesor. Dalam tutorial ini Anda akan belajar menggunakan PostCSS sebagai pre -processor, dengan cara yang sama Anda akan menggunakan Stylus, Sass atau LESS.

Ada dua cara utama Anda dapat menggunakan PostCSS untuk preprocessing. Salah satu adalah untuk memilih semua plugin Anda sendiri untuk menambah fungsionalitas preprocessor yang Anda inginkan, dan yang lain adalah untuk menginstal paket plugin yang telah dipilih sebelumnya sehingga Anda siap untuk pergi segera.

Kami akan mulai dengan pendekatan tercepat dan termudah, menginstal paket plugin PreCSS yang sangat baik , yang dibuat oleh Jonathan Neal. Dalam tutorial setelah ini kita akan bergerak ke bagaimana Anda dapat menempatkan bersama-sama preprocessor Anda sendiri, menggunakan hanya fungsionalitas yang Anda inginkan.

Tutorial ini akan menganggap Anda memiliki tingkat tertentu keakraban dengan fitur-fitur yang biasanya ditemukan dalam preprocessors seperti Stylus, Sass atau kurang. Itu murni karena kami akan mengevaluasi bagaimana Anda dapat menggunakan fitur yang sama melalui PostCSS, yaitu apa yang sebenarnya dilakukan fitur. Meskipun begitu, meskipun Anda belum pernah menggunakan preprocessor sebelumnya, ini mungkin tempat yang tepat untuk memulai.

Try Out PreCSS Live

Kita akan pergi melalui cara men-setup menelan atau kasar proyek yang menggunakan PreCSS di bagian berikutnya, namun, jika Anda ingin mengambil jalan pintas, (hanya untuk sekarang), Anda dapat atau menggunakan Taman Bermain live demo untuk mencoba kode kami akan menjalankan melalui dalam tutorial ini. Kode dapat diketik ke jendela kiri, dan secara otomatis akan dikompilasi untuk Anda dan ditampilkan di jendela kanan.

Editor Langsung PreCSS: https://jonathantneal.github.io/precss

Siapkan Proyek Anda

Hal pertama yang Anda harus lakukan adalah setup proyek Anda untuk menggunakan menelan atau mendengus, tergantung pada preferensi Anda. Jika Anda belum memiliki preferensi untuk satu atau yang lain saya sarankan menggunakan Gulp karena Anda akan membutuhkan lebih sedikit kode untuk mencapai tujuan yang sama.

Anda dapat membaca tentang bagaimana untuk setup menelan atau kasar proyek untuk PostCSS dalam tutorial sebelumnya

masing-masing.

Jika Anda tidak ingin secara manual men-setup proyek Anda dari awal meskipun, Anda dapat men-download file sumber yang melekat pada tutorial ini, dan ekstrak baik disediakan menelan atau kasar starter proyek ke folder kosong proyek.

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

Menginstal PreCSS

Apakah Anda menggunakan Gulp atau Grunt, instal PreCSS ke dalam proyek Anda dengan perintah:

1	npm install precss --save-dev

Muat sebagai Plugin Gulp

Jika Anda menggunakan tegukan, menambahkan variabel ini di bawah variabel sudah dalam file:

1	var precss = require('precss');

Sekarang tambahkan nama variabel baru ke dalam array prosesor Anda :

1	var processors = [
2	precss
3	];

Melakukan tes cepat yang semuanya bekerja dengan menjalankan perintah glup css kemudian memeriksa yang baru "style.css" file telah muncul dalam proyek Anda "dest" folder.

Memuat sebagai Plugin kasar

Jika Anda menggunakan Grunt, perbarui objek prosesor , yang bersarang di bawah objek opsi, ke yang berikut:

1	processors: [
2	require('precss')()
3	]

Melakukan tes cepat yang semuanya bekerja dengan menjalankan perintah grunt postcss kemudian memeriksa yang baru "style.css" file telah muncul dalam proyek Anda "dest" folder.

Anda sekarang memiliki semua yang Anda butuhkan untuk menggunakan PreCSS yang diinstal dan siap digunakan. Ini berarti kita sudah siap untuk mulai melangkah melalui beberapa kemampuan preprocessing PreCSS dan bagaimana mereka dapat digunakan.

Preprocessing melalui "PreCSS"

Secara umum, sintaks PreCSS paling mirip dengan yang ada pada Sass. Namun ia menggunakan beberapa pendekatan uniknya sendiri, yang akan kita bahas seiring kita berjalan.

Catatan: karena Sass-seperti sintaks PreCSS, Anda akan menemukan bahwa stabilo sintaks Sass akan bekerja terbaik bagi Anda di editor teks favorit Anda.

Nesting

Nesting sesuatu umum untuk semua tiga preprocessors utama, yaitu Stylus, Sass dan kurang, dan hal ini juga hadir di PreCSS. Nesting di PreCSS dilakukan dengan cara yang sama seperti di Sass dan LESS, dengan menempatkan pemilih di dalam kurung kurawal pemilih lain.

Kemampuan untuk menggunakan & simbol untuk memiliki pemilih induk digandakan ke pemilih anak juga bekerja dengan cara yang sama di PreCSS seperti pada preprocessors lainnya.

Coba tambahkan kode nested berikut ke “src/style.css" file:

.menu {
    width: 100%;
	a {
		text-decoration: none;
	}
	&::before {
		content: '';
	}
}

Mengkompilasi CSS Anda gulp css atau grunt postcss dengan Anda "dest/style.css" file harus memiliki dievaluasi kode bersarang ke berikut:

.menu {
    width: 100%;
}

.menu a {
	text-decoration: none;
}

.menu::before {
	content: '';
}

Variabel

Variabel adalah jenis lain dari fungsi umum untuk semua preprocessors, dan mereka termasuk dalam PreCSS. Satu-satunya hal yang biasanya berbeda antara setiap preprocessor adalah sintaks untuk menunjukkan variabel.

LESS Variabels dimulai dengan simbol @ dan menempatkan : sebelum nilainya.
Variabel stylus opsional dapat menggunakan simbol $ dan menempatkan tanda = sebelum nilai.
Variabel Sass menggunakan $ simbol dan tempat: sebelum nilai.

Sesuai dengan kecenderungan PreCSS menggunakan Sass seperti sintaks, juga menempatkan $ sebelum nama variabel dan: sebelum nilai.

Mencoba menggunakan variabel PreCSS dengan menambahkan ini ke "src/style.css" file:

$text_color: #232323;

body {
    color: $text_color;
}

Setelah mengkompilasi ulang Anda akan melihat kode ini dihasilkan:

1	body {
2	color: #232323;
3	}

Kondisional

Kondisional, yaitu if dan else logika, adalah fitur yang sangat kuat baik di Sass maupun Stylus. LESS menawarkan guarded mixins, tetapi mereka tidak menawarkan cukup gelar yang sama kekuasaan. Kondisional hadir dalam PreCSS dan ikuti sintaks yang sama sebagai Sass, menggunakan @if dan @else.

Tambahkan kode contoh ini ke "src / style.css" Anda file: file

$column_layout: 2;

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

Dalam contoh di atas kita memiliki sebuah .column kelas output berbeda tergantung pada jika kita ingin satu kolom layout, atau dua kolom layout. Kami memiliki variabel $ column_layout yang disetel menjadi 2 , yang berarti kami harus melihat lebarnya: 50%; float: kiri; output ke kelas kami.

Mengkompilasi file Anda, dan Anda harus melihat berikut dalam "dest/style.css" file.

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

Catatan: plugin postcss-advanced-variable yang menyediakan fungsionalitas kondisional ini masih cukup baru, dan saya telah mengalami beberapa keluaran yang tidak diharapkan ketika menggunakannya untuk kondisional yang lebih rumit, namun, esaya yakin itu akan diperbarui dalam waktu dekat.

Ada plugin alternatif yang dapat digunakan untuk conditional bernama postcss-conditional. Kita akan membahas bagaimana Anda dapat menggunakan plugin (jika Anda memilih) dalam tutorial berikutnya, "Rolling Preprocessor Anda sendiri".

Loop - `@for` dan `@each`

Ada dua jenis loop yang tersedia di loop PreCSS, @for dan @each. Kedua menggunakan pendekatan yang sama seperti Sass. "For" loop memungkinkan Anda menggilir penghitung numerik, sementara "each" loop memungkinkan Anda menggilir daftar item.

`@for` loop

Dalam sebuah loop @for ada variabel "counter" yang terus melacak dari mana Anda berada dalam Bersepeda melalui counter Anda numerik, biasanya ditetapkan sebagai $i. Sebagai contoh, ketika iterasi dari 1 sampai 3 akan ada tiga loop; pertama $i akan sama dengan 1, yang kedua yang akan sama dengan 2 dan ketiga itu akan sama dengan 3.

Variabel counter $i ini dapat interpolated penyeleksi dan aturan yang dapat sangat berguna untuk hal-hal seperti menghasilkan nth-of-type() aturan dan menghitung lebar.

Tambahkan kode ini ke "src/style.css" Anda file untuk mencoba @for loop:

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

Setelah kompilasi, Anda akan melihat kode ini diperluas untuk:

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	}

Catatan : angka 1, 2 dan 3 telah dimasukkan ke masing-masing gaya di atas.

`@each` loop

Loop @each siklus melalui daftar item bukan nomor. Seperti dengan @for loop, variabel yang merepresentasikan item loop saat ini dapat diinterpolasi menjadi pemilih dan aturan. Perhatikan bahwa untuk melakukan interpolasi ke string, Anda perlu memasukkan seperangkat kurung ke nama variabel dalam format $(var).

Memberikan menggunakan loop PreCSS @each pergi dengan menambahkan kode contoh berikut:

$social: twitter, facebook, youtube;

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

Setelah kompilasi Anda harus melihat CSS berikut telah dihasilkan:

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

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

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

Mixins

Sintaks mixin penciptaan adalah salah satu aspek dari PreCSS yang sedikit berbeda Sass.

Dalam Sass, untuk menentukan mixin Anda menggunakan sintaks @mixin mixin_name ($arg1, $arg2) {...} dan kemudian menggunakannya dengan @include mixin_name (pass_arg1, pass_arg2);.

Di PreCSS, di sisi lain, Anda mendefinisikan mixin dengan sintaks @ define-mixin mixin_name $ arg1, $ arg2 {...} dan gunakan dengan @mixin mixin_name pass_arg1, pass_arg2 ;.

Tambahkan contoh ini ke "src / style.css" Anda file:

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

@mixin icon twitter, blue;

@mixin icon youtube, red;

Pada kompilasi, Anda akan melihat:

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

.button.youtube {
	background-image: url('img/youtube.png');
	background-color: red;
}

Catatan: argumen yang dilewatkan melalui mixin dapat interpolated ke penyeleksi dan string dengan pendekatan yang sama seperti yang disebutkan dalam loop @each di atas; dengan $ format (var).

Menggunakan @ mixin-content

Serta menggunakan mixin dengan cara yang ditunjukkan di atas, mereka juga dapat diatur untuk mengkonsumsi blok konten yang dilewatkan saat memanggil mixin. Ini adalah dasarnya proses yang sama seperti dengan Sass' @content.

Sebagai contoh, memodifikasi mixin dari contoh di atas, menempatkan @mixin-content di mana Anda ingin lulus blok konten muncul, seperti:

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

Ketika mixin menggabungkan @mixin-content digunakan, itu harus ditempatkan dengan kurung kurawal, bukan pada satu baris berakhir dengan a ; atau akan gagal untuk mengkompilasi.

Perbarui kode Anda sehingga panggilan mixin Anda terlihat seperti ini:

@mixin icon twitter, blue {
    width: 3rem;
}

@mixin icon youtube, red {
	width: 4rem;
}

Setelah kompilasi, ini harus menghasilkan berikut kode - perhatikan dimasukkannya konten width melewati setiap penggunaan mixin:

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

.button.youtube {
	background-image: url('img/youtube.png');
	background-color: red;
	width: 4rem;
}

Extends

Perpanjangan mirip dengan mixin dalam arti, karena dirancang untuk memungkinkan Anda menggunakan kembali kode kode. Namun, ide di balik "meluas" adalah untuk menciptakan satu set basis kode yang Anda tahu Anda akan digunakan dalam cara yang sama beberapa kali untuk jenis tertentu dari elemen. Anda kemudian dapat kemudian memperpanjang pada dasar dengan kode tambahan, non-default.

Dalam PreCSS, sintaks untuk mendefinisikan memperpanjang adalah @define-extend extend_name {...}.

Dalam "src/style.css" file, tentukan perpanjangan yang berisi gaya dasar untuk tombol bulat seperti:

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

Set default gaya adalah sekarang siap diperpanjang pada dengan kode tambahan, misalnya, menetapkan hal-hal seperti background-color dan border-color. Ini dilakukan dengan menggunakan syntax @extend extend_name; untuk mengimpor gaya dasar yang ditentukan dalam perpanjangan.

Tambahkan kode contoh, di bawah kode baru saja ditambahkan:

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

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

Mana @extend rounded_button; garis digunakan, seluruh isi dengan memperpanjang akan dimasukkan.

Kompilasi gaya Anda dan Anda harus mendapatkan:

.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;
}

Perhatikan juga bahwa gaya umum untuk kelas .blue_button dan .red_button telah digabungkan untuk efisiensi.

Impor

Plugin yang digunakan untuk inlining stylesheet melalui @import adalah sama dengan yang kita bahas dalam tutorial sebelumnya dari seri ini: For Minification and Optimization. Untuk rundown tentang cara kerjanya kepala dan membaca "Headline Inline / Combine File dengan @import".

Dalam konteks menggunakan PostCSS sebagai preprocessor, impor menjadi lebih berguna karena mereka memberikan Anda pilihan untuk mengatur parsial, sesuatu yang Anda mungkin akan digunakan untuk dari solusi preprocessing lainnya. Misalnya, Anda mungkin men-setup "parsial" folder, memisahkan proyek Anda ke file parsial Logis diskrit kemudian impor mereka seperti:

1	@import "partials/_variables.css";
2	@import "partials/_utilities.css";
3	@import "partials/_mixins.css";
4	@import "partials/_extends.css";

Mari kita rekap

Saya harap Anda sekarang memiliki beberapa wawasan ke dalam bagaimana kuat PostCSS dapat sebagai preprocessor melalui paket PreCSS. Untuk meringkas apa yang kita bahas di atas:

Anda dapat mencoba PreCSS tinggal di https://jonathantneal.github.io/precss.
Bersarang di PreCSS bekerja dengan cara yang sama sebagai Sass dan kurang.
Variabel dalam PreCSS menggunakan sintaks yang sama sebagai Sass.
Conditional hadir dalam PreCSS, menggunakan sintaks @if dan @else.
loop @for dan @each tersedia.
PreCSS mixins ditetapkan dengan sintaks:
@define-mixin mixin_name $arg1, $arg2 {...}
PreCSS mixins digunakan dengan sintaks:
@mixin mixin_name pass_arg1, pass_arg2;
@mixin-content dapat digunakan dalam cara yang sama seperti Sass' @content
Memperluas dalam PreCSS didefinisikan dengan sintaks:
@define-extend extend_name {...}
Perluas digunakan dengan sintaks:
@extend extend_name;
@import inlines file CSS eksternal, sangat membantu untuk menggunakan parsial

Di Tutorial Berikutnya

PreCSS adalah proyek yang fantastis, menyatukan beberapa plugin ekstensi bahasa yang sangat baik dan membuat preprocessing berbasis PostCSS cukup banyak plug and play. Ini menyediakan hampir semua fungsi yang diharapkan oleh sebagian besar pengguna preprocessor, dan merupakan cara cepat, "tidak ribut-ribut" untuk menggerakkan bola preprocessor PostCSS.

Menggunakan PreCSS adalah salah satu dari dua metode preprocessing PostCSS yang kami sebutkan di awal tutorial ini. Metode lainnya adalah mengatur preprocessor Anda sendiri , memilih plugin ekstensi bahasa yang sesuai dengan proyek Anda sendiri atau gaya pengkodean. Trade off adalah pengaturan yang sedikit lebih, tetapi sebagai imbalannya Anda mendapatkan kebebasan untuk menyusun preprocessor yang bekerja namun Anda menginginkannya.

Anda akan belajar cara melakukan ini di tutorial berikutnya, "Roll Your Own Preprocessor".