Mengenali stylus

Jika anda seorang pemaju front-end, anda mungkin pernah mendengar stylus, saudara jauh sass, sedikit diketahui. Seperti Sass, Stylus juga merupakan preprocessor CSS yang ditulis dalam Node.js. Menurut pangkalan kod githubnya, ia memanggilnya:

[...] bahasa baru revolusioner yang menyediakan cara yang cekap, dinamik dan ekspresif untuk menghasilkan CSS.

baik, "revolusioner" mungkin sedikit dibesar -besarkan. Tetapi segala -galanya adalah benar.

mata utama

Stylus adalah preprocessor CSS yang ditulis dalam node.js, dengan sintaks yang lebih longgar daripada alat yang sama seperti SASS. Ia membolehkan kurungan pilihan, kolon, dan titik koma, dan menyokong sintaks lekukan dan gaya CSS biasa.
Stylus menyokong penggunaan pembolehubah, fungsi, dan campuran untuk membawa CSS lebih dekat ke bahasa pengaturcaraan yang benar. Ia juga mempunyai fungsi carian nilai atribut dan boleh mengeluarkan atribut secara syarat berdasarkan sama ada atribut telah ditakrifkan.
Walaupun stylus sangat fleksibel, menggunakan stylus memerlukan pematuhan dengan peraturan sintaks untuk mengelakkan kekeliruan. Ia boleh dipasang menggunakan Node.js dan NPM dan disusun menjadi CSS menggunakan perintah stylus. Stylus juga mempunyai rangka kerja sendiri, NIB, yang menyediakan pembantu tambahan dan sokongan silang penyemak imbas untuk Mixin.

apa yang lain? !

Sedikit menyukainya. Tetapi Stylus bukan perkara baru. Ia telah wujud sejak awal tahun 2011, tetapi saya fikir ia mempunyai komuniti yang sangat rendah. Dengan cara ini, adakah anda tahu bahawa reka bentuk semula rangkaian pemaju Mozilla terkini dilakukan dengan stylus? David Walsh, yang terlibat dalam projek itu, juga menulis tentang bagaimana untuk memulakan dengan Stylus.

Jadi, apakah kelebihan stylus berbanding SASS? Nah, ia dibina dengan node.js, yang pada pendapat saya adalah kelebihan. Walaupun ia benar-benar OK untuk menggunakan SASS dalam aliran kerja nod kerana pembalut Libsass node-sass, ini tidak bermakna bahawa libsass ditulis sepenuhnya dalam nod.

Di samping itu, Stylus mempunyai sintaks yang sangat longgar, yang boleh menjadi baik atau buruk, bergantung kepada projek, pasukan, dan kecenderungan anda untuk berpegang pada norma pengekodan yang ketat. Saya fikir selagi anda tidak memasukkan terlalu banyak logik dalam lembaran styleshe dan lakukan pemeriksaan kod sebelum menghantar kod, sintaks longgar harus baik -baik saja.

semua dalam semua, kedua -dua stylus dan sass menyokong hampir ciri -ciri yang sama; Stylus juga menyokong pelbagai sintaks, walaupun sempadannya sangat kabur daripada sass: anda boleh gaya hampir dengan cara yang anda mahukan (indent, gaya CSS), dan boleh dicampur dan dipadankan dalam stylesheet yang sama (parser ini mesti sangat menarik).

Jadi apa pendapat anda? Mahu mencubanya?

pemula

Seperti yang disebutkan, stylus ditulis dalam node.js, jadi kita boleh memasangnya seperti pakej NPM lain:

<code>$ npm install stylus -g</code>

dari sana, anda boleh memasukkannya ke dalam aliran kerja nod anda menggunakan API JavaScript atau gunakan baris arahan yang boleh dilaksanakan untuk menyusun lembaran styleshe anda. Untuk kesederhanaan, kami akan menggunakan alat baris komando stylus, tetapi anda boleh melakukannya dari skrip nod, gulp, atau mengerang seperti yang anda suka.

<code>stylus ./stylesheets/ --out ./public/css</code>

Perintah sebelumnya memberitahu Stylus untuk menyusun semua stylesheets stylus (.styl) dari folder stylesheets dan menghasilkannya dalam folder awam/CSS. Sudah tentu, anda juga boleh memantau perubahan dalam direktori:

<code>stylus --watch ./stylesheets/ --out ./public/css</code>

Menulis Stylus Style

Jika anda baru mula belajar dan tidak mahu dibanjiri oleh sintaks baru, ketahui bahawa anda boleh menulis CSS tulen dalam fail .styl anda. Oleh kerana Stylus menyokong sintaks CSS standard, ia benar -benar baik untuk menggunakan kod CSS dan kemudian perlahan -lahan meningkatkannya.

sintaks asas

Mengenai tatabahasa itu sendiri, hampir semuanya adalah pilihan. Pendakap: Mengapa bersusah payah? Sofilolon: Lupakannya! COLON: Buang juga. Kurungan: Tolong. Berikut adalah kod stylus yang sah sepenuhnya:

<code>.foo
.bar
  color tomato
  background deepskyblue</code>

Ia agak mengganggu pada mulanya, tetapi kita boleh membiasakannya, terutamanya jika terdapat sintaks yang menonjol. Seperti yang anda mungkin fikirkan, kod terdahulu disusun kepada:

<code>.foo, .bar {
  color: tomato;
  background: deepskyblue;
}</code>

Variable

Fungsi yang paling biasa dari preprocessor CSS mestilah keupayaan untuk menentukan pembolehubah. Ia tidak menghairankan bahawa Stylus menawarkannya juga. Walaupun bertentangan dengan sass, mereka diisytiharkan dengan tanda yang sama (=) bukannya kolon (:). Di samping itu, tanda dolar terkemuka ($) adalah pilihan dan boleh dihilangkan dengan selamat.

<code>// 定义 `text-font-stack` 变量
text-font-stack = 'Helvetica', 'Arial', sans-serif;

// 将其用作 `font` 属性的一部分
body
  font 125% / 1.5 text-font-stack</code>

Stylus kini melakukan sesuatu yang sass atau mana -mana preprocessor lain: carian nilai harta. Katakan anda mahu memohon margin kiri negatif yang sama dengan separuh lebar;

<code>.foo
  width 400px
  position absolute
  left 50%
  margin-left (@width / 2)</code>

Dengan menggunakan @width, kami memberitahu Stylus untuk mendapatkan nilai atribut lebar blok semasa, merawatnya sebagai pembolehubah. Sangat pandai! Satu lagi kes penggunaan yang menarik adalah untuk mengatasi atribut output berdasarkan sama ada atribut telah ditakrifkan:

<code>.foo
  // ... 其他样式
  z-index: 1 unless @z-index</code>

Dalam kes ini, z-indeks akan ditetapkan kepada 1 kecuali .foo telah memberikan nilai kepada atribut Z-indeks. Gunakannya bersempena dengan Mixin dan anda benar -benar mempunyai sesuatu.

Mixin

Bercakap tentang ini, mari kita tentukan mixin kerana ia mungkin salah satu ciri yang paling popular di Sass! Mixin dalam stylus tidak memerlukan kata kunci tertentu;

<code>size(width, height = width)
  width width
  height height</code>

Begitu juga, termasuk mixin tidak memerlukan sintaks tertentu seperti @include atau sebagainya:

<code>.foo
  size(100px)</code>

anda juga boleh mengeluarkan kurungan jika anda mahu, dalam hal ini kelihatan seperti anda menggunakan harta CSS yang benar -benar standard (tetapi tidak). Mekanisme ini dipanggil

mixin telus kerana kemasukan mereka tidak dapat dilihat.

<code>.foo
  size 100px</code>

Ini mungkin kelihatan seperti helah yang tidak perlu pada pandangan pertama, tetapi jika anda memikirkannya dengan teliti, ciri ini sebenarnya membolehkan pengarang memperluaskan sintaks CSS lalai. Pertimbangkan mixin limpahan berikut:

<code>$ npm install stylus -g</code>

Jika nilai yang diberikan adalah ellipsis, ia mencetak tiga deklarasi yang terkenal yang diperlukan untuk mendapatkan limpahan ellipsis tunggal. Jika tidak, ia akan mencetak nilai yang diberikan. Berikut adalah cara menggunakannya:

<code>stylus ./stylesheets/ --out ./public/css</code>

ia akan menghasilkan:

<code>stylus --watch ./stylesheets/ --out ./public/css</code>

Anda mesti mengakui bahawa ini adalah helah yang sangat sejuk. Walaupun ia boleh mengelirukan (dan boleh berbahaya), dapat memperluaskan sifat CSS standard dengan nilai tambahan sebenarnya merupakan konsep yang menarik.

Jika anda ingin lulus beberapa kandungan ke Mixin dengan cara @content, ia boleh dilakukan dengan pembolehubah {blok}. Semasa kemasukan, anda hanya perlu menambah sebelum nama Mixin untuk lulus kandungan tambahan.

<code>.foo
.bar
  color tomato
  background deepskyblue</code>

Kod ini akan disusun sebagai:

<code>.foo, .bar {
  color: tomato;
  background: deepskyblue;
}</code>

Ciri terakhir yang sangat menarik dari Stylus Mixin: mereka sentiasa mempunyai argumen pembolehubah tempatan yang mengandungi semua parameter yang diluluskan ke mixin apabila dimasukkan (jika ada). Sebagai contoh, anda boleh menggunakan [..] untuk memanipulasi pembolehubah ini seperti yang anda lakukan dalam JavaScript untuk mendapatkan nilai pada indeks tertentu.

Pemikiran Akhir

Melalui semua ciri dan tip sintaks stylus akan terlalu verbose, dan saya fikir kami sudah mempunyai pengenalan yang baik, sekurang -kurangnya cukup untuk memulakan pembelajaran!

Seperti yang anda lihat, stylus sangat longgar. Daripada semua pembantu penulisan CSS yang sedia ada, Stylus pastinya alat yang paling dekat untuk membawa CSS ke bahasa pengaturcaraan yang benar.

Perhatikan bahawa Stylus juga mempunyai rangka kerja sendiri, sama seperti Sass memiliki Kompas, ia dipanggil NIB. NIB adalah kotak alat yang menyediakan stylus dengan pembantu tambahan dan sokongan silang penyemak imbas untuk Mixin.

Sesetengah orang mungkin menyukainya, sesetengah orang mungkin tidak. Nasihat saya adalah dengan tegas mematuhi tatabahasa. Ia tidak selalunya mudah untuk menangani sintaks yang longgar. Bagaimanapun, senang melihat beberapa pesaing Sass yang baik.

Soalan Lazim Mengenai Stylus (Soalan Lazim)

Apakah perbezaan utama antara stylus dan preprocessors CSS yang lain?

Stylus adalah bahasa gaya dinamik yang kuat dan fleksibel. Tidak seperti preprocessors CSS lain seperti SASS dan kurang, Stylus membolehkan penggunaan pilihan kurungan, kolon, dan titik koma, menjadikannya lebih fleksibel dan kurang ketat. Ia juga menyokong sintaks indentasi dan gaya CSS biasa, memberikan pemaju kebebasan yang lebih besar ketika menulis kod. Di samping itu, stylus menyokong mixin telus, yang bermaksud anda boleh memanggil mixins tanpa menggunakan mana -mana sintaks khas.

bagaimana memasang stylus?

stylus boleh dipasang menggunakan Node.js dan NPM (Pengurus Pakej Node). Pertama, anda perlu memasang Node.js dan NPM pada komputer anda. Selepas pemasangan selesai, anda boleh memasang stylus secara global dengan menjalankan perintah NPM memasang sylus -g dalam terminal atau command prompt. Ini akan membolehkan anda menggunakan stylus dari mana -mana direktori pada komputer anda.

Bagaimana untuk menyusun stylus ke CSS?

Selepas menulis kod stylus, anda boleh menyusunnya ke CSS menggunakan perintah stylus di terminal atau command prompt. Sebagai contoh, jika fail stylus anda dinamakan style.styl, anda harus menjalankan perintah stylus -c style.styl. Ini akan membuat fail CSS bernama Style.css dalam direktori yang sama.

Bolehkah saya menggunakan pembolehubah dalam stylus?

Ya, Stylus menyokong penggunaan pembolehubah. Anda boleh menentukan pembolehubah dengan memberikan nilai kepada nama. Sebagai contoh, saiz font = 14px. Anda kemudian boleh menggunakan pembolehubah ini di tempat lain dalam kod anda dengan merujuk namanya, seperti SO: P {Font-Size: Font-Size;

Adakah fungsi sokongan stylus dan mixin?

Ya, Stylus menyokong fungsi dan mixin. Fungsi dalam stylus ditakrifkan menggunakan kata kunci DEF dan boleh digunakan untuk melakukan pengiraan atau beroperasi pada nilai. Sebaliknya, Mixin adalah blok kod yang boleh diguna semula yang boleh dimasukkan dalam set peraturan lain.

Bagaimana menggunakan pernyataan bersyarat dalam stylus?

Stylus menyokong pernyataan bersyarat menggunakan IF, lain jika dan kata kunci lain. Ini boleh digunakan untuk menggunakan gaya yang berbeza berdasarkan keadaan tertentu. Sebagai contoh, anda boleh menggunakan pernyataan bersyarat untuk menggunakan saiz fon yang berbeza mengikut saiz skrin.

Bolehkah saya mengimport fail stylus lain?

Ya, Stylus membolehkan anda mengimport fail stylus lain menggunakan arahan @import. Ini berguna untuk menganjurkan kod tersebut ke dalam fail berasingan dan menggunakan semula kod dalam pelbagai helaian gaya.

Adakah gelung sokongan stylus?

Ya, Stylus menyokong dan semasa gelung. Ini boleh digunakan untuk menghasilkan peraturan CSS pendua atau senarai dan tatasusunan.

Bolehkah saya menggunakan stylus dengan node.js?

Ya, stylus boleh digunakan dengan node.js. Malah, stylus dibina di atas node.js dan boleh dipasang menggunakan NPM (Pengurus Pakej Node). Anda juga boleh menggunakan Stylus dengan Express, rangka kerja aplikasi web yang popular untuk Node.js.

Bagaimana cara debug stylus code?

Stylus menyediakan bendera -debug yang boleh digunakan untuk mengeluarkan maklumat debugging. Ini berguna untuk menjejaki kesilapan atau memahami bagaimana kod anda dikendalikan. Di samping itu, anda boleh menggunakan fungsi pemeriksaan () dalam stylus untuk mengeluarkan nilai pembolehubah atau ungkapan.

Atas ialah kandungan terperinci Mengenali stylus. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!