RekenaarsProgrammering

Voorverwerker CSS: oorsig, seleksie, aansoek

Absoluut alles ervare web ontwerpers gebruik die voorverwerker. Daar is geen uitsonderings. As jy wil om suksesvol te wees in hierdie aktiwiteit, moenie vergeet om oor hierdie programme. Met die eerste oogopslag, kan hulle 'n beginner stil horror veroorsaak - dit is ook soortgelyk aan die ontwikkeling! In feite, kan jy gaan met al die eienskappe van CSS voorverwerker vir sowat 'n dag, en as jy probeer, dan 'n paar uur. In die toekoms, sal hulle aansienlik vereenvoudig jou lewe.

Hoe het CSS voorverwerker

Om beter te verstaan die eienskappe van hierdie tegnologie, kortliks te delf in die geskiedenis van die visuele aanbieding van webblaaie.

Wanneer net die massiewe gebruik van die Internet begin het, het geen style sheets nie bestaan nie. Uitvoering van dokumente afgehang geheel en al op die leser. Elkeen van hulle het hul eie style, wat gebruik is vir die behandeling van sekere tags. Gevolglik is die bladsye lyk anders, afhangende van die volgorde waarin die leser jy dit oopmaak. Die gevolg - die chaos, verwarring, probleme vir ontwikkelaars.

In 1994, Noorse wetenskaplike Håkon Lê ontwikkel 'n stylblad wat gebruik kan word vir die voorkoms van die bladsye apart van die HTML-dokument. Die idee priglanulas lede van die W3C, wat onmiddellik uit tot voltooiing te stel. 'N Paar jaar later gepubliseer hy 'n eerste weergawe van die CSS spesifikasie. Dan is sy voortdurend verbeter, gefinaliseer ... Maar die konsep gebly almal dieselfde: elke styl stel sekere eienskappe.

Met behulp van CSS tafels was nog altyd problematies. Byvoorbeeld, web ontwerpers het dikwels probleme met sortering en groepering funksies, en erfenis is nie so eenvoudig nie.

En dan kom die 2000. Merke toenemend begin om betrokke te raak in professionele front-end ontwikkelaars, wat is belangrik om buigsaam en dinamies werk style wees. Bestaan het ten tyde geëis CSS voorvoegsels plasing en die dop van ondersteuning die nuwe moontlikhede van die leser. Dan, deur JavaScript, en Ruby kenners het tot besigheid, die skep van 'n voorverwerker - bobou vir CSS, is nuwe funksies bygevoeg.

CSS vir Beginners: voorverwerker funksies

Hulle het 'n paar funksies:

  • verenig leser voorvoegsels en kakie;
  • sintaksis te vereenvoudig;
  • gee die geleentheid om te werk met geneste keurders sonder foute;
  • verbeter logika stilering.

In kort: die voorverwerker voeg CSS programmering logika vermoëns. Nou, is stilering nie uitgevoer in die gewone lys van style en met 'n paar eenvoudige tegnieke en benaderings: veranderlikes, funksies, hagfish, siklusse voorwaardes. Daarbenewens het die vermoë om wiskunde te gebruik.

Sien die gewildheid van hierdie byvoeging ins, die W3C het begin om geleidelik voeg die moontlikheid van hulle in die CSS-kode. Byvoorbeeld, in die spesifikasie so daar calc () funksie, wat ondersteun word deur baie blaaiers. Daar word verwag dat binnekort sal dit moontlik wees om veranderlikes te stel en 'n hagfish. Dit sal egter gebeur in die verre toekoms, en preprocessors reeds hier en reeds goed werk.

Gewilde preprocessors CSS. Sass

Ontwerp in 2007. Oorspronklik 'n komponent Haml - 'n sjabloon HTML. Nuwe funksies vir CSS elemente beheer gekruid ontwikkelaars op die Ruby on Rails, wat begin om dit oral versprei. Die Sass 'n groot aantal van die funksies wat nou ingesluit in enige voorverwerker: veranderlikes, inbedding van keurders, hagfish (dan egter hierdie argumente kan nie bygevoeg word).

Verklaar veranderlikes in Sass

Veranderlikes verklaar met die $ teken. Hulle kan hul eiendomme en stelle te handhaaf, byvoorbeeld: "$ borderSolid: 1px solid rooi;". In hierdie voorbeeld, ons verklaar dat 'n veranderlike genoem borderSolid en gered dit waardeer 1px solid rooi. Nou, as in die CSS wat ons nodig het om 'n rooi grens breedte van 1px skep, dui eenvoudig dat veranderlike na die naam eiendom. Na die aankondiging van die veranderlikes nie verander kan word. Daar is 'n hele paar ingeboude funksies. Byvoorbeeld, verklaar 'n veranderlike met 'n waarde van $ redcolor # FF5050. Nou, in die CSS-kode in die eienskappe van 'n element, gebruik dit om die font kleur te stel: p {kleur: $ redColor; }. Wil jy om te eksperimenteer met die kleur? Gebruik funksie Verdonker of verlig. Dit is so gedoen: p {kleur: donkerder ($ redColor, 20%); }. As gevolg hiervan, sal die kleur redColor 20% ligter wees.

Die Sass baie ingeboude funksies. Die moeite werd om hulle ten minste lees, maar beter - om te leer.

nes

Voorheen het om nes te dui moes 'n lang en ongemaklike ontwerp gebruik. Stel jou voor dat ons 'n div, wat is p, en in dit, op sy beurt, stel span. Vir die div, moet ons die fontkleur stel rooi, vir p - geel, vir die span - pienk. In 'n tipiese CSS dit soos volg sal gedoen word:

div {

Rooi;

}

div p {

kleur: geel,

}

div p span {

Pienk;

}

Met CSS voorverwerker al makliker en meer kompak:

div {

Rooi;

p {

kleur: geel,

.span {

Pienk;

}

}

}

Elemente letterlik "belê" mekaar.

voorverwerker voorskrifte

Die gebruik van @import voorskrifte kan lêers in te voer. Byvoorbeeld, ons het fonts.sass lêer wat die style vir fonts verklaar. Verbind dit aan die hoof lêer style.sass: @import 'fonts. Gedoen! In plaas van 'n enkele groot lêer met die style wat ons het 'n paar wat gebruik kan word vir 'n vinnige en maklike toegang tot die vereiste eienskappe.

hagfish

Een van die mees interessante idees. Dit laat 'n reël om 'n stel van eiendomme vra. Werk soos volg:

@mixin largeFont {

font-family: 'Times New Roman ";

font-size: 64px;

lyn-hoogte: 80px;

font-weight: bold;

}

Hagfish om aansoek te doen om die element op die bladsy, gebruik die richtlijn @include. Byvoorbeeld, ons wil dit van toepassing is op die H1 kop. Ons het die volgende struktuur: H1 {@include: largeFont; }

Al die eienskappe van hagfish is 'n h1 element toegeken.

voorverwerker Minder

Sintaksis Sass herinner programmering. As jy op soek is na 'n opsie wat meer geskik is vir beginners studeer CSS, kyk vir Minder. Dit is geskep in 2009. Die belangrikste kenmerk - ondersteuning vir CSS moedertaal sintaksis, so onbekend is met programmering Imposer dit sal makliker wees om te leer.

Die veranderlikes verklaar word met behulp van die @ simbool. Byvoorbeeld: @fontSize: 14px;. Nes werke op dieselfde beginsels as in Sass. .largeFont () {font-family:: Hagfish is soos volg aangekondig 'Times New Roman "; font-size: 64px; lyn-hoogte: 80px; font-weight: bold; }. Om 'n verbinding is dit nie nodig om voorverwerker riglyne gebruik - voeg net die nuutgeskepte hagfish in die eienskappe van die gekose element. Byvoorbeeld: h1 {.largeFont; }.

Stylus

Nog 'n voorverwerker. Geskep in 2011 deur dieselfde outeur, wat die wêreld die Jade, Express en ander nuttige produkte het.

Veranderlikes verklaar kan word op twee maniere - hetsy uitdruklik of implisiet. Byvoorbeeld: font = 'Times New Roman "; - 'n implisiete opsie. Maar $ font = 'Times New Roman "- duidelik. Hagfish verklaar en implisiet verbind. Die sintaksis is soos volg: redColor () kleur rooi. Nou kan ons die item by te voeg, byvoorbeeld: h1 redColor ();.

Stylus op die eerste oogopslag mag dit onverstaanbaar lyk. Waar is die "inheemse" tussen hakies en kommapunte? Maar dit nodig om te duik in dit, al word baie duideliker. Onthou egter dat die langtermyn ontwikkeling van hierdie voorverwerker kan "speen" jy die klassieke CSS sintaksis te gebruik. Dit veroorsaak soms probleme wanneer om te werk met 'n "suiwer" styl.

Wat voorverwerker kies?

Trouens, dit is ... dit maak nie saak. Alle weergawes bied oor dieselfde funksies net die sintaksis van elkeen is anders. Ons beveel soos volg voort te gaan:

  • As jy - programmeerder en wil om te werk met style beide in kode, gebruik die Sass;
  • as jy - 'n kodeerder en wil om te werk met style soos met die konvensionele uitleg, aandag te gee aan die minder;
  • as jy wil minimalisme, gebruik die Stylus.

Vir alle variante van 'n eindelose aantal interessante biblioteke wat nog verder kan vereenvoudig ontwikkeling. Gebruikers Sass aanbeveel om aandag te skenk aan die Compass - 'n kragtige instrument met baie ingeboude funksies. Byvoorbeeld, nadat jy dit installeer jy sal nooit hoef te bekommer oor die verkoper weergawe voorvoegsel. Vereenvoudig werk met roosters. Daar is gereedskap vir die werk met blomme, sprites. 'N Reeks reeds aangekondig hagfish. Gee hierdie instrument 'n paar dae - dus sal jy 'n baie tyd en moeite spaar in die toekoms.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 af.unansea.com. Theme powered by WordPress.