Preprocessor CSS: gambaran, pemilihan, permohonan

Benar-benar semua pereka laman web yang berpengalaman menggunakan prapemproses itu. Tiada pengecualian. Jika anda ingin berjaya dalam aktiviti ini, jangan lupa tentang program-program ini. Pada pandangan pertama, ia boleh menyebabkan seram tenang baru - ia adalah terlalu serupa dengan pengaturcaraan! Malah, anda boleh berurusan dengan semua ciri-ciri CSS prapemproses selama kira-kira hari, dan jika anda cuba, maka beberapa jam. Pada masa akan datang, mereka ketara akan memudahkan hidup anda.

Bagaimanakah CSS prapemproses

Untuk memahami ciri-ciri teknologi ini lebih baik, secara ringkas menyelidiki ke dalam sejarah persembahan visual laman web.

Apabila sahaja bermula penggunaan besar-besaran Internet, tidak style sheet tidak wujud. Pelaksanaan dokumen bergantung sepenuhnya kepada pelayar. Setiap daripada mereka mempunyai gaya mereka sendiri, yang telah digunakan untuk rawatan tag tertentu. Oleh itu, halaman yang kelihatan berbeza bergantung pada perintah itu di mana pelayar anda membukanya. Hasilnya - huru-hara, kekeliruan, masalah untuk pemaju.

Pada tahun 1994, Norway saintis Håkon Lie membangunkan lembaran gaya yang boleh digunakan untuk Penampilan halaman secara berasingan daripada HTML-dokumen. The priglanulas idea anggota W3C, yang segera keluar untuk siap. Beberapa tahun kemudian, beliau menerbitkan versi pertama spesifikasi CSS. Kemudian dia sentiasa bertambah baik, sedang dimuktamadkan ... Tetapi konsep kekal semua sama: setiap gaya menetapkan sifat-sifat tertentu.

Menggunakan jadual CSS sentiasa bermasalah. Sebagai contoh, pereka web sering mempunyai masalah dengan menyusun dan kumpulan ciri-ciri, dan pusaka tidak begitu mudah.

Dan kemudian datang 2000 itu. Tanda-tanda yang semakin mula melibatkan diri dalam profesional pemaju depan, yang adalah penting untuk gaya kerja yang fleksibel dan dinamik. Wujud pada penempatan masa menuntut awalan CSS dan menjejaki sokongan keupayaan baru pelayar. Kemudian, dengan JavaScript, dan pakar-pakar Ruby mendapat ke perniagaan, mewujudkan prapemproses a - struktur untuk CSS, ciri-ciri baru ditambah kepadanya.

CSS untuk Pemula: ciri-ciri prapemproses

Mereka mempunyai beberapa fungsi:

• menyatukan awalan pelayar dan khaki;

• memudahkan sintaks;

• memberi peluang untuk bekerja dengan pemilih bersarang tanpa kesilapan;

• meningkatkan logik gaya.

Secara ringkas: prapemproses menambah CSS keupayaan logik pengaturcaraan. Sekarang, gaya tidak dilakukan dalam senarai biasa gaya dan dengan beberapa teknik mudah dan pendekatan: pembolehubah, fungsi, hagfish, kitaran syarat. Di samping itu, keupayaan untuk menggunakan matematik.

Melihat populariti ini add-in, W3C telah mula beransur-ansur menambah kemungkinan mereka kod CSS. Sebagai contoh, dalam penentuan itu jadi fungsi calc (), yang disokong oleh ramai pelayar. Ia dijangka bahawa tidak lama lagi ia akan menjadi mungkin untuk menetapkan pembolehubah dan membuat hagfish a. Walau bagaimanapun, ini akan berlaku pada masa depan yang jauh, dan preprocessors telah tiba dan sudah bekerja dengan baik.

Popular preprocessors CSS. Sass

Direka pada tahun 2007. Asalnya sebuah Haml komponen - HTML template. Ciri-ciri baru untuk unsur-unsur CSS mengawal pemaju relished di Ruby on Rails, yang mula tersebar di mana-mana. The Sass yang besar ciri-ciri yang kini dimasukkan ke dalam mana-mana prapemproses: pembolehubah, menerapkan pemilih, hagfish (ketika itu, bagaimanapun, hujah ini tidak boleh ditambah).

Mengisytiharkan pembolehubah dalam Sass

Pembolehubah diisytiharkan dengan $ tanda. Mereka boleh mengekalkan sifat-sifat dan set mereka, sebagai contoh: "$ borderSolid: merah pepejal 1px;". Dalam contoh ini, kita mengisytiharkan pembolehubah yang dipanggil borderSolid dan disimpan berhargai merah 1px solid. Sekarang, jika dalam CSS kita perlu mewujudkan lebar sempadan merah 1px, hanya menunjukkan bahawa pemboleh ubah selepas nama hotel tersebut. Selepas pengumuman pembolehubah tidak boleh diubah. Terdapat beberapa fungsi terbina dalam. Sebagai contoh, mengisytiharkan pembolehubah dengan nilai sebanyak $ redcolor # FF5050. Sekarang, kod CSS di sifat dari setiap unsur, menggunakannya untuk menetapkan warna font: p {color: $ redColor; }. Adakah anda ingin bereksperimen dengan warna? Gunakan fungsi Gelapkan atau meringankan. Ini dilakukan supaya: p {warna: gelap ($ redColor, 20%); }. Hasilnya, redColor warna yang akan 20% lebih ringan.

The Sass banyak fungsi terbina dalam. Bernilai sekurang-kurangnya membaca mereka, tetapi lebih baik - untuk belajar.

bersarang

Sebelum ini, untuk menunjukkan bersarang terpaksa menggunakan reka bentuk yang panjang dan tidak selesa. Bayangkan kita mempunyai div, iaitu p, dan di dalamnya, seterusnya, menetapkan rentang. Untuk div, kita perlu untuk menetapkan warna font merah, untuk p - kuning, untuk rentang - merah jambu. Dalam CSS biasa ia akan dilakukan seperti berikut:

div {

warna: merah;

}

div p {

warna: kuning;

}

div p span {

warna: merah jambu;

}

Dengan CSS prapemproses semua menjadi lebih mudah dan lebih padat:

div {

warna: merah;

p {

warna: kuning;

.span {

warna: merah jambu;

}

}

}

Elements harfiah "melabur" satu sama lain.

arahan prapemproses

Menggunakan arahan @import boleh mengimport fail. Sebagai contoh, kita mempunyai fail fonts.sass yang mengisytiharkan gaya untuk fon. Menyambung kepada style.sass fail utama: 'font' @import. Selesai! Bukannya fail tunggal yang besar dengan gaya kita ada beberapa yang boleh digunakan untuk akses cepat dan mudah untuk hotel yang diperlukan.

hagfish

Salah satu daripada idea-idea yang paling menarik. Ia membolehkan satu baris untuk meminta satu set ciri-ciri. Beroperasi seperti berikut:

@mixin largeFont {

font-family: 'Times New Roman';

font-size: 64px;

line-height: 80px;

font-weight: bold;

}

Hagfish untuk memohon kepada elemen pada halaman, menggunakan @include arahan tersebut. Sebagai contoh, kita mahu memohon kepada header h1. Kami mempunyai struktur berikut: h1 {@include: largeFont; }

Semua sifat-sifat hagfish ditugaskan elemen h1.

prapemproses Kurang

Syntax Sass mengimbas kembali pengaturcaraan. Jika anda sedang mencari pilihan yang lebih sesuai untuk pemula belajar CSS, mencari Kurang. Ia telah dicipta pada tahun 2009. Ciri utama - sokongan untuk CSS sintaks native speakers, jadi tidak biasa dengan program Imposer ia akan lebih mudah untuk belajar.

Pembolehubah diisytiharkan menggunakan @ simbol. Sebagai contoh: @fontSize: 14px;. kerja-kerja bersarang pada prinsip yang sama seperti dalam Sass. Hagfish diumumkan seperti berikut: .largeFont () {font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; }. Untuk menyambungkan ia tidak perlu untuk menggunakan arahan prapemproses - hanya menambah hagfish yang baru diwujudkan dalam sifat-sifat unsur yang dipilih. Sebagai contoh: h1 {.largeFont; }.

stylus

Satu lagi prapemproses. Dicipta pada tahun 2011 oleh pengarang yang sama, yang memberikan dunia Jade, Express dan produk lain yang berguna itu.

Pembolehubah boleh diisytiharkan dalam dua cara - sama ada secara jelas atau tersirat. Sebagai contoh: font = 'Times New Roman'; - pilihan tersirat. Tetapi $ font = 'Times New Roman' - jelas. Hagfish diisytiharkan dan tersirat disambungkan. sintaksis adalah seperti berikut: redColor () warna merah. Sekarang kita boleh menambah item, contohnya: redColor h1 ();.

Stylus pada pandangan pertama, ia mungkin kelihatan tidak difahami. Di manakah "anak negeri" kurungan dan koma bertitik? Tetapi ia adalah perlu untuk terjun ke dalamnya, semua menjadi lebih jelas. Ingat, bagaimanapun, bahawa pembangunan jangka panjang prapemproses ini boleh "bercerai susu" anda menggunakan sintaks CSS klasik. Ini kadang-kadang menyebabkan masalah apabila perlu bekerja dengan gaya "tulen".

Apa prapemproses pilih?

Malah, ia adalah ... ia tidak mengapa. Semua versi menawarkan kira-kira ciri-ciri yang sama hanya sintaks setiap adalah berbeza. Kami mengesyorkan untuk teruskan seperti berikut:

• jika anda - programmer dan mahu bekerja dengan gaya kedua-dua kod, gunakan Sass;
• jika anda - alat sandi dan mahu bekerja dengan gaya seperti dengan susun atur konvensional, memberi perhatian kepada Kurang;
• jika anda suka minimalism, menggunakan stylus.

Untuk semua varian nombor tanpa henti perpustakaan menarik yang boleh lebih jauh memudahkan pembangunan. Pengguna Sass disyorkan untuk memberi perhatian kepada Compass - alat yang berkuasa dengan ciri-ciri terbina dalam. Sebagai contoh, selepas anda memasang ia anda tidak akan perlu bimbang tentang versi vendor awalan. Permudah bekerja dengan grid. Terdapat alat untuk bekerja dengan bunga, sprites. pelbagai A telah mengumumkan hagfish. Memberi alat ini beberapa hari - dengan itu anda akan menjimatkan banyak masa dan usaha pada masa hadapan.