Memanfaatkan kekuatan sebenarnya dari praprosesor CSS adalah sebuah petualangan. Ada banyak sekali bahasa, sintaksis, dan fungsi, semuanya siap digunakan sekarang.

Pada artikel ini, kita akan melihat berbagai fitur dan manfaat menggunakan tiga praprosesor berbeda: Sass, LESS, dan Stylus.

Praprosesor CSS3 adalah bahasa yang ditulis dengan tujuan menambahkan fitur keren dan inventif ke CSS tanpa merusak kompatibilitas browser. Mereka melakukan ini dengan mengkompilasi kode yang kita tulis ke dalam CSS biasa yang dapat digunakan di browser apa pun sejak zaman batu. Ada ribuan fitur yang dihadirkan oleh praprosesor, dan dalam artikel ini kita akan melihat beberapa fitur yang dipublikasikan dan beberapa yang tidak dipublikasikan. Mari kita mulai.

Bagian terpenting dalam menulis kode dalam praprosesor CSS adalah memahami sintaksisnya. Beruntung bagi kami, sintaksnya (atau bisa saja) identik dengan CSS biasa untuk ketiga praprosesor.

Sass dan LESS menggunakan sintaks CSS standar. Hal ini memudahkan untuk mengubah file CSS yang ada menjadi praprosesor. Sass menggunakan ekstensi .scss dan LESS menggunakan ekstensi .less. File dasar Sass atau LESS dapat dikonfigurasi seperti ini:

/* style.scss atau style.less */
jam1 (
warna: #0982C1;
}

Seperti yang mungkin Anda ketahui, ini hanyalah CSS biasa yang dapat dikompilasi dengan baik di Sass dan LESS.

Penting untuk dicatat bahwa Sass juga memiliki sintaksis lama yang melewatkan titik koma dan kurung kurawal. Meskipun ini masih ada, ini sudah tidak digunakan lagi dan kami tidak akan menggunakannya dalam contoh ini. Sintaksnya menggunakan ekstensi .sass dan terlihat seperti ini:

/* style.sass */
h1
warna: #0982c1

Sintaks untuk Stylus jauh lebih bertele-tele. Dengan menggunakan ekstensi file .styl, Stylus menerima sintaks CSS standar, tetapi juga menerima beberapa variasi lain di mana tanda kurung, titik dua, dan titik koma bersifat opsional. Misalnya:

/* gaya.gaya */
jam1 (
warna: #0982C1;
}
/* hilangkan tanda kurung */
h1
warna: #0982C1;
/* hilangkan titik dua dan titik koma */
h1
warna #0982C1

Menggunakan variasi berbeda dalam stylesheet yang sama juga dapat diterima, sehingga variasi berikut akan dikompilasi tanpa kesalahan.

H1 (
warna #0982c1
}
h2
ukuran font: 1.2em

Variabel dapat dideklarasikan dan digunakan di seluruh style sheet. Mereka bisa mempunyai arti apa saja nilai CSS(seperti warna, angka [termasuk unit], atau teks.) dan semuanya dapat direferensikan di mana saja di style sheet kita.

Variabel Sass ditambahkan dengan karakter $, dan nilai serta nama dipisahkan dengan titik koma, seperti properti CSS.

$warna utama: #0982c1;
$lebar situs: 1024 piksel;
$borderStyle: bertitik;
tubuh (
warna: $warna utama;
batas: 1 piksel $borderStyle $warna utama;
lebar maksimal: $lebar situs;
}

Variabel LESS sama persis dengan variabel Sass, hanya saja nama variabelnya diberi simbol @.

@warna utama: #0982c1;
@lebar situs: 1024 piksel;
@borderStyle: putus-putus;
tubuh (
warna: @mainColor;
batas: 1px @borderStyle @mainColor;
lebar maksimal: @siteWidth;
}

Variabel stylus tidak perlu ditambahkan, meskipun memungkinkan penggunaan simbol $. Seperti biasa, titik koma akhir tidak diperlukan, namun ada tanda sama dengan antara nilai dan variabel. Perlu dicatat bahwa Stylus (0.22.4) dikompilasi jika kita menambahkan simbol @ ke nama variabel, tetapi tidak menerapkan nilai tersebut saat referensi. Dengan kata lain, jangan lakukan itu.

Warna Utama = #0982c1
lebar situs = 1024 piksel
$borderStyle = bertitik
tubuh
warna utamaWarna
perbatasan 1px $borderStyle mainColor
lebar situs max-width

Masing-masing file di atas akan dikompilasi dengan CSS yang sama. Anda dapat menggunakan imajinasi Anda untuk melihat betapa bergunanya variabel. Kita tidak lagi harus mengubah satu warna dan mengulanginya dua puluh kali, atau ingin mengubah lebar situs kita dan harus mencari-cari untuk menemukannya. Berikut ini CSS setelah kompilasi:

Tubuh (
warna: #0982c1;
batas: 1 piksel bertitik #0982c1;
lebar maksimal: 1024 piksel;
}

Jika kita perlu mereferensikan beberapa elemen dengan induk yang sama di CSS kita, akan membosankan jika terus menulis induknya berulang kali.

Bagian (
margin: 10 piksel;
}
bagian navigasi (
tinggi: 25 piksel;
}
bagian navigasi a (
warna: #0982C1;
}
bagian navigasi a:hover (
dekorasi teks: garis bawah;
}

Sebagai gantinya, dengan menggunakan praprosesor, kita dapat menulis pemilih anak di dalam tanda kurung induk. Selain itu, & menunjukkan pemilih induk.

Ketiga praprosesor memiliki sintaks yang sama untuk penyeleksi bersarang.

Bagian (
margin: 10 piksel;
navigasi(
tinggi: 25 piksel;
A (
warna: #0982C1;
&: arahkan kursor (
dekorasi teks: garis bawah;
}
}
}
}

Ini adalah CSS yang dikompilasi dari kode di atas. Ini persis sama seperti saat kami memulainya - betapa nyamannya!

Bagian (
margin: 10 piksel;
}
bagian navigasi (
tinggi: 25 piksel;
}
bagian navigasi a (
warna: #0982C1;
}
bagian navigasi a:hover (
dekorasi teks: garis bawah;
}

Mixin adalah fungsi yang memungkinkan kita menggunakan kembali properti di stylesheet kita. Daripada menelusuri seluruh stylesheet dan mengubah properti berkali-kali, sekarang kita cukup mengubahnya di dalam mixin. Ini bisa sangat berguna untuk gaya elemen dan awalan vendor tertentu. Ketika mixin dipanggil dari pemilih CSS, argumen mixin dikenali dan gaya dalam mixin diterapkan ke pemilih.

Semua praprosesor membuat kode yang sama:

Kesalahan umum (
bantalan: 20 piksel;
margin: 4 piksel;
batas: 2px padat #f00;
warna: #f00;
}
.kesalahan masuk(
kiri: 12 piksel;
posisi: mutlak;
atas: 20 piksel;
batas: 5px padat #f00;
warna: #f00;
}

Saat menulis CSS dengan cara lama, kita bisa menggunakan kode berikut untuk menerapkan gaya yang sama ke beberapa elemen secara bersamaan:

P,
jalan,
oh (
/* gaya di sini */
}

Ini berfungsi dengan baik, tetapi jika kita perlu menata elemen lebih jauh satu per satu, pemilih yang berbeda harus dibuat untuk masing-masing elemen, dan elemen ini dapat dengan cepat menjadi lebih berantakan dan sulit dipertahankan. Untuk mengatasinya, Anda bisa menggunakan warisan. Warisan adalah kemampuan orang lain Pemilih CSS mewarisi properti pemilih lain.

LESS tidak terlalu mendukung pewarisan gaya seperti Sass dan Stylus. Daripada menambahkan beberapa penyeleksi ke satu set properti, ia memperlakukan pewarisan sebagai campuran tanpa argumen dan mengimpor gaya ke dalam penyeleksinya sendiri. Kelemahannya adalah properti tersebut diulangi dalam stylesheet yang Anda kompilasi. Inilah cara Anda mengaturnya:

Memblokir (
margin: 10 piksel 5 piksel;
bantalan: 2 piksel;
}
P(
.memblokir; /* Mewarisi gaya dari ".block" */
batas: 1 piksel padat #EEE;
}
ul, ol (
.memblokir; /* Mewarisi gaya dari ".block" */
warna: #333;
transformasi teks: huruf besar;
}

Seperti yang Anda lihat, gaya dari .block telah dimasukkan ke dalam penyeleksi yang ingin kami wariskan. Penting untuk diingat bahwa prioritas dapat menjadi masalah di sini, jadi berhati-hatilah.

Dalam komunitas CSS, mengimpor CSS tidak disukai karena memerlukan banyak permintaan HTTP. Namun, cara mengimpor dengan praprosesor bekerja secara berbeda. Jika Anda mengimpor file dari salah satu dari tiga praprosesor, impor tersebut akan disertakan pada waktu kompilasi, sehingga hanya menghasilkan satu file. Ingatlah bahwa mengimpor file .css reguler akan dikompilasi dengan @import "file.css" secara default; kode. Selain itu, mixin dan variabel dapat diimpor dan digunakan di stylesheet utama Anda. Impor menciptakan kreasi file terpisah sangat berguna bagi organisasi.

Fungsi warna dibangun ke dalam fungsi yang mengubah warna pada waktu kompilasi. Ini bisa sangat berguna untuk membuat gradien, lebih banyak lagi warna gelap bimbingan dan masih banyak lagi.

Ini hanyalah daftar singkat fungsi warna yang tersedia di Sass, daftar lengkap fungsi warna Sass yang tersedia dapat ditemukan dengan membaca dokumentasi Sass.

Fungsi warna dapat digunakan dimana saja warna digunakan. Berikut ini contohnya:

$warna: #0982C1;
jam1 (
latar belakang: $warna;
batas: 3px gelap pekat($warna, 50%);
}

Daftar semua fungsi LESS dapat ditemukan dengan membaca Dokumentasi LESS.

Berikut adalah contoh penggunaan fungsi warna di LESS:

@warna: #0982C1;
jam1 (
latar belakang: @warna;
batas: 3px gelap pekat(@warna, 50%);
}

Daftar lengkap semua fitur warna Stylus dapat ditemukan dengan membaca dokumentasi Stylus.

Berikut contoh penggunaan fitur warna Stylus:

Warna = #0982C1
h1
warna latar belakang
batas 3px gelap pekat (warna, 50%)

Mengerjakan matematika dengan CSS cukup berguna dan sekarang sepenuhnya mungkin. Sederhana saja, dan inilah cara melakukannya:

Kami telah membahas banyak fungsi dan kemampuan baru yang dapat dilakukan oleh praprosesor, tetapi kami belum membahas sesuatu yang praktis atau praktis. Di Sini daftar pendek aplikasi dunia nyata di mana penggunaan praprosesor adalah penyelamat.

Ini adalah salah satu alasan untuk menggunakan praprosesor dan untuk alasan yang sangat bagus - ini menghemat banyak waktu dan tenaga. Membuat mixin untuk menangani awalan vendor mudah dan menghemat banyak pengulangan dan pengeditan yang menyakitkan. Berikut cara melakukannya:

Memalsukan teks 3D menggunakan beberapa bayangan teks adalah ide yang cerdas. Satu-satunya masalah adalah mengubah warna setelah kejadian itu sulit dan tidak praktis. Dengan menggunakan mixin dan fungsi warna, kita dapat membuat teks 3D dan mengubah warna dengan cepat!

Saya memutuskan untuk menulis bayangan teks Stylus dalam satu baris karena saya menghilangkan tanda kurung kurawal.

Menggunakan operasi numerik dan variabel pada kolom adalah ide yang saya temukan saat pertama kali bermain dengan praprosesor CSS. Dengan mendeklarasikan lebar yang diinginkan dalam sebuah variabel, kita dapat dengan mudah mengubahnya tanpa harus menghitung secara mental. Begini cara melakukannya:

Ada beberapa kekhasan dalam menggunakan praprosesor CSS. Saya akan membuat daftar beberapa yang menyenangkan, tetapi jika Anda benar-benar tertarik untuk menemukan semuanya, saya sarankan Anda menelusuri dokumentasinya, atau lebih baik lagi, mulai menggunakan praprosesor dalam pengkodean harian Anda.

Jika Anda telah menulis CSS untuk jangka waktu yang cukup lama, saya yakin Anda telah mencapai titik di mana Anda membuat kesalahan di suatu tempat dan Anda tidak dapat menemukannya. Jika Anda seperti saya, Anda mungkin menghabiskan waktu sepanjang hari dan mengomentari berbagai hal untuk memburu bug tersebut.

Praprosesor CSS melaporkan kesalahan. Sederhana saja. Jika ada yang salah dengan kode Anda, ia akan memberi tahu Anda di mana, dan jika Anda beruntung: alasannya. Anda dapat melihat postingan blog ini jika Anda tertarik untuk mengetahui bagaimana kesalahan dilaporkan di berbagai praprosesor.

Benar-benar semua desainer tata letak berpengalaman menggunakan praprosesor. Tidak ada pengecualian. Jika Anda ingin sukses dalam kegiatan ini, jangan lupakan program-program ini. Pada pandangan pertama, mereka dapat menyebabkan kengerian bagi pemula - ini terlalu mirip dengan pemrograman! Faktanya, Anda dapat memahami semua kemampuan praprosesor CSS dalam waktu sekitar satu hari, dan jika Anda mencobanya, maka dalam beberapa jam. Mereka akan membuat hidup Anda lebih mudah di masa depan.

Untuk lebih memahami fitur-fitur teknologi ini, mari selami secara singkat sejarah perkembangan presentasi visual halaman web.

Ketika penggunaan Internet secara massal pertama kali dimulai, belum ada style sheet. Eksekusi dokumen hanya bergantung pada browser. Masing-masing memiliki gayanya sendiri yang digunakan untuk menangani tag tertentu. Oleh karena itu, halaman-halaman tersebut terlihat berbeda tergantung pada browser mana Anda membukanya. Hasilnya adalah kekacauan, kebingungan, dan masalah bagi pengembang.

Pada tahun 1994, ilmuwan Norwegia Haakon Lie mengembangkan style sheet yang dapat digunakan untuk mendesain penampilan halaman terpisah dari dokumen HTML. Ide tersebut menarik perhatian perwakilan konsorsium W3C yang segera mulai menyempurnakannya. Beberapa tahun kemudian, versi pertama spesifikasi CSS dirilis. Kemudian terus ditingkatkan dan disempurnakan... Namun konsepnya tetap sama: setiap gaya diberikan properti tertentu.

Penggunaan tabel CSS selalu disebabkan masalah tertentu. Misalnya, perancang tata letak sering kali mengalami kesulitan dalam menyortir dan mengelompokkan properti, dan tidak semuanya sesederhana itu dengan pewarisan.

Dan kemudian datanglah dua per seribu. Pengembang front-end profesional semakin mulai terlibat dalam markup, yang menganggap penting pekerjaan yang fleksibel dan dinamis dengan gaya. CSS yang ada pada saat itu memerlukan dukungan awalan dan pelacakan untuk fitur browser baru. Kemudian pakar JavaScript dan Ruby mulai berbisnis, menciptakan praprosesor - add-on untuk CSS yang menambahkan fitur baru ke dalamnya.

Mereka melakukan beberapa fungsi:

• menyatukan awalan dan peretasan browser;

• menyederhanakan sintaksis;

• memungkinkan untuk bekerja dengan penyeleksi bersarang tanpa kesalahan;

• meningkatkan logika gaya.

Singkatnya: praprosesor menambah fitur CSS logika pemrograman. Sekarang penataan gaya dilakukan bukan dengan pencacahan gaya biasa, tetapi dengan menggunakan beberapa gaya teknik sederhana dan pendekatan: variabel, fungsi, mixin, loop, kondisi. Selain itu, menjadi mungkin untuk menggunakan matematika.

Melihat popularitas add-on tersebut, W3C mulai secara bertahap menambahkan fitur-fitur dari add-on tersebut ke dalam kode CSS. Misalnya, fungsi calc() muncul dalam spesifikasi, yang didukung oleh banyak browser. Diharapkan dalam waktu dekat akan dimungkinkan untuk mengatur variabel dan membuat mixin. Namun, hal ini akan terjadi di masa depan yang jauh, dan praprosesor sudah ada dan berfungsi dengan sempurna.

Dikembangkan pada tahun 2007. Awalnya itu adalah komponen Haml, mesin template HTML. Opsi manajemen baru elemen CSS Pengembang Ruby on Rails menyukainya dan mulai mendistribusikannya ke mana-mana. Muncul di Sass jumlah yang sangat besar fitur-fitur yang sekarang disertakan dalam praprosesor apa pun: variabel, penyeleksi bersarang, mixin (namun pada saat itu, tidak mungkin menambahkan argumen ke dalamnya).

Variabel dideklarasikan dengan menggunakan tanda $. Anda dapat menyimpan properti dan kumpulannya di dalamnya, misalnya: “$borderSolid: 1px solid red;”. Dalam contoh ini, kita mendeklarasikan variabel bernama borderSolid dan menyimpan nilai 1px berwarna merah solid di dalamnya. Sekarang, jika di CSS kita perlu membuat batas merah selebar 1 piksel, kita cukup menentukan variabel ini setelah nama properti. Setelah dideklarasikan, variabel tidak dapat diubah. Beberapa fungsi bawaan tersedia. Sebagai contoh, mari kita mendeklarasikan variabel $redColor dengan nilai #FF5050. Sekarang dalam kode CSS, di properti beberapa elemen, kita menggunakannya untuk mengatur warna font: p ( color: $redColor; ). Ingin bereksperimen dengan warna? Gunakan fungsi menggelapkan atau mencerahkan. Ini dilakukan seperti ini: p ( color: darken($redColor, 20%); ). Hasilnya, warna merah akan menjadi 20% lebih terang.

Sebelumnya, untuk menunjukkan sarang, Anda harus menggunakan konstruksi yang panjang dan canggung. Mari kita bayangkan bahwa kita memiliki div yang berisi p, dan pada gilirannya, berisi span. Untuk div kita perlu mengatur warna font menjadi merah, untuk p - kuning, untuk span - pink. Dalam CSS biasa ini akan dilakukan seperti ini:

Dengan bantuan praprosesor CSS, semuanya menjadi lebih sederhana dan ringkas:

Elemen secara harfiah “bersarang” satu sama lain.

Anda dapat mengimpor file menggunakan direktif @import. Misalnya, kita mempunyai file font.sass, yang mendeklarasikan gaya untuk font. Kami memasukkannya ke dalam file style.sass utama: @import 'fonts'. Siap! Alih-alih satu file besar dengan gaya kami memiliki beberapa yang dapat digunakan dengan cepat dan akses mudah ke properti yang diperlukan.

Salah satu ide paling menarik. Memungkinkan untuk menyetel seluruh rangkaian properti dalam satu baris. Mereka bekerja sebagai berikut:

@mixin font besar (

font-family: 'Times New Roman';

ukuran font: 64 piksel;

tinggi garis: 80px;

berat font: tebal;

Untuk menerapkan mixin ke elemen pada halaman, gunakan direktif @include. Misalnya kita ingin menerapkannya pada header h1. Hasilnya adalah konstruksi berikut: h1 ( @include: largeFont; )

Semua properti dari mixin akan ditetapkan ke elemen h1.

Sintaks Sass mengingatkan pada pemrograman. Jika Anda mencari opsi yang lebih cocok untuk pelajar CSS pemula, lihat Less. Itu dibuat pada tahun 2009. Fitur utama- Dukungan asli sehingga akan memudahkan desainer tata letak yang tidak terbiasa dengan pemrograman untuk menguasainya.

Variabel dideklarasikan dengan menggunakan simbol @. Misalnya: @fontSize: 14px;. Nesting bekerja dengan prinsip yang sama seperti di Sass. Mixin dideklarasikan sebagai berikut: .largeFont() ( font-family: 'Times New Roman'; font-size: 64px; line-height: 80px; font-weight: bold; ). Untuk terhubung, Anda tidak perlu menggunakan arahan praprosesor - cukup tambahkan mixin yang baru dibuat ke properti elemen yang dipilih. Misalnya: h1 ( .largeFont; ).

Praprosesor lainnya. Dibuat pada tahun 2011 oleh penulis yang sama yang memberikan dunia Jade, Express, dan produk bermanfaat lainnya.

Variabel dapat dideklarasikan dengan dua cara - secara eksplisit atau implisit. Misalnya: font = 'Times New Roman'; - ini adalah opsi implisit. Tapi $font = 'Times New Roman' eksplisit. Mixin dideklarasikan dan disertakan secara implisit. Sintaksnya adalah: redColor() warna merah. Sekarang kita bisa menambahkannya ke elemen, misalnya: h1 warna merah();.

Sekilas, Stylus mungkin tampak membingungkan. Di manakah tanda kurung dan titik koma “asli”? Namun begitu Anda menyelaminya, segalanya menjadi lebih jelas. Namun, perlu diingat bahwa pengembangan jangka panjang dengan praprosesor ini mungkin membuat Anda lupa menggunakan sintaksis CSS klasik. Hal ini terkadang menyebabkan masalah ketika Anda perlu bekerja dengan gaya “murni”.

Itu sungguh... tidak masalah. Semua opsi memberikan kemampuan yang kurang lebih sama, hanya sintaksnya yang berbeda untuk masing-masing opsi. Kami merekomendasikan melakukan hal berikut:

• jika Anda seorang programmer dan ingin bekerja dengan gaya sebagai kode, gunakan Sass;
• jika Anda seorang desainer tata letak dan ingin bekerja dengan gaya seperti tata letak biasa, perhatikan Less;
• jika Anda suka minimalis, gunakan Stylus.

Untuk semua opsi, tersedia sejumlah besar perpustakaan menarik yang dapat lebih menyederhanakan pengembangan. Pengguna Sass disarankan untuk melihat Kompas - alat yang ampuh dengan banyak fitur bawaan. Misalnya, setelah menginstalnya, Anda tidak perlu khawatir tentang awalan vendor. Membuat bekerja dengan jerat lebih mudah. Ada utilitas untuk bekerja dengan warna dan sprite. Sejumlah mixin yang sudah diumumkan telah tersedia. Dedikasikan beberapa hari untuk produk ini - dengan demikian Anda akan menghemat banyak tenaga dan waktu di masa depan.

Hari ini saya ingin berbicara tentang mengapa dan bagaimana kami menggunakan praprosesor Stylus dalam pengembangan Yandex.Mail, dan juga menjelaskan metode yang kami gunakan untuk bekerja dengan gaya untuk IE. Sangat mudah untuk diimplementasikan menggunakan praprosesor dan membuat dukungan IE menjadi sederhana dan nyaman. Kami telah mengembangkan perpustakaan khusus untuk ini, yang juga akan kami bagikan - if-ie.styl.

Ini hanyalah artikel pertama dari serangkaian artikel tentang penggunaan praprosesor Stylus di Yandex.Mail, yang sedang kami persiapkan untuk dipublikasikan.

Selain itu, sudah memiliki lebih dari tiga puluh tema desain. Ada tema dengan latar belakang terang dan gelap, ada tema yang berbeda satu sama lain hanya dalam warna, dan ada pula yang hampir seluruh antarmukanya dicetak dari plastisin dengan tangan (http://habrahabr.ru/ perusahaan/yandex/blog/110556/ ). Beberapa topik hanya memiliki satu gambar latar belakang, dan di tempat lain, latar belakang dapat berubah - secara acak atau bergantung pada waktu dan cuaca.

Karena semua ini, banyak variasi dalam presentasi visual antarmuka muncul, yang memaksa kita untuk melakukan pendekatan proses pengembangan sedikit berbeda dan mencari alat yang lebih cocok untuk memecahkan masalah.

Saat kami pertama kali meluncurkan antarmuka neo2, kami memilih solusi yang familiar bagi kami - mesin template Template Toolkit 2, dengan skenario yang agak non-standar dalam menggunakannya untuk menghasilkan CSS, bukan HTML. Awalnya kami hanya membutuhkan variabel, namun lama kelamaan topiknya menjadi lebih kompleks, dan pada akhirnya ternyata alat seperti itu merepotkan. Sintaks yang rumit, kurangnya fungsi khusus fungsi CSS dan perasaan umum menggunakan alat ini untuk tujuan lain membuat kami mencari opsi lain. Kami menyadari bahwa kami tidak dapat melakukannya tanpa praprosesor.

Stylus memiliki banyak hal berguna lainnya, tetapi hal-hal yang disebutkan di ataslah yang membuat kami memilihnya.

Tentunya selain kelebihan, Stylus juga memiliki kekurangan. Dan yang utama adalah sintaksis yang fleksibel - penulis praprosesor menganggapnya sebagai keunggulan utamanya. Untuk mencapai fleksibilitas, mereka sepenuhnya hanya mengimplementasikan sintaks berdasarkan lekukan, sementara opsi "a la CSS" entah bagaimana disekrup di atas, dan tidak mungkin untuk mengambil dan mengganti nama .css menjadi .styl - tidak semua CSS opsi penulisan akan berfungsi dan di Stylus. Namun kami memutuskan bahwa kemampuan yang diberikan praprosesor ini membuat kekurangannya tidak terlalu signifikan, jadi kami harus menerima beberapa ketidakteraturan parser (dan mulai menggunakan sintaksis berbasis indentasi).

Menyimpulkan cerita tentang pilihan tersebut, perlu dicatat bahwa Sass dan Stylus adalah dua opsi yang hampir setara. Masing-masing memiliki kelebihan dan fitur unik, serta kekurangannya sendiri. Jika Anda sudah menggunakan salah satu preprocessor ini dan puas dengan semuanya, bagus, Anda tidak perlu berpikir untuk mencari yang baru. Namun jika Anda baru mendekati pilihan atau merasa kewalahan dengan preprocessor yang Anda gunakan, coba bandingkan semua opsi. Cara terbaik Untuk melakukan ini, coba setiap praprosesor untuk tugasnya masing-masing. Setelah mengembangkan sebagian proyek Anda pada masing-masing praprosesor, Anda akan memahami kemampuan mana yang penting bagi Anda dan mana yang tidak. Namun jangan lupa bahwa praprosesor bukan hanya sintaksis yang berbeda, namun juga pendekatan yang berbeda: dengan desain ulang seperti itu, Anda dapat sekaligus memfaktorkan ulang kode, melakukan sesuatu yang lebih optimal dibandingkan dengan CSS sederhana.

Namun, kami perlu memberi tahu Anda tentang fungsi lain yang ternyata sangat berguna bagi kami dalam kerangka tematisasi Yandex.Mail. Ini adalah fungsi rgba-ie. Faktanya, fungsi ini bisa saja disebut rgba , tetapi Stylus memiliki bug: fungsi yang didefinisikan di JS tidak dapat ditimpa dengan cara yang sama seperti yang didefinisikan di Stylus, jadi kami harus membuat yang baru.

Apa yang dia lakukan? IE lama tidak mendukung nilai warna yang ditentukan dalam format RGBA. Oleh karena itu, biasanya pengembang menentukan warna yang sesuai dua kali - pertama untuk IE lama dalam format hex biasa, dan kemudian untuk semua browser normal dalam rgba yang diinginkan - atau menggunakan modernizr dan, menggunakannya dan kelas .rgba, atur warna yang sesuai di mana diperlukan. Namun untuk fallback di IE, setiap kali kita masih harus menghitung perkiraan warna yang akan kita turunkan. Paling sering ini adalah warna yang diinginkan yang dihamparkan di atas latar belakang halaman atau latar belakang elemen tengah, dengan warna rgba diterapkan di atasnya.

Fungsi rgba-ie dari if-ie.styl sangat menyederhanakan tugas ini: dengan menduplikasi kemampuan fungsi rgba biasa, kita mendapatkan parameter opsional lain yang dapat diteruskan ke fungsi tersebut - warna latar belakang untuk fallback. Secara default, parameter ini disetel ke #FFF .

Contoh sederhana:

Warna foo: rgba-ie(0,0,0,0.5)

DI DALAM browser biasa warna ini akan menjadi rgba(0,0,0,0.5) biasa, tetapi di IE akan berubah menjadi #808080 - yaitu, warna yang sesuai dilapis di atas putih.

Lagi contoh yang kompleks, dengan latar belakang target sebagai argumen terakhir (dan menggunakan salah satu fitur Stylus - kemampuan untuk menentukan warna hex alih-alih tiga digit r , g dan b):

Latar belakang foo: rgba-ie(#FFDE00, .42, #19C261)

Dalam contoh ini, untuk browser normal warnanya adalah rgba(255,222,0,0.42) , tetapi IE akan mendapatkan #7ace38 yang benar.

Pada saat yang sama, dimungkinkan untuk menyetel fallback default menggunakan variabel $default_rgba_fallback.

Hasilnya, Anda dapat sangat menyederhanakan hidup Anda jika Anda menggunakan fungsi rgba-ie daripada fungsi rgba biasa - dalam hal ini Anda hampir tidak perlu mengingat tentang IE.

Tag:

Jika Anda bagian dari dunia Front-End, Anda mungkin pernah mendengar tentang Stylus, sepupu jauh dari bahasa praprosesor Sass yang tidak diketahui oleh siapa pun. Seperti Sass, Slylus adalah praprosesor CSS yang ditulis di Node.js. Menurut layanan web GitHub, ia mendefinisikan dirinya sebagai:

[…] revolusioner bahasa baru, yang menyediakan cara yang efisien, dinamis, dan ekspresif untuk membuat CSS.

Katakanlah penggunaan kata "revolusioner" sedikit berlebihan di sini. Tapi segalanya benar. "Apa? Satu lagi?” - Anda bertanya. “Semacam,” jawabku. Namun Stylus bukanlah bahasa baru sama sekali. Ini memulai keberadaannya sekitar awal tahun 2011, namun, seperti yang saya perhatikan, pendapat tentangnya cukup berbeda-beda. Ngomong-ngomong, tahukah Anda bahwa perubahan terbaru pada Jaringan Pengembang Mozilla dilakukan menggunakan Stylus? David Walsh, yang mengerjakan proyek ini, juga menulis tentang cara memulai dengan Stylus.

Lalu apa kelebihan Stylus dibandingkan Sass? Pertama, ini dikembangkan berdasarkan Node.sj, yang merupakan nilai tambah bagi saya pribadi. Meskipun sangat bagus bahwa Anda dapat menggunakan Sass dalam alur kerja Node berkat pembungkus Sass untuk LibSass, hal yang sama tidak berlaku untuk LibSass yang ditulis dalam Node.

Selain itu, Slylus memiliki sintaks yang sangat fleksibel, yang bisa baik atau buruk tergantung pada proyek, tim, dan kecenderungan untuk mematuhi prinsip pengkodean yang ketat. Saya pikir sintaksis yang dapat ditempa adalah hal yang baik, selama Anda tidak memasukkan terlalu banyak logika ke dalam stylesheet, dan memasukkan kode sebelum melakukannya.

Secara umum, Stylus dan Sass mendukung banyak fitur yang sama; Anda dapat melihat daftar lengkap fitur Stylus, tetapi jangan mengharapkan sesuatu yang inovatif (walaupun ada beberapa fitur lanjutan di sana). Slylus juga mendukung banyak fitur sintaksis, meskipun garis besarnya jauh lebih kabur dibandingkan di Sass: Anda dapat menulis dalam gaya yang berbeda sesuka Anda (diindentasi, bergaya CSS) dan Anda dapat memadupadankan dalam satu gaya (parser untuk ini pasti menyenangkan untuk ditulis).

Jadi bagaimana menurut Anda? Ingin mencobanya?

Mari kita mulai

Seperti disebutkan sebelumnya, Slylus ditulis dalam Node.js sehingga kita dapat menginstalnya seperti paket npm lainnya:

$ npm pasang stilus -g

Dari sana, Anda dapat menghubungkannya ke pekerja Node menggunakan API JavaScript, atau Anda dapat menggunakan baris perintah yang dapat dieksekusi untuk membuat style sheet. Demi kesederhanaan, kami akan menggunakan alat ini baris perintah Stylus, tapi silakan meminjamnya dari skrip Node, Gulp atau Grunt

stylus ./stylesheet/ --out ./public/css

Perintah sebelumnya memberitahu Stylus untuk mengumpulkan semua gaya Stylus (.styl) dari folder stylesheets dan mengumpulkannya di folder public/css. Tentu saja, Anda juga dapat melihat direktori jika ingin melakukan perubahan:

stylus --watch ./stylesheet/ --out ./public/css

Gaya penulisan di Stylus

Jika Anda baru memulai dan tidak ingin membebani diri Anda dengan sintaksis baru, ketahuilah bahwa Anda bisa menulis css sederhana di file .styl. Karena Stylus mendukung sintaks CSS standar, Anda dapat memulai dengan kode CSS, hanya untuk memperkuatnya sedikit.

Sintaks dasar

Adapun sintaksnya sendiri, hampir semuanya opsional. Kawat gigi keriting: mengapa repot-repot? Titik dua: ayolah! Koma: ya, siapa yang membutuhkannya! Tanda kurung: tolong. Di bawah ini idealnya kode yang benar stilus:

Foo .bar warna latar belakang tomat deepskyblue

Sekilas merupakan pelanggaran, tetapi kita akan terbiasa, terutama bila penanda sintaksis tersedia. Seperti yang mungkin Anda duga, kode sebelumnya dikompilasi menjadi:

Foo, .bar ( warna: tomat; latar belakang: deepskyblue; )

Variabel

Fungsi yang paling umum digunakan dari praprosesor CSS harus dapat mendefinisikan variabel. Tidak mengherankan jika Slylus juga menawarkan ini. Meskipun tidak seperti Sass, mereka dinyatakan dengan tanda sama dengan (=) dan bukan titik dua (:). Selain itu, tanda dolar ($) bersifat opsional dan dapat dihilangkan dengan aman.

//Mendefinisikan variabel `text-font-stack` text-font-stack = "Helvetica", "Arial", sans-serif; // Gunakan sebagai bagian dari properti `font` body font 125% / 1.5 text-font-stack

Sekarang ada sesuatu yang dilakukan Stylus yang tidak dilakukan Sass atau praprosesor lainnya: mencari nilai sebuah properti. Katakanlah Anda ingin menerapkan margin kiri negatif setengah lebar; di Sass Anda harus menyimpan lebar dalam sebuah variabel, tetapi tidak di Stylus:

Saat menggunakan @width, kami memberi tahu Stylus untuk mendapatkan nilai lebar

properti dari blok saat ini, memperlakukannya sebagai variabel. Cukup sederhana! Kasus penggunaan menarik lainnya adalah menampilkan properti bergantung pada apakah properti tersebut telah ditentukan sebelumnya:

Foo // ... gaya lain z-index: 1 kecuali @z-index

Dalam hal ini, indeks-z akan memiliki nilai 1, kecuali .foo sudah memilikinya menetapkan nilai untuk properti indeks-z. Dipasangkan dengan mixin, ini akan menjadi langkah yang kuat.

Campuran

Omong-omong, mari kita definisikan apa itu mixin, karena ini mungkin salah satu fitur Sass yang paling populer! Pencampuran Stylus tidak memerlukan yang spesifik kata kunci; disebut mixin jika ada tanda kurung (kosong atau tidak) di akhir namanya.

Ukuran(lebar, tinggi = lebar) lebar lebar tinggi tinggi

Sama seperti pada kasus pertama, untuk memasukkan mixin, Anda tidak memerlukan sintaks khusus, seperti @include atau +:

Ukuran foo (100 piksel)

Anda bahkan dapat menghilangkan tanda kurung jika mau, sehingga akan terlihat seperti Anda sepenuhnya menggunakan properti CSS standar (belum). Mekanisme ini disebut pengotor transparan, karena inklusinya tidak terlihat.

Ukuran foo 100px

Sekilas ini mungkin tampak seperti gimmick yang tidak perlu, tetapi fitur ini sebenarnya memungkinkan penulis untuk memperluas sintaks CSS standar. Pertimbangkan mixin overflow berikut:

Meluap(nilai) jika nilai == elipsis spasi putih nowrap meluap teks-melimpah elipsis yang lain meluap: nilai

Jika nilai yang diberikan adalah elipsis, ia akan mencetak triplet deklarasi terkenal yang diperlukan agar satu baris dipenuhi dengan elipsis. Jika tidak, itu akan mencetak nilai yang diberikan. Inilah cara Anda menggunakannya:

Elipsis luapan foo

Dan ini akan memberikan:

Foo ( spasi putih: nowrap; overflow: tersembunyi; text-overflow: ellipsis; )

Harus Anda akui, ini adalah trik yang cukup keren. Meski bisa membingungkan (dan mungkin berbahaya); dapat memperluas properti CSS standar dengan arti tambahan sebenarnya sebuah konsep yang menarik.

Jika Anda ingin meneruskan beberapa konten ke mixin, gaya @content, itu mungkin melalui variabel (blok). Selama penyertaan, Anda hanya perlu mengawali nama mixin dengan tanda + untuk memberikan konten tambahan.

Has-js() html.js & (block).foo +has-js() warna merah

Kode ini dikompilasi ke:

Html.js .foo ( warna: #f00; )

Yang terakhir dan sangat fitur menarik Mixin stylus: Mereka selalu memiliki variabel argumen lokal yang berisi semua argumen (jika ada) yang diteruskan ke mixin ketika disertakan di sana. Variabel ini dapat dimanipulasi dan diperlakukan seperti array, misalnya untuk mengambil nilai pada indeks tertentu menggunakan kombinasi [..] seperti pada JavaScript.

Dan sebagai kesimpulan...

Mempelajari semua fitur dan trik sintaksis dari Stylus akan memakan waktu terlalu lama, dan menurut saya kita telah melakukan pengenalan yang layak, setidaknya cukup untuk membantu kita memulai!

Seperti yang Anda lihat, Stylus sangat fleksibel. Dari semua alat di luar sana yang dapat membantu Anda menulis CSS, Stylus adalah satu-satunya yang membawa CSS lebih dekat ke bahasa pemrograman sebenarnya.

Perhatikan bahwa Stylus juga memiliki kerangkanya sendiri, sama seperti Sass memiliki Kompas, dan disebut Nib. Nib adalah alat yang memberikan pembantu tambahan dan dukungan lintas-browser untuk mixin Stylus.

Beberapa orang mungkin menyukainya dan beberapa orang mungkin tidak. Meskipun saran saya adalah sangat ketat dengan sintaksisnya. Bekerja dengan sintaksis yang toleran seperti itu mungkin tidak selalu menyenangkan. Apa pun yang terjadi, senang melihat persaingan yang sehat untuk Sass.