Preprocessor CSS: trosolwg, dewis, cymhwyso

Hollol holl ddylunwyr gwe profiadol yn defnyddio'r Preprocessor. Nid oes unrhyw eithriadau. Os ydych am lwyddo yn y gweithgaredd hwn, peidiwch ag anghofio am y rhaglenni hyn. Ar yr olwg gyntaf, efallai y byddant yn achosi arswyd dawel newyddian - mae'n rhy debyg i'r raglennu! Yn wir, gallwch ddelio â holl nodweddion Preprocessor CSS am tua diwrnod, ac os ydych yn ceisio, yna ychydig o oriau. Yn y dyfodol, bydd yn symleiddio eich bywyd yn sylweddol.

Sut wnaeth CSS Preprocessor

Er mwyn deall nodweddion y dechnoleg hon yn well, ymchwilio yn fyr i hanes y cyflwyniad gweledol tudalennau Gwe.

Pan mai dim ond newydd ddechrau y defnydd enfawr y Rhyngrwyd, nid oes unrhyw dalennau arddull yn bodoli. Cyflawni dogfennau yn dibynnu'n llwyr ar y porwr. Mae pob un ohonynt wedi cael eu harddulliau eu hunain, sydd wedi cael eu defnyddio ar gyfer trin rhai tagiau. Yn unol â hynny, mae'r tudalennau yn edrych yn wahanol yn dibynnu ar y drefn y mae'r porwr ydych yn eu hagor. Y canlyniad - yr anhrefn, dryswch, problemau ar gyfer datblygwyr.

Yn 1994, datblygodd gwyddonydd Norwyeg Håkon Gorweddwch dalen arddull y gellid ei ddefnyddio ar gyfer y ymddangosiad y tudalennau ar wahân i'r HTML-ddogfen. Mae'r priglanulas syniad aelodau o'r W3C, a oedd yn union yn mynd ati i gwblhau. Ychydig flynyddoedd yn ddiweddarach cyhoeddodd fersiwn cyntaf y fanyleb CSS. Yna cafodd ei gwella'n gyson, cael ei gwblhau ... Ond mae'r cysyniad yn aros gyd yr un fath: pob arddull yn gosod eiddo penodol.

Gan ddefnyddio tablau CSS bob amser wedi bod yn broblem. Er enghraifft, yn aml roedd gan ddylunwyr gwe problemau gyda didoli a grwpio nodweddion, ac nid yw etifeddiaeth mor syml.

Ac yna daeth y 2000eg. Marciau yn gynyddol dechreuodd i gymryd rhan mewn ddatblygwyr pen-blaen proffesiynol, sy'n bwysig bod yn arddulliau gwaith hyblyg a deinamig. Bodoli ar y lleoliad pryd mynnu rhagddodiaid CSS ac olrhain cefnogaeth galluoedd newydd y porwr. Yna, gan JavaScript, ac arbenigwyr Ruby got i lawr i fusnes, gan greu Preprocessor - aradeiledd gyfer CSS, nodweddion newydd yn cael eu hychwanegu ato.

CSS i Ddechreuwyr: Nodweddion Preprocessor

Mae ganddynt sawl swyddogaeth:

• uno rhagddodiaid porwr a caci;

• symleiddio cystrawen;

• rhoi cyfle i weithio gyda dewiswyr nythu heb wallau;

• gwella steilio rhesymeg.

Yn fyr: y Preprocessor yn ychwanegu CSS galluoedd rhesymeg rhaglennu. Nawr, nid steilio yn perfformio yn y rhestr arferol o arddulliau a gydag ychydig o dechnegau a dulliau syml: newidynnau, swyddogaethau, hagfish, cylchoedd amodau. Yn ogystal, mae'r gallu i ddefnyddio mathemateg.

Mae gweld y poblogrwydd y rhain adia-ins, y W3C wedi dechrau i ychwanegu yn raddol y posibilrwydd ohonynt yn y cod CSS. Er enghraifft, yn y fanyleb felly mae swyddogaeth Calc (), sy'n cael ei gefnogi gan lawer o borwyr. Disgwylir y cyn bo hir bydd yn bosibl i osod newidynnau a chreu hagfish. Fodd bynnag, bydd hyn yn digwydd yn y dyfodol pell, a preprocessors eisoes yma ac eisoes yn gweithio'n dda.

preprocessors Poblogaidd CSS. Sass

Cynlluniwyd yn 2007. Yn wreiddiol yn elfen Haml - templed HTML. Nodweddion newydd ar gyfer elfennau CSS rheoli datblygwyr cael blas ar y Ruby acha Chledrau, a ddechreuodd i ledaenu ei ym mhob man. Mae'r Sass nifer enfawr o nodweddion sy'n bellach yn cael eu cynnwys mewn unrhyw Preprocessor: newidynnau, ymgorffori o ddetholwyr, hagfish (yna, fodd bynnag, y dadleuon hyn ni ellir ychwanegu).

Datgan newidynnau yn Sass

Newidynnau a ddatganwyd gyda'r arwydd $. Gallant gynnal eu heiddo ac yn gosod, er enghraifft: "$ borderSolid: coch solet 1px;". Yn yr enghraifft hon, rydym yn datgan newidyn enw borderSolid ac arbed ei fod yn gwerthfawrogi goch 1px solid. Yn awr, os yn y CSS mae angen i ni greu lled border coch o 1px, yn syml yn dangos bod newidyn ar ôl yr enw eiddo. Ar ôl y cyhoeddiad am y newidynnau ni ellir ei newid. Mae yna nifer o swyddogaethau a adeiledig yn. Er enghraifft, yn datgan newidyn gyda gwerth o $ redcolor # FF5050. Yn awr, yn y cod CSS yn yr eiddo unrhyw elfen, ei ddefnyddio i osod y lliw ffont: p {lliw: $ redColor; }. Ydych chi eisiau arbrofi gyda lliw? Defnyddiwch tywyllu swyddogaeth neu ysgafnhau. Gwneir hyn er mwyn: p {lliw: tywyllu ($ redColor, 20%); }. O ganlyniad, bydd y redColor lliw fod 20% yn ysgafnach.

Mae'r Sass llawer adeiledig yn swyddogaethau. Werth o leiaf yn eu darllen, ond yn well - i ddysgu.

nythu

Yn flaenorol, i ddangos nythu gorfod defnyddio dyluniad hir ac yn anghyfforddus. Dychmygwch bod gennym div, sy'n p, ac ynddo, yn ei dro, rhychwant a osodwyd. Ar gyfer y div, mae angen i osod y lliw ffont coch, er p - melyn, ar gyfer y rhychwant - pinc. Mewn CSS nodweddiadol byddai'n cael ei wneud fel a ganlyn:

div {

lliw: coch;

}

div p {

lliw: melyn;

}

span div p {

lliw: pinc;

}

Gyda Preprocessor CSS holl dod yn haws ac yn fwy cryno:

div {

lliw: coch;

p {

lliw: melyn;

.span {

lliw: pinc;

}

}

}

Elfennau llythrennol "buddsoddi" gilydd.

cyfarwyddebau Preprocessor

Gan ddefnyddio cyfarwyddebau @import gall mewnforio ffeiliau. Er enghraifft, mae gennym ffeil fonts.sass sy'n datgan y arddulliau ar gyfer ffontiau. Cysylltu i'r prif style.sass ffeil: 'ffontiau' @import. Done! Yn hytrach na ffeil fawr sengl gyda'r arddulliau mae gennym ychydig y gellir ei ddefnyddio ar gyfer mynediad cyflym a hawdd i eiddo gofynnol.

hagfish

Un o'r syniadau mwyaf diddorol. Mae'n caniatáu i un llinell i ofyn set o eiddo. Gweithredu fel a ganlyn:

@mixin largeFont {

font-deulu: 'Times New Roman ";

font-size: 64px;

llinell-uchder: 80px;

font-pwysau: beiddgar;

}

Hagfish i wneud cais i'r elfen ar y dudalen, defnyddiwch y @include gyfarwyddeb. Er enghraifft, rydym am wneud cais i'r pennawd h1. Mae gennym y strwythur canlynol: H1 {@include: largeFont; }

Mae'r holl eiddo o hagfish yn cael eu neilltuo yn elfen h1.

Preprocessor Llai

Cystrawen Sass yn cofio rhaglennu. Os ydych yn chwilio am opsiwn sy'n fwy addas ar gyfer dechreuwyr sy'n astudio CSS, chwiliwch am Lai. Cafodd ei greu yn 2009. Y brif nodwedd - cymorth ar gyfer CSS cystrawen frodorol, felly anghyfarwydd â'r Imposer rhaglennu bydd yn haws i ddysgu.

Mae'r newidynnau yn cael eu datgan gan ddefnyddio'r symbol @. Er enghraifft: @fontSize: 14px;. gwaith nythu ar yr un egwyddorion ag yn Sass. Hagfish yn cael eu cyhoeddi fel a ganlyn: .largeFont () {font-deulu: 'Times New Roman "; font-size: 64px; llinell-uchder: 80px; font-pwysau: beiddgar; }. I gysylltu nid oes angen i ddefnyddio cyfarwyddebau Preprocessor - dim ond ychwanegu y hagfish sydd newydd ei chreu yn yr eiddo yr elfen dethol. Er enghraifft: h1 {.largeFont; }.

stylus

Preprocessor arall. Crëwyd yn 2011 gan yr un awdur, a roddodd y byd y Jade, Express a chynhyrchion defnyddiol eraill.

Gellir Newidynnau cael ei ddatgan mewn dwy ffordd - naill ai'n amlwg neu'n ymhlyg. Er enghraifft: font = 'Times New Roman "; - opsiwn ymhlyg. Ond $ font = 'Times New Roman' - yn glir. Hagfish cael eu datgan ac yn gysylltiedig yn ymhlyg. Mae'r gystrawen fel a ganlyn: redColor () lliw coch. Nawr gallwn ychwanegu yr eitem, er enghraifft: redColor h1 ();.

Stylus ar yr olwg gyntaf gall ymddangos yn annealladwy. Ble mae'r cromfachau a'r hanner colon "brodorol"? Ond mae angen i blymio i mewn iddo, pob yn dod yn llawer cliriach. Cofiwch, fodd bynnag, y gall datblygiad tymor hir y Preprocessor hwn "diddyfnu" chi'n defnyddio'r gystrawen CSS clasurol. Mae hyn weithiau achosi problemau wrth orfod gweithio gyda "pur" arddull.

Pa Preprocessor yn dewis?

Yn wir, mae'n ... does dim ots. Mae pob fersiwn yn cynnig am yr un nodweddion yn unig y gystrawen o bob un yn wahanol. Rydym yn argymell i symud ymlaen fel a ganlyn:

• os ydych yn - rhaglennydd ac yn awyddus i weithio gydag arddulliau o ran cod, defnyddiwch y Sass;
• os ydych yn - yn godiwr ac yn awyddus i weithio gydag arddulliau fel gyda'r cynllun confensiynol, yn talu sylw at y Llai;
• os ydych yn hoffi minimaliaeth, defnyddiwch y Stylus.

Ar gyfer yr holl amrywiadau o nifer diddiwedd o lyfrgelloedd diddorol sy'n gallu symleiddio datblygiad hyd yn oed ymhellach. Defnyddwyr yn argymell Sass i dalu sylw at y Cwmpawd - arf pwerus gyda llawer o nodweddion adeiledig yn. Er enghraifft, ar ôl i chi osod fydd byth yn rhaid i chi boeni am y rhagddodiad fersiwn gwerthwr. Symleiddio yn gweithio gyda gridiau. Mae offer ar gyfer gweithio gyda blodau, sprites. Mae ystod eisoes wedi cyhoeddi hagfish. Rhoi offeryn hwn ychydig o ddyddiau - felly byddwch yn arbed llawer o amser ac ymdrech yn y dyfodol.