Preprocessor CSS: gambaran, seleksi, aplikasi

Benar-benar semua web designer berpengalaman menggunakan preprocessor. Tidak ada pengecualian. Jika Anda ingin sukses dalam kegiatan ini, jangan lupa tentang program ini. Pada pandangan pertama, mereka dapat menyebabkan horor tenang pemula - itu terlalu mirip dengan pemrograman! Bahkan, Anda dapat menangani semua fitur CSS preprocessor selama sekitar satu hari, dan jika Anda mencoba, maka beberapa jam. Di masa depan, mereka akan secara signifikan menyederhanakan hidup Anda.

Bagaimana CSS preprocessor

Untuk lebih memahami karakteristik teknologi ini, secara singkat menyelidiki sejarah presentasi visual dari halaman Web.

Ketika baru saja dimulai penggunaan besar-besaran dari Internet, tidak ada style sheet tidak ada. Pelaksanaan dokumen tergantung sepenuhnya pada browser. Masing-masing memiliki gaya mereka sendiri, yang telah digunakan untuk pengobatan tag tertentu. Dengan demikian, halaman terlihat berbeda tergantung pada urutan di mana browser Anda membukanya. Hasilnya - kekacauan, kebingungan, masalah bagi pengembang.

Pada tahun 1994, Norwegia ilmuwan Håkon Lie mengembangkan style sheet yang dapat digunakan untuk munculnya halaman terpisah dari dokumen HTML. The priglanulas Ide anggota W3C, yang segera berangkat untuk selesai. Beberapa tahun kemudian ia menerbitkan versi pertama dari spesifikasi CSS. Kemudian ia terus ditingkatkan, sedang diselesaikan ... Tapi konsep tetap sama: masing-masing gaya mengatur sifat tertentu.

Menggunakan tabel CSS selalu bermasalah. Misalnya, web desainer sering memiliki masalah dengan menyortir dan pengelompokan fitur, dan warisan tidak begitu sederhana.

Dan kemudian datang seperdua-ribu. Tanda semakin mulai terlibat dalam pengembang front-end profesional, yang penting untuk gaya kerja yang fleksibel dan dinamis. Ada pada penempatan waktu yang menuntut CSS prefiks dan pelacakan dukungan kemampuan baru dari browser. Kemudian, oleh JavaScript, dan ahli Ruby turun ke bisnis, menciptakan sebuah preprocessor - suprastruktur untuk CSS, fitur baru yang ditambahkan ke dalamnya.

CSS untuk Pemula: fitur preprocessor

Mereka memiliki beberapa fungsi:

• menyatukan prefiks Browser dan khaki;

• menyederhanakan sintaks;

• memberikan kesempatan untuk bekerja dengan pemilih bersarang tanpa kesalahan;

• meningkatkan logika styling.

Singkatnya: preprocessor menambahkan CSS kemampuan logika pemrograman. Sekarang, styling tidak dilakukan dalam daftar biasa gaya dan dengan beberapa teknik sederhana dan pendekatan: variabel, fungsi, hagfish, siklus kondisi. Selain itu, kemampuan untuk menggunakan matematika.

Melihat popularitas ini add-in, W3C sudah mulai secara bertahap menambah kemungkinan mereka dalam kode CSS. Misalnya, dalam spesifikasi sehingga ada fungsi calc (), yang didukung oleh banyak browser. Diharapkan segera akan mungkin untuk mengatur variabel dan membuat hagfish a. Namun, ini akan terjadi di masa depan yang jauh, dan preprocessors sudah ada di sini dan sudah bekerja dengan baik.

Popular preprocessors CSS. kelancangan

Dirancang pada tahun 2007. Awalnya komponen Haml - HTML Template. Fitur baru untuk elemen CSS mengontrol pengembang menikmati pada Ruby on Rails, yang mulai menyebar di mana-mana. The Sass sejumlah besar fitur yang sekarang termasuk dalam preprocessor setiap: variabel, embedding penyeleksi, hagfish (kemudian, bagaimanapun, argumen ini tidak dapat ditambahkan).

Mendeklarasikan variabel dalam Sass

Variabel dideklarasikan dengan tanda $. Mereka dapat mempertahankan sifat dan set mereka, misalnya: "$ borderSolid: 1px merah padat;". Dalam contoh ini, kita mendeklarasikan sebuah variabel yang disebut borderSolid dan disimpan nilai merah 1px solid. Sekarang, jika dalam CSS kita perlu membuat lebar perbatasan merah 1px, hanya menunjukkan bahwa variabel setelah nama properti. Setelah pengumuman variabel tidak dapat diubah. Ada beberapa fungsi built-in. Misalnya, mendeklarasikan variabel dengan nilai $ redcolor # FF5050. Sekarang, dalam kode CSS dalam sifat dari setiap elemen, menggunakannya untuk mengatur warna font: p {color: $ redcolor; }. Apakah Anda ingin bereksperimen dengan warna? Gunakan fungsi menggelapkan atau meringankan. Hal ini dilakukan agar: p {color: menggelapkan ($ redcolor, 20%); }. Sebagai hasilnya, redcolor warna akan 20% lebih ringan.

The Sass banyak fungsi built-in. Bernilai setidaknya membacanya, tapi lebih baik - untuk belajar.

bersarang

Sebelumnya, untuk menunjukkan bersarang harus menggunakan desain lama dan tidak nyaman. Bayangkan bahwa kita memiliki div, yang p, dan di dalamnya, pada gilirannya, mengatur rentang. Untuk div, kita perlu mengatur warna font merah, untuk p - kuning, untuk rentang - pink. Dalam CSS yang khas itu akan dilakukan sebagai berikut:

div {

warna: merah;

}

div p {

warna: kuning;

}

div p rentang {

Warna: pink;

}

Dengan CSS preprocessor semua menjadi lebih mudah dan lebih kompak:

div {

warna: merah;

p {

warna: kuning;

.span {

Warna: pink;

}

}

}

Elemen harfiah "menginvestasikan" satu sama lain.

arahan preprocessor

Menggunakan arahan @ impor dapat mengimpor file. Sebagai contoh, kita punya file fonts.sass yang menyatakan gaya untuk font. Menghubungkannya ke style.sass file utama: 'font' @ impor. Selesai! Alih-alih sebuah file besar tunggal dengan gaya kami memiliki beberapa yang dapat digunakan untuk akses cepat dan mudah untuk sifat yang diperlukan.

hagfish

Salah satu ide yang paling menarik. Hal ini memungkinkan satu baris untuk meminta satu set properti. Beroperasi sebagai berikut:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Hagfish berlaku untuk elemen pada halaman, menggunakan @include direktif. Sebagai contoh, kita ingin menerapkannya pada header h1. Kami memiliki struktur sebagai berikut: h1 {@include: largeFont; }

Semua sifat-sifat hagfish ditugaskan elemen h1.

preprocessor Kurang

Sintaks Sass kenang pemrograman. Jika Anda mencari pilihan yang lebih cocok untuk pemula mempelajari CSS, mencari Kurang. Ini diciptakan pada tahun 2009. Fitur utama - dukungan untuk CSS sintaks asli, sehingga terbiasa dengan pemrograman Imposer akan lebih mudah untuk belajar.

Variabel dideklarasikan menggunakan simbol @. Sebagai contoh: @fontSize: 14px;. karya bersarang pada prinsip yang sama seperti di Sass. Hagfish diumumkan sebagai berikut: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; }. Untuk menghubungkan tidak perlu menggunakan arahan preprocessor - hanya menambahkan hagfish baru dibuat di properti dari elemen yang dipilih. Sebagai contoh: h1 {.largeFont; }.

Stylus

preprocessor lain. Dibuat pada tahun 2011 oleh penulis yang sama, yang memberikan dunia Jade, Express dan produk berguna lainnya.

Variabel dapat dinyatakan dalam dua cara - baik secara eksplisit maupun implisit. Sebagai contoh: huruf = 'Times New Roman'; - pilihan implisit. Tapi $ huruf = 'Times New Roman' - yang jelas. Hagfish dinyatakan dan implisit terhubung. Sintaksnya adalah sebagai berikut: redcolor () warna merah. Sekarang kita dapat menambahkan item, misalnya: redcolor h1 ();.

Stylus pada pandangan pertama mungkin tampak tidak bisa dimengerti. Dimana "asli" kurung dan titik koma? Tapi itu perlu untuk terjun ke dalamnya, semua menjadi lebih jelas. Ingat, bagaimanapun, bahwa pembangunan jangka panjang dari preprocessor ini dapat "menyapih" Anda menggunakan sintaks CSS klasik. Hal ini kadang-kadang menyebabkan masalah ketika harus bekerja dengan gaya "murni".

Apa preprocessor memilih?

Bahkan, itu adalah ... tidak masalah. Semua versi menawarkan tentang fitur yang sama hanya sintaks dari masing-masing berbeda. Kami merekomendasikan untuk melanjutkan sebagai berikut:

• jika Anda - programmer dan ingin bekerja dengan gaya baik dalam kode, gunakan Sass;
• jika Anda - coder dan ingin bekerja dengan gaya seperti tata letak konvensional, memperhatikan Kurang;
• jika Anda suka minimalis, menggunakan Stylus.

Untuk semua varian dalam jumlah banyak perpustakaan yang menarik yang bahkan lebih menyederhanakan pembangunan. Pengguna Sass dianjurkan untuk memperhatikan Kompas - alat yang ampuh dengan banyak fitur built-in. Misalnya, setelah Anda menginstal itu Anda tidak akan pernah perlu khawatir tentang awalan penjual versi. Menyederhanakan bekerja dengan grid. Ada alat untuk bekerja dengan bunga, sprite. Berbagai sudah diumumkan hagfish. Berikan alat ini beberapa hari - dengan demikian Anda akan menghemat banyak waktu dan usaha di masa depan.