26.07.2017

5 labākie 2017. gada CSS priekšapstrādātāji, kas paātrinās jūsu darbplūsmu.

CSS priekšapstrādātāji ir īpaši izstrādāti, lai padarītu CSS programmētāju darbu jautrāku. Tie ļauj rakstīt kodu, kas ir viegli rediģējams, uzticams un atkārtoti lietojams.

Citiem vārdiem sakot, CSS priekšapstrādātājs ir CSS papildinājums ar jaunām funkcijām: mainīgajiem, paplašinājumiem, importēšanu un tā tālāk.

Šajā rakstā es runāšu par 5 labākajiem 2017. gada CSS priekšapstrādātājiem.

01. Sass

SASS ir vispopulārākais priekšprocesors ar milzīgu kopienu un jaudīgu funkcionalitāti. Tas darbojas tikai kopā ar Ruby, un to ir ļoti viegli iemācīties. Lielākā daļa priekšgala sistēmu, piemēram, Bootstrap, Foundation un materialize, tiek veidotas, izmantojot SASS.

SASS ir divas sintakses:

• .sass
• .scss

02. Irbulis

Stylus ir vēl viens lielisks priekšprocesors dinamiskai CSS ģenerēšanai. Ja vēlaties izlaist cirtainus lencēs, komatus un semikolus, tas varētu būt jums labākā izvēle. Stylus darbojas vietnē Node.js, un to ir ļoti viegli instalēt un lietot. Tam ir daudz pielāgotu funkciju, piemēram, piesātinājums (). Varat arī izmantot visas citu vadošo kompilatoru piedāvātās iespējas.

03. Mazāk

Less, kas pazīstams arī kā Less.js vai Less CSS, ir vēl viens vadošais CSS priekšapstrādātājs. Šī ir lieliska izvēle, ja jums ir nepieciešami standarta līdzekļi, piemēram, mainīgie, ligzdotie stili un tā tālāk. Šī Javascript bibliotēka sākotnēji tika rakstīta Ruby valodā.

• Lasi arī:

04.Stylecow

Stylecow ir node rakstīts priekšprocesors, ko var instalēt, izmantojot npm. Tam ir jaudīgs API, kas ļauj viegli izveidot spraudņus.

05. CSS-Crush

PHP iebūvēts priekšprocesors, kas kļūs lielisks variants PHP programmētājiem, jo ​​tas darbojas daudzās platformās. CSS-Crush ir visas parastās priekšprocesora funkcijas (mainīgie, ligzdotie stili utt.)

Secinājums

Ja jūs meklējat labākais css priekšprocesoru, tad internetā atradīsiet ļoti daudz dažādu iespēju. Pēc manām domām, labākās iespējas iesācējiem tie ir SASS un Stylus.

Pilnīgi visi pieredzējušie maketētāji izmanto priekšapstrādātājus. Nav izņēmumu. Ja vēlaties gūt panākumus šajā darbībā, neaizmirstiet par šīm programmām. No pirmā acu uzmetiena tie var izraisīt klusas šausmas iesācējam - tas ir pārāk līdzīgi programmēšanai! Patiesībā visas CSS priekšapstrādātāju iespējas var saprast aptuveni dienā, un, ja pamēģināsi, tad pāris stundās. Tie padarīs jūsu dzīvi daudz vieglāku nākotnē.

Kā radās CSS priekšapstrādātāji

Lai labāk izprastu šīs tehnoloģijas iespējas, īsi iedziļināsimies tīmekļa lapu vizuālās prezentācijas attīstības vēsturē.

Kad pirmo reizi sākās masveida interneta izmantošana, stila lapas nepastāvēja. Dokumentu izpilde bija atkarīga tikai no pārlūkprogrammām. Katram no tiem bija savi stili, kas tika izmantoti noteiktu tagu apstrādei. Attiecīgi lapas izskatījās savādāk atkarībā no pārlūkprogrammas, kurā tās atvērāt. Rezultāts ir haoss, apjukums un problēmas izstrādātājiem.

1994. gadā norvēģu zinātnieks Hokons Lī izstrādāja stila lapu, ko varētu izmantot dizainam izskats lapas atsevišķi no HTML dokumenta. Ideja piesaistīja W3C konsorcija pārstāvju uzmanību, kuri nekavējoties sāka to pilnveidot. Dažus gadus vēlāk tika izlaista pirmā CSS specifikācijas versija. Pēc tam to nemitīgi pilnveidoja un pilnveidoja... Bet koncepcija palika nemainīga: katram stilam tiek piešķirtas noteiktas īpašības.

Lietošana CSS tabulas vienmēr radīja dažas problēmas. Piemēram, maketētājiem bieži bija grūtības ar rekvizītu šķirošanu un grupēšanu, un ne viss ir tik vienkārši ar mantošanu.

Un tad pienāca divas tūkstošdaļas. Profesionālie priekšgala izstrādātāji arvien vairāk sāka nodarboties ar iezīmēšanu, kuriem elastība un dinamisks darbs ar stiliem. CSS, kas tajā laikā pastāvēja, prasīja prefiksu un izsekošanas atbalstu jaunām pārlūkprogrammas funkcijām. Pēc tam JavaScript un Ruby eksperti ķērās pie lietas, izveidojot priekšapstrādātājus — CSS pievienojumprogrammas, kas tam pievieno jaunas funkcijas.

CSS iesācējiem: priekšapstrādātāju funkcijas

Viņi veic vairākas funkcijas:

• apvienot pārlūkprogrammas prefiksus un uzlauzumus;

• vienkāršot sintaksi;

• ļauj bez kļūdām strādāt ar ligzdotiem atlasītājiem;

• uzlabot stila loģiku.

Īsāk sakot: priekšprocesors pievieno CSS iespējām programmēšanas loģiku. Tagad stils tiek veikts nevis ar ierasto stilu uzskaitījumu, bet gan izmantojot vairākas vienkāršas tehnikas un pieejas: mainīgos, funkcijas, miksus, cilpas, nosacījumus. Turklāt radās iespēja izmantot matemātiku.

Redzot šādu papildinājumu popularitāti, W3C sāka pakāpeniski pievienot funkcijas no tiem CSS kodā. Piemēram, šādi specifikācijā parādījās funkcija calc(), ko atbalsta daudzas pārlūkprogrammas. Paredzams, ka drīzumā būs iespējams iestatīt mainīgos un izveidot miksus. Tomēr tas notiks tālā nākotnē, un priekšapstrādātāji jau ir šeit un jau darbojas nevainojami.

Populāri CSS priekšapstrādātāji. Sass

Izstrādāts 2007. gadā. Sākotnēji tā bija HTML veidņu dzinēja Haml sastāvdaļa. Jaunas pārvaldības iespējas CSS elementi Ruby on Rails izstrādātājiem tas patika un viņi sāka to izplatīt visur. Sass ieviesa milzīgu skaitu funkciju, kas tagad ir iekļautas jebkurā priekšapstrādātājā: mainīgie, atlasītāju ligzdošana, mixins (toreiz tiem nevarēja pievienot argumentus).

Mainīgo deklarēšana Sass

Mainīgie tiek deklarēti, izmantojot zīmi $. Tajos varat saglabāt rekvizītus un to kopas, piemēram: “$borderSolid: 1px solid red;”. Šajā piemērā mēs deklarējām mainīgo ar nosaukumu borderSolid un saglabājām tajā vērtību 1px solid red. Tagad, ja CSS mums ir jāizveido sarkana apmale 1 pikseļu platumā, mēs vienkārši norādām šo mainīgo pēc rekvizīta nosaukuma. Kad mainīgie ir deklarēti, tos nevar mainīt. Ir pieejamas vairākas iebūvētās funkcijas. Piemēram, deklarēsim $redColor mainīgo ar vērtību #FF5050. Tagad CSS kodā, kāda elementa īpašībās, mēs to izmantojam, lai iestatītu fonta krāsu: p ( krāsa: $redColor; ). Vai vēlaties eksperimentēt ar krāsu? Izmantojiet tumšākas vai gaišākas funkcijas. Tas tiek darīts šādi: p ( krāsa: tumšāka ($sarkana krāsa, 20%); ). Rezultātā redColor kļūs par 20% gaišāks.

Ligzdošana

Iepriekš, lai norādītu uz ligzdošanu, bija jāizmanto garas un neērtas konstrukcijas. Iedomāsimies, ka mums ir div, kas satur p, un tas savukārt satur span. Attiecībā uz div mums ir jāiestata sarkana fonta krāsa, p - dzeltens, bet span - rozā. Parastā CSS tas tiktu darīts šādi:

Ar CSS priekšprocesora palīdzību viss tiek padarīts vienkāršāks un kompaktāks:

Elementi burtiski ir “ligzdoti” viens otrā.

Priekšapstrādātāju direktīvas

Varat importēt failus, izmantojot @import direktīvu. Piemēram, mums ir fails fonts.sass, kas deklarē fontu stilus. Mēs to iekļaujam galvenajā style.sass failā: @import ‘fonts’. Gatavs! Viena vietā liels fails ar stiliem mums ir vairāki, kurus var izmantot, lai ātri un ērti piekļūtu nepieciešamajām īpašībām.

Hagfish

Viena no interesantākajām idejām. Ļauj vienā rindā iestatīt veselu rekvizītu kopu. Tie darbojas šādi:

@mixin largeFont (

fontu ģimene: "Times" Jaunais romietis’;

fonta izmērs: 64 pikseļi;

līnijas augstums: 80 pikseļi;

fonta svars: treknrakstā;

Lai lietotu sajaukšanu lapas elementam, izmantojiet direktīvu @include. Piemēram, mēs vēlamies to lietot h1 galvenē. Rezultāts ir šāda konstrukcija: h1 ( @include: largeFont; )

Visi mixin rekvizīti tiks piešķirti elementam h1.

Priekšapstrādātājs mazāk

Sass sintakse atgādina programmēšanu. Ja meklējat iespēju, kas ir piemērotāka iesācējiem CSS apguvējiem, skatiet sadaļu Less. Tas tika izveidots 2009. galvenā iezīme- vietējais atbalsts, lai izkārtotājiem, kas nepārzina programmēšanu, būtu vieglāk to apgūt.

Mainīgie tiek deklarēti, izmantojot simbolu @. Piemēram: @fontSize: 14px;. Ligzdošana darbojas pēc tādiem pašiem principiem kā Sass. Sajaukumi tiek deklarēti šādi: .largeFont() (fontu saime: 'Times New Roman'; fonta izmērs: 64 pikseļi; līnijas augstums: 80 pikseļi; fonta svars: treknrakstā; ). Lai izveidotu savienojumu, jums nav jāizmanto priekšapstrādātāja direktīvas - vienkārši pievienojiet atlasītā elementa īpašībām tikko izveidots mixin. Piemēram: h1 ( .largeFont; ).

Irbulis

Vēl viens priekšapstrādātājs. 2011. gadā radījis tas pats autors, kurš pasaulei dāvināja Jade, Express un citus noderīgus produktus.

Mainīgos var deklarēt divos veidos - tieši vai netieši. Piemēram: font = 'Times New Roman'; - tas ir netiešs variants. Bet $font = "Times New Roman" ir nepārprotams. Miksīni tiek deklarēti un iekļauti netieši. Sintakse ir: redColor() krāsa sarkana. Tagad mēs varam pievienot to elementam, piemēram: h1 redColor();.

No pirmā acu uzmetiena Stylus var šķist mulsinošs. Kur ir “vietējās” iekavas un semikoli? Bet, tiklīdz tajā ienirt, viss kļūst daudz skaidrāks. Tomēr ņemiet vērā, ka ilgtermiņa izstrāde ar šo priekšapstrādātāju var neļaut jums izmantot klasisko CSS sintakse. Tas dažreiz rada problēmas, ja jums ir nepieciešams strādāt ar "tīriem" stiliem.

Kuru priekšapstrādātāju izvēlēties?

Tas tiešām... nav svarīgi. Visas opcijas nodrošina aptuveni vienādas iespējas, tikai katrai ir atšķirīga sintakse. Mēs iesakām veikt šādas darbības:

• ja esat programmētājs un vēlaties strādāt ar stiliem kā kodu, izmantojiet Sass;
• ja esat maketētājs un vēlaties strādāt ar stiliem tāpat kā ar parasto izkārtojumu, pievērsiet uzmanību Mazāk;
• ja jums patīk minimālisms, izmantojiet Stylus.

Visām iespējām ir pieejams liels skaits interesantu bibliotēku, kas var vēl vairāk vienkāršot izstrādi. Sass lietotājiem ieteicams apskatīt Compass - spēcīgs instruments ar daudzām iebūvētām funkcijām. Piemēram, pēc tā instalēšanas jums nekad nebūs jāuztraucas par pārdevēja prefiksiem. Atvieglo darbu ar sietiem. Ir utilītas darbam ar krāsām un spraitiem. Ir pieejami vairāki jau izziņoti miksīni. Veltiet šim produktam pāris dienas - tādējādi jūs nākotnē ietaupīsit daudz pūļu un laika.

Vai jums ir kādi jautājumi?

Dizainera izkārtojuma ieviešana nav iespējama bez HTML un CSS izmantošanas. Ja iezīmēšanas valoda ļauj mums ieskicēt nepieciešamo elementu veidni, tad CSS pārveido šo veidni pareizais tips, tāpat kā avotā. Šķiet, ka ar tīra CSS palīdzību jūs varat izveidot lapu tādu, kādu to vēlas klients.

Tomēr, ja kāds atver jūsu vienoto CSS failu un mēģina kaut ko izmainīt, vai esat pārliecināts, ka kods būs lasāms, rediģējams, strukturēts un saprotams? Ja jūsu projekts ir milzīgs ar daudzām daļām, vai esat pārliecināts, ka varēsiet to viegli atbalstīt nākotnē? Ja izmantojat CSS priekšapstrādātāju, tad atbilde ir jā, un turklāt tas ir veids, kā automatizēt vietnes izkārtojumu. Kāpēc? Mēs to tagad uzzināsim.

Kas ir CSS priekšprocesors?

Manuprāt, tas ir standarta CSS papildinājums, kas tiek paplašināts standarta funkcijas, pievieno dažas funkcionalitātes un ļauj rakstīt lasāmāku un viegli saprotamu kodu. Pie izejas avots apkopo mums ierastajā CSS. Šāda rīka izmantošana mūsdienu izstrādē ir “must have”, un es iesaku ikvienam maketētājam vai izstrādātājam ar to iepazīties. Jāpiebilst, ka ir no kā izvēlēties, jo CSS priekšapstrādātāju ir diezgan daudz, taču jāizceļ populārākie:

• Irbulis

Visiem iepriekšminētajiem priekšprocesoriem ir gandrīz identiska funkcionalitāte, ir tikai nelielas sintakses atšķirības. Tagad atgriezīsimies pie iepriekš uzdotā jautājuma: kādas priekšrocības mums sniedz priekšapstrādātāji, lai padarītu mūsu kodu ērtāku un apkopjamāku? Tas, pirmkārt, ir ligzdošana. Šī funkcija dod mums iespēju strukturēt elementus, viegli atrast elementa vecāku, ātri rakstīt pseidoklases un pseidoelementus un pat izmantot BEM! Piemēram:
.trase
krāsa: #fff
&__nosaukums
polsterējums: 10 pikseļi
&:virziet kursoru, &:fokusu
krāsa: zila

Apskatiet šo Sass valodā rakstīto koda fragmentu. Tas viss izpaužas šādā CSS:

Trase (krāsa: #FFF;)
.track__title (polsterējums: 10 pikseļi;)
.track__title:hover, .track-title:focus ( krāsa: zila)

Lakonisks, ērts, saprotams, struktūra no vecākiem līdz bērnam ir lieliska, vai ne? Otra un ne mazāk svarīga priekšrocība ir mainīgie. To darbības princips ir ārkārtīgi vienkāršs: mainīgā nosaukums sākas ar simbolu $ un pēc tam pats nosaukums. Mēs rakstām vērtību caur kolu — tā var būt krāsa jebkurā ērtā formā, atkāpes vērtības, platums, fonta lielums utt. Rezultātā mēs iegūsim kaut ko līdzīgu:

$btn-krāsa: zila;
$font-main-size: 16 pikseļi;

Un lietojums izskatīsies šādi:

Bloķēt (
fonta izmērs: $font-main-size;
}

Iedomājieties, cik tas ir ērti. Ja jums ir jāmaina pogu krāsa visā vietnē, tad jums tas jādara tikai vienuviet! Nu, ejam tālāk. Trešā un lielākā lieta, ko mums var piedāvāt CSS priekšapstrādātāji, ir mixins izmantošana. Mūsu parastajā izpratnē mixins ir funkcijas, kuras var izmantot vairākas reizes, neatkārtojot vienas un tās pašas koda daļas (atcerieties vienu no programmēšanas principiem - DRY - Neatkārtojiet sevi). Ja godīgi, es nelietoju mixinus ļoti bieži, acīmredzot nebija tādas steidzamas vajadzības, bet es tomēr parādīšu dažus piemērus. Viena no visbiežāk izmantotajām funkcijām ir šāda:

@function em($pixels, $context: $browser-context) (
@if (unitless($pixels)) (
$pikseļi: $pixels * 1px;
}
@if (unitless($context)) (
$konteksts: $konteksts * 1px;
}
@return $pikseļi / $konteksts * 1em;
}

Un tā pielietojums ir šāds:

ķermenis (
fonta izmērs: em(14px);
}

Jā, kā jūs saprotat, šī ir tikai fonta lieluma konvertēšana no PX uz Em (lai dzīvo tie laiki, kad tik sīkumiem izmantojāt specpakalpojumus vai paši rēķinājāt pēc kalkulatora). Šis piemērs arī ietaupa daudz laika:

@mixin ievades vietturis (
&.placeholder ( @content; )
&:-moz-placeholder ( @content; )
&::-moz-placeholder ( @content; )
&:-ms-input-placeholder ( @content; )
&::-webkit-input-placeholder ( @content; )
}

Tās lietojumi:

ievade, teksta apgabals (
@include ievades vietturis (
krāsa: $pelēka;
}
}

Var sniegt daudz vairāk piemēru, tomēr ir vērts sākt lietot mixins pats, lai saprastu, kā to izdarīt noderīgs rīks. Iespējams, ir vēl viens iemesls, kas liks jums iemīlēt CSS priekšapstrādātājus, un tā nosaukums ir modularitāte. Ir 2018. gads, un modularitāte ir visur — no HTML veidņu dzinējiem līdz dažādiem CSS ietvariem un projektu veidotājiem.