Nilalaman
- Mga Bahagi
- Itapon ang iyong build system
- Isang nanginginig na pagsisimula
- Post-processing ang aming paraan sa labas ng problema
- Sa mitolohiya at muling pagbuo
- Isang pangwakas na salita
Inaabot sa akin na mayroon pa ring mga CSS purist na hindi naniniwala na kailangan nila ng isang CSS processor. Siguro isa ka sa kanila? Marahil ay nakuha mo nang sama-sama ang isang proseso na buong kasiyahan mo. O marahil ay nasa kabilang bahagi ka ng barya na iyon: gumagamit ka ng mga preprocessor ng CSS (tulad ng Sass o Stylus) at hindi mo kailangan ng mga variable ng CSS na naproseso ng katutubong / browser. Sa artikulong ito inaasahan kong i-debunk ang mga argumento para sa parehong partido.
Mga Bahagi
Kung dumadaan ka sa proseso ng pag-tema ng isang application, paglikha ng iyong sariling mga pasadyang sangkap, o kahit na gumagamit ng mga bahagi ng ibang tao, malamang na inaasahan mong mapasadya nang kaunti ang mga modyul na ito nang hindi kinakailangang baguhin ang orihinal na code.
Sabihin nating gumagamit ka ng isang grid system mula sa Bootstrap, ngunit ang taga-disenyo ay nagtrabaho ng bahagyang magkakaibang mga lapad ng kanal sa grid. Sa ngayon, mayroon kang halos tatlong pagpipilian:
- Baguhin ang Bootstrap CSS code (kaya gumagawa ng mga pag-upgrade sa hinaharap na malapit sa imposible nang walang makabuluhang pagtatasa)
- Kumbinsihin ang taga-disenyo na palitan ang parilya upang tumugma sa Bootstrap (o subukang bawasan ito sa kanila)
- Isama ang lahat ng hindi naprosesong Bootstrap Sass, isama ito sa iyong build system at idagdag ang iyong sariling pasadyang mga variable
Ang pangatlong pagpipilian, para sa marami, ay ang landas ng hindi bababa sa pagtutol - ngunit sa kahabaan ng paraan, ang iyong build system ay nagiging mas malaki, mabagal at mas nakasalalay sa buong koponan na nauunawaan ang lahat ng nangyayari. (Hoy, walang perpekto, tama ba?)
Itapon ang iyong build system
Ngayong naiintindihan natin nang medyo mas mahusay ang problema, maaari nating simulan na pag-usapan kung saan lumilitaw ang mga variable ng CSS. Una, tingnan natin ang CSS variable syntax:
: ugat {--gutter-width: 1rem; }
Dito ko tinukoy ang isang variable na pinangalanan lapad ng kanal at itakda ito sa 1rem. Mapapansin mo na ang tagapili na pinili kong gamitin ay : ugat na karaniwang katumbas ng 'HTML' (o ang root SVG node). Ginagamit ko ito upang maipakita ang isang napakahalagang aspeto ng mga variable ng CSS: ang kaskad. Oo, ang mga variable ay maaaring kaskad sa pamamagitan ng puno tulad ng mga pag-aari!
Kaya't kapag pumili ako ng isang elemento sa ibang lugar sa aking styleheet:
.my-module {margin-right: var (- gutter-width); }
Ang lapad ng kanal variable cascades pababa mula sa root element. Sabihin na nais kong sabunutan ang kanal sa isang partikular na lugar lamang? Madali!
.my-module {--gutter-width: .5rem; margin-kanan: var (- gutter-width); }
Bigla, hindi mo kailangan ng isang kumplikadong sistema ng pagbuo. Budburan lamang ang isang pares ng mga simpleng variable at ipasadya ang nilalaman ng iyong puso. Ang pagsasama-sama ng isang serye ng mga pagbabago ay mas madali pa kapag napagtanto mo na ang anumang browser na sumusuporta sa mga variable ay mayroon nang CSS calcul ng mahabang panahon:
: ugat {--gutter-width: .5rem; } .col {--column-width: 4rem; lapad: calc (var (- haligi-lapad) - var (- gutter-width))}
Sa halimbawa sa itaas, kinakalkula namin ang lapad ng .col tagapili sa pamamagitan ng pagbabawas lapad ng haligi.
Isang nanginginig na pagsisimula
Tulad ng maraming mga bagong tampok ng CSS, ang landas sa maipadala sa browser at mga gumagamit ay isang mahaba, iginuhit, nakakulong na proseso. Ang mga variable ng CSS ay walang pagbubukod - ang syntax ay nagbago nang husto ng maraming beses na, at, sa oras ng pagsulat, ganap na inalis ng Google Chrome ang tampok hanggang sa maayos ang lahat.
Ang Firefox 31 ay kasalukuyang nag-iisang browser na nagpapadala na may mga katutubong variable ng CSS. Ngunit magiging maayos ito. Sa artikulong ito, ipapakita ko sa iyo kung paano magsisimulang ngayon sa mga variable ng CSS.
Post-processing ang aming paraan sa labas ng problema
Sa maraming mga pagtanggi tungkol sa kung aling mga browser ang sumusuporta sa mga variable ng CSS, malamang na iniisip mo: "Mahusay, narito ang isang bagay na hindi ko magagamit sa loob ng limang taon." Bagaman hindi namin eksaktong eksaktong variable ng polyfill, makakagamit man lang kami ng mayroon nang tooling upang matulungan na magpanggap na ang mga variable ay ganap na sinusuportahan saanman.
Sa halip na umasa sa paggamit ng isang preprocessor (at samakatuwid ang syntax ng preprocessor para sa mga variable), maaari kaming subukan ang bago: isang post-processor. Ang isang post-processor ay naiiba mula sa isang preprocessor lamang sa pangalan. Ang mga post-processor ay hindi layunin na palawigin ang CSS: sa katunayan, ang ideya ay code ka na parang gumagamit ka ng mga pinakawalang pamantayang CSS (o gilid, sa kaso ng mga variable), at pupunan nito ang mga blangko.
Sa mitolohiya at muling pagbuo
Ang alamat (ni Ian Storm Taylor) ay isang post-processor na magkakasama sa isang serye ng mga plugin na pinapatakbo ng rework. Nagbibigay ito ng calc, variable, paghahalo ng kulay at mga preview ng vendor ng CSS browser (salamat sa hindi kapani-paniwala na proyekto ng autoprefixer).
: root {--column-width: 3rem; --column-gutter: .5rem; } .column {min-width: var (- haligi ng lapad); }
Bigla, maaari mong simulang magpanggap na ngayon ay 2019. Hindi na kailangang magtrabaho sa kung ano ang sinusuportahan sa bawat browser: isulat mo lang ang code nang isang beses.
Ang pagsisimula ay madali din, dahil ang Myth ay isang NPM package. Pagkatapos mong mai-install, kasing dali ng pagpapatakbo ng sumusunod sa command line:
mitolohiya futuristic.css matalino.css
Ngayon ang iyong file na clever.css ay handa na para sa browser.
Isang pangwakas na salita
Hindi lamang ako nasasabik tungkol sa hinaharap ng CSS ngunit lalo na rin akong nasasabik tungkol sa kung saan dadalhin ng mga variable ng CSS ang mga taga-disenyo at developer - sana, patungo sa isang mas simple, mas naiintindihan, mas magaan na kadena ng tool kung saan ang pagbabahagi ng code ay ganap na walang halaga!
Si Ben Schwarz ay isang independiyenteng taong masyadong maselan sa pananamit sa web mula sa Melbourne. Siya ay isang miyembro ng koponan ng CSSConfAU, JSConf at Bower. Ito ay isang pinalawak na bersyon ng isang artikulo mula sa net magazine na isyu 259.
