Pse na duhen parapërpunuesit CSS dhe përfitimet e tyre. Fillimi i thjeshtë i paraprocesorit LESS

Artikulli NetTuts+ i shkruar nga Johnathan Croom në 2012.

Qëllimi kryesor i artikullit është të tregojë avantazhin e përdorimit të cilitdo prej tre paraprocesorëve të përshkruar në të Sass, LESS dhe Stylus. Rishikimi është i përsosur për fillestarët që sapo po zbulojnë këtë aspekt të dizajnit të uebit.

Në këtë artikull, ne do të shohim avantazhet dhe përfitimet e përdorimit të tre paraprocesorëve të ndryshëm - Sass, LESS dhe Stylus.

Prezantimi

Paraprocesorët CSS u krijuan me qëllimin e vetëm për të shtuar fuqi dhe fleksibilitet në fletët e stilit CSS pa kompromentuar përputhshmërinë e ndër-shfletuesve. Të gjithë paraprocesorët përpilojnë kodin e krijuar duke përdorur sintaksën e tyre në kodin standard CSS që çdo shfletues e kupton dhe e përdor, pavarësisht se sa i vjetër është ( shfletuesi) nuk ishte.

Ka shumë përfitime që paraprocesorët sjellin në fletët e stilit CSS, dhe në këtë artikull do të shohim vetëm disa prej tyre, të njohura dhe më pak të zakonshme. Le të fillojmë me rishikimin.

Sintaksë

Pjesa më e rëndësishme kur shkruani kodin në çdo paraprocesor CSS është sintaksa e tij. Për fatin tonë, sintaksa e të tre paraprocesorëve që do të shikojmë është e ngjashme me CSS.

Sass & LESS

Të dy paraprocesorët Sass dhe LESS kanë sintaksë standarde CSS. Kjo e bën detyrën e konvertimit të kodit para-ekzistues CSS në sintaksën e secilit prej këtyre paraprocesorëve të shpejtë dhe të lehtë. Sass përdor ekstensionin për skedarët e tij

Pamja e një skedari të rregullt në sintaksë Sass ose LESS tregohet më poshtë:

Ju mund të shihni qartë se kjo është një sintaksë e rregullt CSS që konvertohet në mënyrë të përsosur në Sass (SCSS) ose LESS.

Është e rëndësishme të theksohet se Sass (SCSS) ka gjithashtu një version më të vjetër të sintaksës Sass që nuk përjashton pikëpresje dhe kllapa kaçurrelë.

Edhe pse kjo sintaksë mund të përdoret ende në praktikë, ajo është e vjetëruar dhe ne nuk do ta përdorim atë në shembujt tanë.

Sintaksa Sass ( version i vjeter) si në vazhdim:

majë shkruese

Për skedarët e tij, ky paraprocesor përdor shtesën

Shembuj të sintaksës së stilusit:

Të gjitha sintaksat e paraqitura më sipër janë të vlefshme dhe do të kompilohen për të korrigjuar CSS. Për shembull, ky kod do të përpilohet në CSS standarde pa gabime:

Variablat

Në paraprocesorët, variablat deklarohen dhe përdoren brenda skedarëve të stilit CSS. Variablat mund të marrin çdo vlerë të lejuar në CSS (ngjyrë, numër ose tekst) dhe mund të referohen nga kudo në dokumentin CSS.

Sass

Në paraprocesorin Sass, një variabël deklarohet me simbolin

PAK

Variablat në LESS janë saktësisht të njëjta si në Sass, përveç se emri i ndryshores paraprihet nga një simbol

majë shkruese

Variablat në Stylus nuk kanë nevojë për ndonjë shenjë për t'i deklaruar ato, por gjithsesi mund të përdorin simbolin

Me fjalë të tjera, operacioni i mëposhtëm nuk kryhet:

CSS e përpiluar

Secili prej skedarëve të paraqitur si shembull përpilohet saktësisht në të njëjtin kod CSS. Ju mund të përdorni imagjinatën tuaj për të imagjinuar se sa të dobishme mund të jenë variablat.

Falë tyre, nuk ka nevojë të vendosni vlerën e ngjyrës dhe më pas ta përsërisni atë njëzet herë në kodin CSS. Ose detyra u vendos për të ndryshuar gjerësinë e sitit dhe për këtë është e nevojshme të "gërmoni" kodin në kërkim të kësaj vlere.

Më poshtë është kodi CSS pas përpilimit:

Folezimi

Nëse kodi CSS ka për detyrë të aksesojë shumë elementë që kanë të njëjtin prind në të njëjtën kohë, atëherë shkrimi i atij prindi pa pushim është një detyrë e lodhshme.

Për shembull, si kjo:

Në vend të kësaj, duke përdorur fuqinë e paraprocesorit, ne mund t'i vendosim të gjithë përzgjedhësit fëmijë brenda kllapave të elementit prind. Përveç kësaj, simboli

Sass, LESS & Stylus

Të tre paraprocesorët kanë saktësisht të njëjtën sintaksë për përzgjedhësit e vendosur:

CSS e përpiluar

Më poshtë është rezultati i përpiluar CSS i kodit të mësipërm. Krahasoni me kodin që kemi shkruar në fillim - absolutisht e njëjta gjë. Por çfarë komoditeti është të përfitosh nga paraprocesori!

Përzierjet

Përzierja është veçanërisht e dobishme kur krijoni stile specifike të elementeve ose parashtesa të shfletuesit. Kur një mixin thirret brenda një përzgjedhësi CSS, argumentet e miksinit njihen, më pas stilet e tij aplikohen te përzgjedhësi që e ka thirrur.

Shënim. përkthyesi: në shembujt e mëposhtëm, duhet t'i kushtoni vëmendje ndryshimit në sintaksë për deklarimin dhe thirrjen e mixin-it brenda përzgjedhësit CSS për të tre paraprocesorët.

Sass

PAK

stil

CSS e përpiluar

Rezultati i përpilimit nga të tre paraprocesorët do të jetë i njëjti kod CSS:

Trashëgimia

Kur shkruajmë stile CSS në mënyrën "klasike", në mënyrë që të aplikojmë të njëjtat veti në shumë elementë në një dokument HTML, ne do të krijojmë kodin si ky:

Gjithçka funksionon shkëlqyeshëm. Por nëse doni të shkruani stile veçmas për cilindo nga këta përzgjedhës, do t'ju duhet të krijoni rregulla të veçanta për secilin prej tyre. Dhe menjëherë kodi i fletës së stilit bëhet i ngadaltë dhe i vështirë për t'u ruajtur.

Në të kundërt, përdoret trashëgimia. Trashëgimia është aftësia për disa përzgjedhës CSS për të trashëguar pronat nga një përzgjedhës tjetër.

Shënim. përkthyesi: kushtojini vëmendje të njëjtës sintaksë për lidhjen (deklarimin) e trashëgimisë brenda përzgjedhësit CSS duke përdorur direktivën

1

@zgjat

.

Sass & Stylus

CSS e përpiluar

PAK

Paraprocesori LESS nuk e mbështet plotësisht trashëgiminë në mënyrën se si e bëjnë Sass ose Stylus. Në vend që të shtohen përzgjedhës të shumtë në një grup të vetëm vetive, trashëgimia trajtohet si një përzierje pa argumente.

Stilet importohen për çdo përzgjedhës. Ana negative e kësaj qasjeje është përsëritja e vazhdueshme e linjave të pronësisë në stilin e përpiluar CSS.

Ja se si mund të duket kodi LESS me trashëgimi:

CSS e përpiluar

Siç mund ta shihni qartë nga kodi, stilet e klasave

Importimi

Në komunitetin CSS, për të importuar stile duke përdorur direktivën

Në cilindo nga tre paraprocesorët, importimi i një skedari brenda një tjetri në fakt rezulton në kodin nga një skedar që futet në tjetrin kur kompilohet, duke rezultuar në një skedar të vetëm CSS.

Shënim. përkthyes: me fjalë të tjera, në paraprocesorët, importimi është i nevojshëm për të përpiluar një skedar nga disa. Në CSS standarde, importimi rezulton në zëvendësimin e një kodi brenda një tjetri.

Ju lutemi vini re se kur përpiloni një skedar me një lidhje standarde duke përdorur direktivën

CSS e përpiluar

Funksionet e ngjyrave

Funksionet "ngjyra" janë krijuar për të transformuar ngjyrat gjatë përpilimit. Funksione të tilla janë jashtëzakonisht të dobishme gjatë krijimit të gradientëve, errësimit të ngjyrave kur

Sass

Kodi i mësipërm është vetëm një listë e shkurtër e funksioneve të ngjyrave në Sass. Një listë e plotë e të gjitha veçorive të disponueshme gjendet në Sass Documentation.

Funksionet "Color" mund të përdoren kudo që dëshironi të punoni me ngjyrat në kod. Një shembull i thjeshtë - deklarohet një variabël me një ngjyrë, për të cilën funksioni i zbehjes së ngjyrave zbatohet më tej në kod

PAK

Lista e funksioneve të paraprocesorit LESS mund të gjendet në faqen zyrtare të projektit LESS Documentation.

Më poshtë është një shembull se si funksionet "color" mund të aplikohen në LESS:

majë shkruese

Një listë e plotë e të gjitha funksioneve të ngjyrave të paraprocesorit Stylus është në dispozicion në faqen e projektit Stylus Documentation.

Dhe një shembull i përdorimit të funksionit "color" në Stylus:

Veprimet aritmetike

Falë paraprocesorëve, kryerja e operacioneve aritmetike brenda kodit CSS tani është e thjeshtë dhe e lehtë. Kjo veçori është shpesh e dobishme.

Shënim. përkthyesi: vlen të përmendet funksioni nga CSS3 me emër

1

kalc ()

, i cili gjithashtu ju lejon të kryeni veprime të thjeshta aritmetike brenda kodit CSS.

Sass, LESS & Stylus

Shembuj praktik

Pra, ne shikuam pikat kryesore se çfarë dhe si mund të bëjnë të tre parapërpunuesit. Megjithatë, ne kurrë nuk kemi prekur zbatimin praktik të këtyre mundësive. Më poshtë është një listë e aplikacioneve reale të ueb-it që përdorin paraprocesorë, duke përmirësuar ndjeshëm të gjithë kodin.

Prefikset e shfletuesit

Një nga shembujt më të qartë të përfitimeve të përdorimit të paraprocesorëve është shkrimi i vetive me prefikset e shfletuesit duke i përdorur ato. Pasi kemi krijuar një herë një miksin me mbështetje për prefikset e shfletuesit, ne shpëtojmë veten nga puna rutinë.

Për shembull, le të krijojmë një përzierje të rrumbullakosjes së qosheve të bllokut për të tre paraprocesorët:

Sass

PAK

majë shkruese

CSS e përpiluar

tekst 3D

Krijimi i një efekti 3D për tekstin duke përdorur një veçori CSS

Duke përdorur përzierjet dhe funksionet e ngjyrave, ne mund të krijojmë tekst 3D dhe të ndryshojmë ngjyrën e tij menjëherë:

Sass

PAK

majë shkruese

Në shembullin Stylus, zgjodha të shkruaj pronën

CSS e përpiluar

folësit

Përdorimi i variablave dhe vlerave numerike për këto variabla më erdhi në mendje kur fillova të njihem me mundësitë e paraprocesorëve CSS. Deklarimi i një gjerësie për një plan urbanistik brenda një ndryshoreje bën punën e ndryshimit të asaj gjerësi ( nëse është e nevojshme) e thjeshtë dhe e shpejtë:

Sass

PAK

majë shkruese

CSS e përpiluar

Disa truke me paraprocesor

Ka disa truke kur punoni me paraprocesorët CSS. Në këtë artikull, unë do të trajtoj vetëm disa prej tyre. Por nëse kjo temë ju intereson, ju rekomandoj që të lexoni me kujdes dokumentacionin zyrtar, ose, akoma më mirë, thjesht të filloni të përdorni paraprocesorin çdo ditë gjatë kodimit.

Mesazh gabimi

Nëse keni qenë duke shkruar kodin CSS për një kohë të gjatë, atëherë me siguri keni hasur në një situatë ku një gabim është depërtuar në kod që nuk mund ta gjeni në asnjë mënyrë. Nëse e gjeni veten saktësisht në të njëjtën situatë, atëherë unë mund t'ju kënaq - ekziston një mënyrë për të zgjidhur një problem të tillë.

Parapërpunuesit CSS mund të raportojnë gabime në kod, dhe t'i detyrosh ata ta bëjnë këtë është mjaft e lehtë. Në këtë rast, vetë paraprocesori ju tregon se ku ndodhet gabimi në kodin CSS ( dhe të gjithë janë të lumtur).

Nëse jeni të interesuar për këtë veçori në të tre paraprocesorët, atëherë ky artikull përshkruan në detaje se si të kryeni këtë cilësim.

Absolutisht të gjithë projektuesit me përvojë të paraqitjes përdorin paraprocesorë. Nuk ka përjashtime. Nëse dëshironi të jeni të suksesshëm në këtë aktivitet, mos harroni këto programe. Në shikim të parë, ata mund të shkaktojnë një tmerr të qetë tek një fillestar - kjo tashmë është shumë e ngjashme me programimin! Në fakt, ju mund të kuptoni të gjitha tiparet e paraprocesorëve CSS në rreth një ditë, dhe nëse provoni, edhe në disa orë. Në të ardhmen, ata do ta thjeshtojnë shumë jetën tuaj.

Si u krijuan paraprocesorët CSS

Për të kuptuar më mirë veçoritë e kësaj teknologjie, le të zhytemi shkurtimisht në historinë e zhvillimit të paraqitjes vizuale të faqeve të internetit.

Kur përdorimi masiv i internetit sapo kishte filluar, nuk ekzistonte asnjë fletë stili. Dokumentacioni varej vetëm nga shfletuesit. Secili prej tyre kishte stilet e veta, të cilat përdoreshin për të përpunuar etiketa të caktuara. Prandaj, faqet dukeshin të ndryshme në varësi të cilit shfletues i keni hapur ato. Rezultati është kaos, konfuzion, probleme për zhvilluesit.

Në vitin 1994, shkencëtari norvegjez Haakon Lee zhvilloi një fletë stili që mund të përdoret për të stiluar pamjen e një faqeje të ndarë nga dokumenti HTML. Ideja u pëlqye nga përfaqësuesit e konsorciumit W3C, të cilët menjëherë filluan ta përpunojnë atë. Disa vjet më vonë, u publikua versioni i parë i specifikimeve CSS. Pastaj u përmirësua, rafinohej vazhdimisht ... Por koncepti mbeti i njëjtë: çdo stili i jepen veti të caktuara.

Përdorimi i tabelave CSS ka qenë gjithmonë problematik. Për shembull, dizajnerët e paraqitjes shpesh kishin vështirësi me renditjen dhe grupimin e vetive, dhe trashëgimia nuk është gjithashtu aq e thjeshtë.

Dhe më pas erdhën vitet 2000. Zhvilluesit profesionistë të front-end gjithnjë e më shumë filluan të merren me markup, për të cilët puna fleksibël dhe dinamike me stilet ishte e rëndësishme. CSS që ekzistonte në atë kohë kërkonte mbështetje për prefiksimin dhe gjurmimin për veçoritë e reja të shfletuesit. Më pas, ekspertët në JavaScript dhe Ruby iu nisën biznesit, duke krijuar paraprocesorë - shtesa për CSS që i shtojnë veçori të reja.

CSS për fillestarët: Karakteristikat e paraprocesorëve

Ata kryejnë disa funksione:

• unifikimi i prefikseve dhe hakimeve të shfletuesit;

• thjeshton sintaksën;

• bëjnë të mundur punën me përzgjedhës të mbivendosur pa gabime;

• përmirësoni logjikën e stilimit.

Shkurtimisht: paraprocesori shton logjikën e programimit në mundësitë e CSS. Tani stilimi nuk bëhet me numërimin e zakonshëm të stileve, por me ndihmën e disa trukeve dhe qasjeve të thjeshta: variabla, funksione, miks, sythe, kushte. Përveç kësaj, kishte një mundësi për të përdorur matematikën.

Duke parë popullaritetin e shtesave të tilla, W3C filloi të shtonte gradualisht veçori prej tyre në kodin CSS. Për shembull, kështu u shfaq funksioni calc() në specifikim, i cili mbështetet nga shumë shfletues. Pritet që së shpejti të jetë i mundur vendosja e variablave dhe krijimi i mikseve. Megjithatë, kjo do të ndodhë në të ardhmen e largët, dhe parapërpunuesit janë tashmë këtu dhe tashmë funksionojnë shkëlqyeshëm.

Paraprocesorët e njohur CSS. Sass

Zhvilluar në 2007. Fillimisht, ai ishte një komponent i Haml, një motor shabllonesh HTML. Zhvilluesit e Ruby on Rails kanë marrë kontrollin e ri mbi elementët CSS dhe kanë filluar ta përhapin atë kudo. Sass ka një numër të madh veçorish që tani përfshihen në çdo paraprocesor: variabla, përzgjedhës të foleve, miks (atëherë, megjithatë, nuk mund t'u shtoni argumente atyre).

Deklarimi i variablave në Sass

Variablat deklarohen me shenjën $. Mund të ruani vetitë dhe grupet e tyre në to, për shembull: “$borderSolid: 1px solid red;”. Në këtë shembull, ne kemi deklaruar një variabël të quajtur borderSolid dhe kemi ruajtur vlerën 1px të kuqe të fortë në të. Tani, nëse në CSS duhet të krijojmë një kufi të kuq të gjerë 1 px, thjesht specifikoni këtë variabël pas emrit të pronës. Pasi të deklarohen, variablat nuk mund të ndryshohen. Ekzistojnë disa funksione të integruara. Për shembull, le të deklarojmë një ndryshore $redColor me vlerën #FF5050. Tani në kodin CSS, në vetitë e disa elementeve, ne e përdorim atë për të vendosur ngjyrën e shkronjave: p ( ngjyra: $redColor; ). Dëshironi të eksperimentoni me ngjyra? Përdorni funksionet e errësimit ose ndriçimit. Kjo bëhet si kjo: p ( ngjyra: errësuar ($redNgjyrë, 20%); ). Kjo do ta bëjë ngjyrën e kuqe 20% më të lehtë.

Folezimi

Më parë, ne duhej të përdornim ndërtime të gjata dhe të vështira për të treguar folenë. Le të imagjinojmë se kemi një div, e cila përmban p, dhe në të, nga ana tjetër, ndodhet span. Për div, duhet të vendosim ngjyrën e shkronjave në të kuqe, për p - të verdhë, për hapësirë ​​- rozë. Në CSS normale, kjo do të bëhej si kjo:

Me ndihmën e paraprocesorit CSS, gjithçka bëhet më e thjeshtë dhe më kompakte:

Elementet fjalë për fjalë janë futur njëri brenda tjetrit.

Direktivat e paraprocesorit

Ju mund të importoni skedarë duke përdorur direktivën @import. Për shembull, ne kemi një skedar fonts.sass që deklaron stilet për fontet. Ne e përfshijmë atë në skedarin kryesor style.sass: @import 'fonts'. Gati! Në vend të një skedari me stil të madh, ne kemi disa që mund të përdoren për të aksesuar shpejt dhe me lehtësi pronat e kërkuara.

Përzierjet

Një nga idetë më interesante. Ju lejon të vendosni një grup të tërë karakteristikash në një rresht. Punoni si më poshtë:

@mixinlargeFont(

font-family: 'Times New Roman';

madhësia e shkronjave: 64 px;

lartësia e vijës: 80 px;

pesha e shkronjave: bold;

Për të aplikuar një mixin në një element në një faqe, ne përdorim direktivën @include. Për shembull, ne duam ta zbatojmë atë në titullin h1. Rezultati është ndërtimi i mëposhtëm: h1 (@include: largeFont; )

Të gjitha vetitë nga mixin do t'i caktohen elementit h1.

Paraprocesor më pak

Sintaksa Sass të kujton programimin. Nëse jeni duke kërkuar për një opsion që është më i përshtatshëm për nxënësit fillestarë të CSS, shikoni Less. Është krijuar në vitin 2009. Karakteristika kryesore është mbështetja vendase, kështu që do të jetë më e lehtë për projektuesit e paraqitjes që nuk janë të njohur me programimin ta zotërojnë atë.

Variablat deklarohen me simbolin @. Për shembull: @fontSize: 14px;. Nesting punon në të njëjtat parime si në Sass. Përzierjet deklarohen si kjo: .largeFont() ( font-familje: 'Times New Roman'; madhësia e shkronjave: 64 px; lartësia e rreshtit: 80 px; pesha e shkronjave: bold; ). Nuk keni nevojë të përdorni direktiva të paraprocesorit për t'u lidhur - thjesht shtoni një miksin të sapokrijuar në vetitë e elementit të zgjedhur. Për shembull: h1 ( .largeFont; ).

majë shkruese

Një tjetër paraprocesor. Krijuar në vitin 2011 nga i njëjti autor që i dha botës Jade, Express dhe produkte të tjera të dobishme.

Variablat mund të deklarohen në dy mënyra - në mënyrë eksplicite ose të nënkuptuar. Për shembull: font = 'Times New Roman'; është një opsion i nënkuptuar. Por $font = 'Times New Roman' është e qartë. Përzierjet deklarohen dhe përfshihen në mënyrë implicite. Sintaksa është: redColor() ngjyra e kuqe. Tani mund ta shtojmë tek elementi, për shembull: h1 redColor();.

Në pamje të parë, Stylus mund të duket konfuze. Ku janë kllapat dhe pikëpresje "amtare"? Por sapo zhyteni në të, gjithçka bëhet shumë më e qartë. Megjithatë, mbani në mend se zhvillimi i gjatë me këtë paraprocesor mund t'ju "zhvillojë" nga përdorimi i sintaksës klasike CSS. Kjo ndonjëherë shkakton probleme kur duhet të punoni me stile "të pastra".

Cilin paraprocesor të zgjidhni?

Me të vërtetë... nuk ka rëndësi. Të gjitha opsionet ofrojnë përafërsisht të njëjtat aftësi, vetëm sintaksa është e ndryshme për secilën. Ne rekomandojmë të bëni sa më poshtë:

• nëse jeni programues dhe dëshironi të punoni me stile si kodi, përdorni Sass;
• nëse jeni një stilist dhe dëshironi të punoni me stile si faqosja normale, kushtojini vëmendje Less;
• nëse ju pëlqen minimalizmi, përdorni Stylus.

Për të gjitha opsionet, disponohen një numër i madh bibliotekash interesante që mund të thjeshtojnë më tej zhvillimin. Përdoruesit e Sass inkurajohen t'i hedhin një sy Compass, një mjet i fuqishëm me shumë veçori të integruara. Për shembull, pas instalimit të tij, nuk do të duhet të shqetësoheni më për prefikset e shitësit. Më e lehtë për të punuar me rrjete. Ka shërbime për të punuar me ngjyra, sprites. Një numër miksesh të shpallura tashmë janë në dispozicion. Jepini këtij mjeti disa ditë - kështu do të kurseni shumë kohë dhe përpjekje në të ardhmen.

Nga autori: Për përpunuesit css është folur për një kohë të gjatë. Shumë zhvillues tashmë i përdorin ato në zhvillimin e projekteve të tyre. Ka nga ata që kanë dëgjuar për paraprocesorët ose kanë lexuar për ta, por nuk e kuptojnë se çfarë avantazhesh japin paraprocesorët kur shkruajnë kodin css.

Për shumë njerëz, parapërpunuesit janë një teknologji "sekret", përfitimet e së cilës janë shumë të kushtëzuara dhe jo të dukshme. Në këtë artikull, unë do të flas me terma të thjeshtë se çfarë janë paraprocesorët, për çfarë shërbejnë dhe si mund të ndihmojnë një zhvillues ueb.

Çfarë janë paraprocesorët CSS?

Një paraprocesor CSS është një shtesë CSS që zgjeron aftësitë e CSS standarde me konstruksione të reja sintaksore.

Kjo do të thotë, nuk është një "super-teknologji revolucionare". Kjo është ajo që fuqizon css. Kjo është diçka që mund të automatizojë operacionet rutinë ditore dhe të përshpejtojë zhvillimin.

Paraprocesorët konvertojnë kodin e shkruar në një gjuhë paraprocesori në kod të pastër dhe të vlefshëm CSS. Dhe në dalje marrim një kod të pastër, të vlefshëm, ndër-shfletues. Skema e punës me parapërpunuesit mund të shihet më poshtë.

Si e bëjnë jetën më të lehtë parapërpunuesit?

Paraprocesorët ju lejojnë të shpejtoni shkrimin e kodit css dhe të thjeshtoni mbështetjen e tij në të ardhmen.

Konsideroni një shembull. Faqja përdor fontin e kuq. Duke përdorur css të pastër, duhet ta vendosni këtë ngjyrë shumë herë për secilin element veç e veç. Dhe nëse vendosni të ndryshoni nuancën e së kuqes me kalimin e kohës, do t'ju duhet ta ndryshoni atë për secilin element. Duke përdorur paraprocesorët, ngjyra i caktohet një ndryshoreje një herë, dhe kjo ndryshore tashmë i është caktuar secilit element. Nëse vendosni të ndryshoni nuancën e ngjyrës këtë herë, do t'ju duhet ta ndryshoni atë vetëm në një vend.

Një shembull i tillë ndodh mjaft shpesh. Dhe, siç theksova në fillim, nuk ka shumë përparësi për të përdorur paraprocesorët në këtë shembull. Në çdo redaktues kodi, mund të shtypim shkurtoren e tastierës "ctrl" + "F", të gjejmë kodin e ngjyrës "#ff0000" dhe ta zëvendësojmë atë me "#00ff00". Dhe ngjyra do të ndryshojë nga e kuqe në jeshile në të gjitha vendet me një klikim të mausit.

Pra, me çfarë mund të na ndihmojnë vërtet parapërpunuesit?

Çfarë problemesh zgjidhin parapërpunuesit?

Parapërpunuesit na kursejnë kohë dhe bëjnë shumë gjëra rutinë për ne falë veçorive të tilla si: përzgjedhësit e ndërlidhur, funksionet matematikore, referenca për përzgjedhësin prind dhe madje edhe mesazhet e gabimit që na tregojnë se ku dhe pse ka ndodhur gabimi në kod.

Le të shohim se si e gjithë kjo mund të na ndihmojë me shembuj realë:

Në projektet e mëdha ose shumë të vjetra që janë duke u shtuar dhe përmirësuar vazhdimisht, stilet css mund të ndryshojnë mjaft shpesh. Dhe nëse skedari i stilit përmban mijëra rreshta kodi, atëherë është shumë e papërshtatshme të bësh redaktime css. Do të ishte shumë më i përshtatshëm nëse stilet do të ndaheshin në blloqe logjike, dhe secili bllok i tillë stilesh do të ishte në një skedar të veçantë.

Parapërpunuesit e zgjidhin këtë problem pa asnjë përpjekje nga ana juaj. Ju mund të keni disa skedarë paraprocesorësh nga projekti juaj, të cilët do të bashkohen automatikisht pas kompilimit dhe si rezultat do të merrni një skedar css "të bukur".

Një çështje tjetër me css është dyfishimi i stileve dhe përzgjedhësve. Ndërsa projekti zhvillohet, shfaqen disa fragmente që mund të ripërdoren. Mund të ketë gjithashtu shumë përzgjedhës monotonë që ndryshojnë vetëm pak. Si rezultat, nëse e zhvendosim bllokun ose e riemërtonim klasën e ndonjë blloku, duhet të modifikojmë shumë përzgjedhës.

Përzierjet e zgjidhin këtë problem në parapërpunuesit. Përzierjet janë funksione, të parametrizuara ose jo, që prodhojnë një lloj CSS që mund ta ripërdorim aty ku nevojitet.

Problemi tjetër është problemi i varësive. Për shembull, ju keni një gjerësi blloku të vendosur në stilet tuaja, parametrat e tjerë, indencat për blloqe të tjera, etj. varen prej tij. Për të ndryshuar saktë një parametër, do të duhet të korrigjoni gjithçka që varet nga ai.

Ky problem zgjidhet shumë lehtë nga variablat në paraprocesorët.

Përveç të gjitha sa më sipër, kur përdorni paraprocesorë, ju eliminoni plotësisht rrezikun e marrjes së një gabimi në skedarin css, merrni një css më të pastër, më logjik dhe ndër-shfletues.

Përfitimet e parapërpunuesve

Bazuar në vështirësitë e paraqitjes me të cilat ndihmojnë parapërpunuesit për të përballuar, mund të emërtohen avantazhet e mëposhtme të paraprocesorëve: përdorimi i variablave, foleja, miksat (miksinat), trashëgimia, etj. e kështu me radhë - kjo është e gjitha e kuptueshme. Por mbi të gjitha, dua të tërheq vëmendjen tuaj për faktin se njohuritë e parapërpunuesve ju hapin mundësinë për të gjetur një punë të paguar mirë, për të bërë një hap lart në shkallët e karrierës dhe të paktën dyfishoni të ardhurat tuaja.

Le të shohim se çfarë pagash ofrojnë studiot e internetit për projektuesit e paraqitjes pa njohuri për parapërpunuesit në sit hh.ru:

Dhe këtu janë pagat që studiot e internetit ofrojnë për koduesit me njohuri për paraprocesorët në të njëjtin sajt:

Siç mund ta shihni, paga maksimale pa njohuri parapërpunuese dhe paga minimale me njohuri parapërpunuese ndryshojnë me 1.5 herë. Dhe nëse shikoni shifrat mesatare, atëherë pagesa ndryshon të paktën 2-3 herë!

Për më tepër, çfarë tjetër mund të vërehet, për këtë nuk keni nevojë të njihni të gjithë parapërpunuesit. Mjafton të njihni dy parapërpunuesit më të njohur - Sass dhe Less.

konkluzioni

Parapërpunuesit me të vërtetë e bëjnë jetën më të lehtë për zhvilluesin, ata mund të zgjidhin shpejt problemet e përditshme të projektuesit të paraqitjes dhe të marrin përsipër operacionet rutinë të përditshme.

Është më mirë të njihni parapërpunuesit dhe të mos i përdorni çdo ditë, ose t'i përdorni sipas nevojës. Se sa të mos njohësh parapërpunuesit dhe të humbasësh një projekt interesant me pagesë të lartë ose mundësinë për të kaluar në një punë me pagesë më të lartë.

P.S. A përdorni paraprocesorë në zhvillim? Shkruani në komente çfarë parapërpunuesish përdorni? Nëse nuk e përdorni akoma, pse jo? A po planifikoni të filloni të përdorni paraprocesorët?

Video prezantimi i kursit “Sass and Less Preprocessors. Automatizimi dhe thjeshtimi i zhvillimit të front-end»

Keni pyetje?

Zbatimi i paraqitjes së dizajnit është i pamundur pa përdorimin e HTML dhe CSS. Nëse gjuha e shënjimit na lejon të skicojmë një shabllon nga elementët e nevojshëm, atëherë CSS do ta transformojë këtë shabllon në formën e dëshiruar, si në kodin burimor. Duket se me ndihmën e CSS të pastër, ju mund ta bëni faqen ashtu siç dëshironte ta shihte klienti.

Sidoqoftë, nëse dikush hap skedarin tuaj të vetëm CSS dhe përpiqet të modifikojë diçka, a jeni i sigurt që kodi do të jetë i lexueshëm, i modifikueshëm, i strukturuar dhe i kuptueshëm? Nëse projekti juaj është i madh, me shumë pjesë, a jeni i sigurt se mund ta mirëmbani lehtësisht në të ardhmen? Nëse përdorni një paraprocesor CSS, atëherë përgjigjja është po, përveç kësaj, kjo është mënyra për të automatizuar paraqitjen e faqeve. Pse? Tani do ta zbulojmë.

Çfarë është një paraprocesor CSS?

Në kuptimin tim, kjo është një shtesë për CSS standarde, e cila zgjeron veçoritë standarde, shton disa veçori dhe ju lejon të shkruani kode më të lexueshme dhe më të lehtë për t'u kuptuar. Në dalje, kodi burim përpilohet në CSS me të cilën jemi mësuar. Përdorimi i një mjeti të tillë në zhvillimin modern është një "duhet të ketë", dhe unë këshilloj çdo projektues ose zhvillues të paraqitjes që të njihet me të. Duhet shtuar se ka shumë për të zgjedhur, sepse ka mjaft paraprocesorë CSS, por duhet të theksohen më të njohurit:

• majë shkruese

Të gjithë paraprocesorët e mësipërm kanë funksionalitet pothuajse identik, ka vetëm dallime të vogla në sintaksë. Tani, t'i kthehemi pyetjes së ngritur më herët: çfarë avantazhesh na japin paraprocesorët në mënyrë që ta bëjmë kodin tonë më të përshtatshëm dhe të mirëmbajtur? Kjo është, para së gjithash, foleja. Kjo veçori na jep mundësinë të strukturojmë elementë, të gjejmë lehtësisht prindin e një elementi, të shkruajmë shpejt pseudo-klasa dhe pseudo-elemente, madje të përdorim BEM! P.sh.
.pista
ngjyra: #fff
&__titull
mbushje: 10 px
&: rri pezull, &: fokus
ngjyra: blu

Hidhini një sy këtij fragmenti kodi të shkruar në Sass. E gjithë kjo përkthehet në CSS-në e mëposhtme:

Kënga (ngjyra: #FFF;)
.track_title (mbushje: 10 px;)
.track__title:hover, .track-title:fokus (ngjyra: blu)

Koncize, e përshtatshme, e kuptueshme, struktura nga prindi tek fëmija është e mrekullueshme, apo jo? Avantazhi i dytë dhe jo më pak i rëndësishëm janë variablat. Parimi i funksionimit të tyre është jashtëzakonisht i thjeshtë: emri i ndryshores fillon me simbolin $, dhe më pas vetë emri. Ne e shkruajmë vlerën përmes një dy pika - mund të jetë një ngjyrë në çdo formë të përshtatshme, vlerat e dhëmbëzimit, gjerësia, madhësia e shkronjave, etj. Si rezultat, ne do të marrim diçka të tillë:

$btn-ngjyra: blu;
$font-main-size: 16px;

Dhe përdorimi do të duket si ky:

Blloko (
font-size: $font-main-size;
}

Vetëm imagjinoni sa i përshtatshëm është. Nëse keni nevojë të ndryshoni ngjyrën e butonave në të gjithë faqen, atëherë kjo duhet të bëhet vetëm në një vend! Epo, le të vazhdojmë. Gjëja e tretë dhe më e madhe që mund të na ofrojnë paraprocesorët CSS është përdorimi i mixins. Në kuptimin tonë të zakonshëm, mixin-et janë funksione që mund të përdoren disa herë pa përsëritur të njëjtat pjesë të kodit (kujtoni një nga parimet e programimit - DRY - Mos e përsëritni veten). Për të qenë i sinqertë, nuk i përdor kaq shpesh miksat, me sa duket nuk kishte një nevojë kaq urgjente, por gjithsesi do të tregoj disa shembuj. Një nga funksionet e mia më të përdorura duket kështu:

@function em($pixels, $context: $browser-context) (
@if (pa njësi ($pixel)) (
$pixels: $pixels * 1px;
}
@if (pa njësi ($kontekst)) (
$context: $context * 1px;
}
@return $pixels / $context * 1em;
}

Dhe aplikimi i tij është si më poshtë:

trupi (
madhësia e shkronjave: em(14px);
}

Po, siç e kuptoni, ky është vetëm një konvertim i madhësisë së shkronjave nga PX në Em (rroftë ato kohë kur përdorni shërbime speciale për një gjë të tillë të vogël ose e numëronit veten në një kalkulator). Shembulli i mëposhtëm gjithashtu kursen shumë kohë:

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

Përdorimet e tij:

hyrje, zona e tekstit (
@include input-placeholder (
ngjyra: $gri;
}
}

Ka shumë shembuj të tjerë, por ia vlen të filloni të përdorni vetë mixins për të kuptuar se sa i dobishëm është ky mjet. Ndoshta ka një arsye më shumë që do t'ju bëjë të doni parapërpunuesit CSS, dhe emri i tij është modulariteti. Është viti 2018 dhe ne kemi modularitet kudo - nga motorët e shablloneve HTML deri te kornizat e ndryshme të css dhe ndërtuesit e projekteve.

CSS moderne është fuqi, dhe në kombinim me paraprocesorët, në përgjithësi është një makinë luftarake për dekorimin e përmbajtjes në faqe. Artikulli ofron një udhëzues të detajuar për Sass / SCSS me shembuj. Pas leximit, do të mësoni se si të përdorni miksin, variablat dhe direktivat për më shumë kontroll mbi stilet.

Shënim I gjithë kodi Sass/SCSS është përpiluar në CSS në mënyrë që shfletuesit ta kuptojnë dhe ta shfaqin saktë. Aktualisht, shfletuesit nuk mbështesin punën me Sass/SCSS ose ndonjë paraprocesor tjetër CSS drejtpërdrejt dhe specifikimi standard CSS nuk ofron funksionalitet të ngjashëm.

Pse të përdorni Sass/SCSS në vend të CSS?

1. Folezimi- SCSS ju lejon të futni rregullat CSS brenda njëri-tjetrit. Rregullat e mbivendosur zbatohen vetëm për elementët që përputhen me përzgjedhësit e jashtëm (dhe nëse po flasim për Sass, atëherë gjithçka është e bukur dhe intuitive edhe pa kllapa).
2. Variablat- CSS standarde ka gjithashtu konceptin e variablave, por në Sass mund të punoni me ta pak më ndryshe. Për shembull, përsëritni ato përmes direktivës @for. Ose gjeneroni vetitë në mënyrë dinamike. Më shumë detaje mund të gjenden në faqen e internetit të projektit në gjuhën ruse.
3. Operacione të përmirësuara matematikore- mund të shtoni, zbritni, shumëzoni dhe ndani vlerat CSS. Ndryshe nga CSS standarde, Sass/SCSS ju lejon të anashkaloni calc() .
4. Trigonometria- SCSS ju lejon të shkruani funksionet tuaja (sinus dhe kosinus) duke përdorur vetëm sintaksën Sass/SCSS, të ngjashme me mënyrën se si mund ta bëni atë në gjuhë të tjera si JavaScript.
5. direktivat@për pak dhe shprehjes@if-else - Mund të shkruani kodin CSS duke përdorur elementë të njohur nga gjuhë të tjera. Por mos bëni gabim - rezultati përfundimtar do të jetë CSS i thjeshtë.
6. Përzierje (përzierje)- ju mund të krijoni një grup karakteristikash CSS një herë dhe të punoni me to në mënyrë të përsëritur ose të përzieni me vlera të tjera. Përzierjet mund të përdoren për të krijuar tema të veçanta të të njëjtit plan urbanistik. Mixins mund të përmbajnë gjithashtu rregulla të tëra CSS ose çdo gjë tjetër të lejuar në një dokument Sass. Ata madje mund të marrin argumente, duke ju lejuar të krijoni një shumëllojshmëri të gjerë stilesh me një numër të vogël miksesh.
7. Funksione - ju mund të krijoni përkufizime CSS si funksione të ripërdorshme.

Paraprocesori Sass

Sass nuk është dinamik. Ju nuk do të jeni në gjendje të gjeneroni dhe/ose të animoni vetitë dhe vlerat e CSS në kohë reale. Por ju mund t'i krijoni ato në një mënyrë më efikase dhe t'i lejoni vetitë standarde (si animacionet CSS) t'i huazojnë ato nga atje.

Sintaksë

SCSS nuk shton në të vërtetë ndonjë veçori të re në CSS përveç një sintakse të re që shpesh redukton kohën e kodimit.

Parakushtet

Ka 5 paraprocesorë CSS: Sass, SCSS, Less, Stylus dhe PostCSS.

Ky artikull mbulon kryesisht SCSS, i cili është i ngjashëm me Sass. Mund të lexoni më shumë rreth këtyre paraprocesorëve në Stack Overflow (origjinal) ose në stackoverflow (përkthyer në Rusisht).

SASS  -  (.sass) S në mënyrë sintaksore A i mrekullueshëm S stil S kapele.

SCSS  -  (.scss) Sass y C në rritje S stil S kapele.

Shtesat .sass dhe .scss janë të ngjashme, por jo të njëjta. Për tifozët e linjës së komandës, këtu është metoda e konvertimit:

# Konverto nga Sass në SCSS $ sass-convert style.sass style.css # Konverto nga SCSS në Sass $ sass-convert style.scss style.sass

Sass është specifikimi i parë për SCSS me shtesën e skedarit .sass. Zhvillimi i tij filloi në vitin 2006, por më vonë u zhvillua një sintaksë alternative me zgjerimin .scss.

shënim Paraprocesorë të tjerë janë të ngjashëm në funksionalitet me SCSS, por sintaksa mund të ndryshojë. Gjithashtu, çdo gjë që funksionon në CSS do të luajë mirë edhe në Sass dhe SCSS.

Variablat

Sass/SCSS ju lejon të punoni me variabla. Në CSS, ato shënohen me një vizë të dyfishtë (--), dhe në parapërpunuesit me një shenjë dollari ($).

$numri: 1; $ngjyra: #ff0000; $text: "tproger përgjithmonë."; $text: "IT përgjithmonë." !default; $asgjë: null;

Mund t'u caktoni një vlerë të paracaktuar variablave që nuk kanë ende një vlerë duke shtuar një etiketë !default në fund të vlerës. Në këtë rast, nëse ndryshores i është caktuar tashmë një vlerë, ajo nuk do të ndryshojë; nëse ndryshorja është bosh, do t'i caktohet vlera e re e specifikuar.

#container (përmbajtja: $text; )

Variablat në Sass mund t'i caktohen çdo vetie.

Rregullat e mbivendosura

Elementet standarde të mbivendosura CSS duke përdorur hapësirën e bardhë:

/* Rregullat e ndërlidhura */ #A ( ngjyra: e kuqe; ) #A #B ( ngjyra: jeshile; ) #A #B #C p ( ngjyra: blu; )

Elementë të njëjtë të mbivendosur me SCSS:

/* Rregullat e ndërlidhura */ #A (ngjyra: e kuqe; #B (ngjyra: jeshile; #C p (ngjyra: blu; )) )

Siç mund ta shihni, sintaksa duket më e pastër dhe më pak e përsëritur.

Kjo është veçanërisht e dobishme kur menaxhoni paraqitjet e mbingarkuara. Kështu, shtrirja në të cilën vetitë e mbivendosur janë shkruar në kod është plotësisht në përputhje me strukturën aktuale të paraqitjes së aplikacionit.

Prapa skenave, paraprocesori ende e përpilon atë në kodin standard CSS (treguar më lart) në mënyrë që të mund të shfaqet në shfletues. Ne thjesht po ndryshojmë mënyrën e shkrimit të CSS.

Ampersand

Me karakterin &, mund të specifikoni në mënyrë eksplicite se ku duhet të futet përzgjedhësi prind.

Rezultati i përpilimit të Sass (nga shembulli i mëparshëm) në CSS është më poshtë.

#p (ngjyra: e zezë;) #p a (pesha e shkronjave: bold;) #p a:hover (ngjyra: e kuqe;)

Si rezultat, ampersand u përpilua në emrin e elementit prind (a:hover).

Përzierje (aka mixins)

Përzierjet mund të përmbajnë gjithashtu përzgjedhës, duke përfshirë ato me veti. Dhe përzgjedhësit mund të përmbajnë referenca për elementin prind përmes ampersand (&), ju kujtohet për të, apo jo?

Shembull i punës me shumë shfletues

Disa gjëra në CSS janë mjaft të lodhshme për t'u shkruar, veçanërisht në CSS3, ku shpesh duhet të përdorni shumë parashtesa të shitësit (-webkit- ose -moz-) mbi të.

Mixins ju lejojnë të krijoni grupe deklaratash CSS që do t'ju duhet t'i përdorni disa herë në një sajt. Është praktikë e mirë të përdorni miksin për prefikset e shitësit. Shembull:

@mixin border-radius($radius) ( // Prefikset për: -webkit-border-radius: $radius; // Chrome dhe Safari -moz-border-radius: $radius; // Firefox -ms-border-radius: $radius; // Internet Explorer -o-border-radius: $radius; // Opera border-radius: $radius; // Standard CSS ) // Shembull i përdorimit të përzierjes me rreze kufiri pasi të jetë krijuar. kuti ( @përfshirë kufirin- rreze (10px); )

Veprimet aritmetike

Ashtu si në jetën reale, nuk mund të punoni me numra që kanë lloje të dhënash të papajtueshme (për shembull, duke shtuar px dhe em).

Mbledhja dhe zbritja

Gjithmonë i kushtoni vëmendje llojit të të dhënave që shtohen. Kjo do të thotë, pikselë për pikselë, elefantët për elefantët. Zbritja funksionon në të njëjtën mënyrë, por me një shenjë minus.

Shembull i zbritjes:

Shumëzimi

Bëhet tamam si në CSS, me calc(a * b) , por pa calc dhe kllapa. Përveç kësaj, ju gjithashtu mund të ndani shenjën e shumëzimit me hapësira nga numrat (5 * 6 == 5 * 6).

Përjashtim Nuk mund të shumëzoni pikselë me njëri-tjetrin. Kjo është, 10px * 10px != 100px. 10 px * 10 == 100 px .

P ( gjerësia: 10px * 10px; // ERROR! gjerësia: 10px * 10; // 100px gjerësia: 1px * 5 + 5px; // 10px gjerësia: 5 * (5px + 5px); // 50px gjerësia: 5px + ( 10 px / 2) * 3; // 20 px )

Divizioni

Ndarja është pak më e ndërlikuar, por ju mund ta kuptoni, sepse në CSS standarde, prerja (slash) rezervohet për përdorimin e formës së shkurtër të shënimit të vetive. Një shembull është më poshtë.

/* stenografi e vetive */ font: italic bold .8em/1.2 Arial, sans-serif; /* shënimi standard i vetive */ font-style: italic; pesha e shkronjave: bold; madhësia e shkronjave: .8em; lartësia e vijës: 1.2; font-family: Arial, sans-serif;

Ekzistojnë tre ndihmës që do të lënë të kuptohet për mundësinë e ndarjes:

1. Vlera (ose çdo pjesë e saj) ruhet në një variabël ose kthehet nga një funksion.
2. Vlerat janë të mbyllura në kllapa.
3. Vlera përdoret si pjesë e një shprehjeje tjetër aritmetike.

$var1: 20; $var2: 4; p ( krye: 16 px / 24 px; // E dhënë e pandryshuar në krye standarde CSS: (20px / 5px); // E ndarë (por vetëm kur përdoret kllapa) sipër: #($var1) / #($var2); / / Rendered si CSS normale, pa ndarje në krye: $var1 / $var2; // Ndarja e kryer në krye: rastësisht(4) / 5; // Ndarja e kryer (kur çiftohet me një funksion) sipër: 2px / 4px + 3px; // Ndarja është kryhet nëse shtohet edhe një veprim aritmetik)

Rezultati i përpilimit në CSS:

P (lart: 16px / 24px; sipër: 4; sipër: 20/4; sipër: 5; sipër: 0.6; sipër: 3.5px; )

Pjesa e mbetur

Remainder llogarit pjesën e mbetur të një operacioni të ndarjes. Ja se si të krijoni një model zebër për një listë HTML.

@mixin zebra() ( @për $i nga 1 deri në 7 ( @if ($i % 2 == 1) ( .stripe-#($i) (ngjyra e sfondit: e zezë; ngjyra: e bardhë; ) ) ) * ( @include zebra(); rreshtimi i tekstit: në qendër; )

Krijimi i mixin zebra tregohet në kodin e mësipërm. Direktivat @for dhe @if janë përshkruar në seksionin më poshtë.

Për të krijuar një mostër, duhet të shkruani disa elementë HTML.

Rezultati në shfletues:

Zebra e gjeneruar me sukses nga zebra mixin

Operatorët e Krahasimit

Direktiva @if merr një shprehje SassScript dhe përdor stilet e vendosura në të nëse shprehja kthen ndonjë vlerë tjetër përveç false ose null.

Më poshtë tregon se si funksionojnë direktivat @if dhe @else kur futen në një mixin.

@mixin spacing($padding, $margin) ( @if ($padding > $margin) ( mbushje: $padding; ) @else ( mbushje: $margin; ) ) .container ( @include spacing(10px, 20px); )

Krahasimi në veprim. Miksina e ndarjes do të përmasat e mbushjes nëse është më e madhe se diferenca.

Pas përpilimit në CSS:

Enë (mbushje: 20 px; )

Operatorët logjikë

Përshkrimi i operatorëve logjikë

Përdorimi i operatorëve Boolean Sass për të krijuar një buton që do të ndryshojë sfondin e tij bazuar në gjerësinë e tij.

@mixin buton-ngjyrë ($lartësi, $gjerësi) ( @if (($lartësi< $width) and ($width >= 35 px)) (ngjyra e sfondit: blu; ) @else (ngjyra e sfondit: jeshile; ) ) .button (@include button-color(20px, 30px) )

Vargjet

CSS përcakton 2 lloje vargjesh: të cituar dhe të pacituar. Sass i njeh të dyja. Si rezultat, ju do të merrni në CSS llojin e vargjeve që keni përdorur në Sass.

Në disa raste, është e mundur të shtoni vargje në vlerat e vlefshme CSS pa thonjëza, por vetëm nëse vargu i shtuar është elementi përfundimtar.

P (font: 50px Ari + "al"; // Përpilohet në 50px Arial )

Shembulli i mëposhtëm tregon se çfarë nuk duhet bërë.

P (font: "50px" + Arial; // ERROR! )

Ju mund të grumbulloni vargje të llojeve të ndryshme për sa kohë që ato nuk kanë hapësira. Shembulli i mëposhtëm nuk do të përpilohet.

P:after (përmbajtja: "Kthejeni Linusin" + Torvalds!; // GABIM!)

P:after (përmbajtja: "Kthejeni Linusin" + "Torvalds!"; // kushtojini vëmendje "Torvalds!")

Një shembull i shtimit të vargjeve të shumta:

P:after (përmbajtja: "Destiny " + "njerëzimi" + "-" + "përsëritje."; )

Shtimi i vargjeve dhe numrave:

P:after ( përmbajtja: "Rekursion " + 2013 + " fati i qiellorëve"; )

shënim Vetia e përmbajtjes funksionon vetëm me pseudo-zgjedhësit :para dhe :after. Rekomandohet të mos përdorni përmbajtje në një dokument CSS, por ta përdorni atë drejtpërdrejt midis etiketave në HTML.

Deklaratat e kontrollit të rrjedhës

SCSS ka funksione (funksion()) dhe direktiva (@directive). Ne kemi parë tashmë një shembull funksioni pak më herët kur shikuam kalimin e argumenteve brenda mixins.

Funksionet zakonisht mbyllen në kllapa menjëherë pas emrit të tyre. Një direktivë fillon me simbolin @.

Ashtu si JavaScript, SCSS ju lejon të punoni me një grup standard të deklaratave të kontrollit të rrjedhës.

nëse ()

if() është një funksion (dhe nganjëherë baza e inteligjencës artificiale).

Përdorimi i tij duket mjaft primitiv: operatori do të kthejë një nga dy vlerat e treguara në gjendje.

/* Duke përdorur funksionin if() */ if (true, 1px, 2px) => 1px; nëse (false, 1px, 2px) => 2px;

@nëse

@if është një direktivë që përdoret për të degëzuar bazuar në një kusht.

/* Duke përdorur direktivën @if */ p ( @if 1 + 1 == 2 ( kufiri: 1px solid; ) @if 7< 5 { border: 2px dotted; } @if null { border: 3px double; } }

Rezultati i përpilimit:

P (kufi: 1px solid; )

Më poshtë është një pirun i kombinuar me shtimin e direktivës @else.

/* Krijo një variabël $type */ $type: river; /* Ngjyrosni kontejnerët blu nëse vlera për variablin $type është river */ div ( @if $type == river ( ngjyra: blu; ) ) /* Ngjyrat e kushtëzuara për tekstin në etiketë

*/ p ( @if $type == pemë ( ngjyra: jeshile; ) @else if $type == lumi (ngjyra: blu; ) @else nëse $type == papastërti (ngjyra: kafe; ) )

Kontrollimi për praninë e një elementi prind

Ampersand zgjedh elementin prind nëse ai ekziston. Përndryshe, do të kthehet null. Prandaj, mund të përdoret në lidhje me direktivën @if.

Në shembujt e mëposhtëm, ne do të shikojmë krijimin e stileve të kushtëzuara CSS në varësi të pranisë së një elementi prind.

/* Kontrollo nëse ekziston prindi */ @mixin do-parent-exist ( @if & ( /* Apliko blunë te prindi nëse ekziston */ &:hover (ngjyra: blu; ) ) @else ( /* Elementi prind mungon, aplikoni ngjyrën blu në lidhjet */ a (ngjyra: blu; ) )

@për direktivë

Direktiva @for nxjerr stilin e vendosur një numër të caktuar herë. Për çdo përsëritje, një variabël numërues përdoret për të ndryshuar daljen.

Direktiva @for përsëritet 5 herë.

@për $i nga 1 deri në 5 ( .definition-#($i) ( gjerësia: 10px * $i; ) )

Rezultati i përpilimit në CSS:

Definition-1 (gjerësia: 10px;) .definition-2 (gjerësia: 20px;) .definition-3 (gjerësia: 30px;) .definition-4 (gjerësia: 40px;) .definition-5 (gjerësia: 50px; )

@çdo direktivë

Direktiva @seach vendos $var për secilën nga vlerat e listës ose fjalorit dhe i jep stilet që përmban duke përdorur vlerën përkatëse të $var.

@secil $kafshë në platypus, luan, dele, pëllumb ( .#($animal)-icon ( background-image: url("/images/#($animal).png") ) )

Rezultati i përpilimit në CSS:

Platypus-icon ( background-image: url("/images/platypus.png"); ) .lion-icon (background-image: url("/images/lion.png"); ) .sheep-icon (background- imazh: url ("/images/sheep.png"); ) .dove-icon ( sfond-imazh: url ("/images/dove.png"); )

@while direktiva

Direktiva @while merr një shprehje SassScript dhe kalon nëpër stile të ndërlidhura ndërsa shprehja vlerësohet në true. Mund të përdoret për të krijuar sythe më komplekse sesa @for është i përshtatshëm, edhe pse rrallë nevojitet. Për shembull:

$indeksi: 5; @while $index > 0 ( .element-#($index) ( gjerësia: 10px * $index; ) $index: $index - 1; )

Rezultati i përpilimit:

Elementi-5 ( gjerësia: 50 px; ) .element-4 ( gjerësia: 40 px; ) .element-3 ( gjerësia: 30 px; ) .element-2 ( gjerësia: 20 px; ) .element-1 ( gjerësia: 10 px; )

Funksionet në Sass/SCSS

Duke përdorur Sass/SCSS mund të përdorni funksione njësoj si në gjuhët e tjera.

Le të krijojmë një funksion treqind-px() që kthen 300px.

@function three-hundred-px() ( @return 300px; ) .emri ( gjerësia: treqind-px(); kufiri: 1px gri e fortë; ekrani: bllok; pozicioni: absolute; )

Pas aplikimit të klasës .name, gjerësia e elementit do të jetë 300 piksele.

Funksionet në Sass mund të kthejnë çdo vlerë të vlefshme CSS dhe mund t'i caktohen çdo vetie. Ato madje mund të llogariten bazuar në argumentin e kaluar.

@function double($width) ( @return $width * 2; )

Trigonometria

Funksionet trigonometrike sin() dhe cos() gjenden shpesh si klasa të integruara në shumë gjuhë të tilla si JavaScript për shembull.

Puna e tyre ia vlen të studiohet nëse doni të zvogëloni kohën e shpenzuar për zhvillimin e animacioneve të ndërfaqes së përdoruesit, siç është krijimi i një pulsi. Nga rruga, ne tashmë po flasim për këtë në një nga artikujt. Por në këtë rast, do të jetë kod, jo një imazh gif i futur në një dokument HTML.

Këtu janë disa shembuj për krijimin e efekteve interesante të animacionit duke përdorur funksionin sin(), në të cilin sasia e kodit mbahet në minimum. Më pas mund ta shkallëzoni këtë njohuri për të krijuar elementë ndërveprues të ndërfaqes së përdoruesit (lëvizje rrethore, animacion me onde).

Avantazhi i përdorimit të trigonometrisë në kombinim me CSS është se nuk ka kërkesa shtesë HTTP, siç është rasti me imazhet gif.

Ju mund të shkruani funksione trigonometrike në Sass. Lexoni më shumë për këtë.

Shkrimi i funksioneve tuaja

Në trigonometri, shumë operacione bazohen në funksione. Secili funksion ndërtohet mbi tjetrin. Për shembull, funksioni rad() kërkon përdorimin e PI() . Funksionet cos() dhe sin() kërkojnë përdorimin e rad().

@function PI() ( @return 3.14159265359; )

Shkrimi i funksioneve në Sass/SCSS është shumë i ngjashëm me funksionet e shkrimit në gjuhë të tjera.

Duke përdorur funksionin pow():

@function pow ($number, $exp) ( $value: 1; @if $exp > 0 ( @për $i nga 1 deri në $exp ( $value: $value * $number; ) ) @else nëse $exp< 0 { @for $i from 1 through -$exp { $value: $value / $number; } } @return $value; }

Duke përdorur funksionin rad():

@function rad ($kënd) ( $unit: unit ($angle); $unitless: $angle / ($angle *0 + 1); //Nëse këndi është në gradë ("deg"), atëherë kthejeni atë në radian @if $unit == deg ( $unitless: $unitless / 180 * PI(); ) @return $unitless; )

Për të llogaritur tangjenten me funksionin tan(), duhet të përdorni funksionet sin() dhe cos().