Innhold
Denne artikkelen dukket først opp i nummer 225 av .net magazine - verdens mest solgte magasin for webdesignere og utviklere.
Responsiv webdesign er varm. Varmere enn slapp solbrenthet. Til tross for vinteren kaster den forsiktighet mot vinden og nipper ned den lokale iført Speedos forrige sesong. Det er et nytt blogginnlegg eller Twitter-debatt om emnet som dukker opp hvert minutt - og vi bør omfavne metodene og ta ansvar for de nye alternativene som for øyeblikket åpner for oss som webdesignere.
Hver nye webteknologi eller tankegang kommer med en læringskurve, men responsiv webdesign er basert i kjent område - CSS. Heldigvis for oss er det noen nye barn i byen med noen nye leker som hjelper oss.
CSS-forprosessorer som LESS og SASS tar forsetet og viser at det er plass til et mer dynamisk stilark. Variabler, mixins og funksjoner er nå tilgjengelige for oss, og ettersom nettet blir et mer flytende og enhetsagnostisk sted, kunne vi ikke vært i bedre selskap.
I denne opplæringen skal jeg vise deg noen av det grunnleggende i MINDRE dynamisk stilark-språk, og til slutt hvordan vi kan utnytte noe av dets større potensial for å påskynde etableringen av flytende oppsett. Vi gjør dette ved å bruke noen matematiske standardoperatører i stilarkene våre og la MINDRE gjøre det harde arbeidet med å gi oss løsningene. Tross alt ønsker ingen å kompromittere kaffehånden med en kalkulator, ikke sant?
Setter opp
Vi kommer til å hoppe over frokosten og gå rett til dessert med denne veiledningen - vi er tross alt her for MINDRE. For å gjøre oss klare har jeg laget en fin enkel HTML-side med et standard CSS-stilark som følger med. I filene finner du også tilknyttede bilder og skrifter.
Først må vi inkludere MINDRE JavaScript-filen på HTML-siden. Den siste versjonen (i skrivende stund) er inneholdt i opplæringsfilene, men sørg for å sjekke lesscss.org for oppdateringer. Vi har valgt denne metoden siden den er den mest enkle, men det er noen andre, mer robuste alternativer det er verdt å vurdere.
For å inkludere filen, legg til følgende kodelinje i HTML-en i hodet> kodene:
script src = "js / less-1.1.5.min.js" type = "text / javascript"> / script>
Vi må også oppdatere lenken til stilarket vårt for å vise at vi nå bruker en .mindre fil. Så husk å gjenspeile filstrukturen, og fortsett og rediger stilarkoblingen med noe slikt:
link rel = "stylesheet / less" href = "less / styles.less" />
Nå, tydeligvis er det en død lenke. Vi må skape vårt stiler. mindre fil. For å gjøre dette bare duplisere og gi nytt navn til vårt styles.css arkiver deretter. Hei presto, siden vår skal åpnes og gjengis nøyaktig den samme som den gjorde før.
Mixins
La oss bli sittende fast i å gjøre koden vår litt mer interessant med noen MINDRE tillegg. Først opp, og muligens den viktigste av LESSs eiendeler, er mixins. For å forklare, la oss se på følgende to CSS-erklæringer.
.meta {bredde: 130px; polstring: 10px 10px 15px 10px; margin: 0 20px 10px 0; klar: venstre; float: left;}. profil {bredde: 150px; margin: 0 20px 10px 0; klar: venstre; flyte: venstre;}
Det er tydelig at disse elementene deler noen av de samme egenskapene, og hvem skal si at vi ikke vil lage flere av disse elementene i vår layout? Jeg vet ikke om deg, men jeg vil gjerne lage meg en fin blanding for å pakke disse sammen. La oss gi det et semantisk opplagt navn også.
.float-box {margin: 0 20px 10px 0px; klar: venstre; flyte: venstre;}
Ta-da! Så hvordan bruker vi denne fancy nye blandingen? La oss se på de to forrige stilene våre, så viser jeg deg det.
.meta {... .float-box;}. profil {... .float-box}
Alt vi måtte gjøre var å fjerne de egenskapene som nå er inneholdt i mixin og legge til velgeren, nemlig . flyteboks, i deres sted. Lett.
Variabler
Dette blir bra, men du trenger mer kraft, ikke sant? Her er de gode tingene: MINDRE lar oss bruke variabler i stilarkene våre. De er et stykke kake å sette opp, så la oss lage en eller to. Egentlig føler jeg meg saig. La oss gå i tre.
@ fonts-serif: ‘Times New Roman’, Georgia, serif; @ fonts-sans: ‘BebasNeueRegular’, Helvetica, Arial, sans-serif; @ thick-black: 3px solid # 000;
I rekkefølge har jeg definert: en variabel for serif-skriftstakken min, en for sansserif-skriftene mine og til slutt en for en stil med kantlinjer som brukes i hele oppsettet. Som du kan se, er alt vi har måttet gjøre for å definere en variabel, gi den navnet med et forrige @ -symbol og følge den med et kolon og verdien vi vil tildele den. Vi kan nå erstatte noen av de samsvarende langformsdeklarasjonene med våre variabler slik.
.story h1 {... font-family: @ fonts-serif; kantbunn: @ tykk-svart;}
Parametriske mixins
Hold fast i hattene dine, det er endelig på tide å kombinere alt vi har lært til noe som kalles 'parametriske mixins'. Hvis du har opprettet funksjoner i JavaScript, ActionScript eller PHP før, vil ikke premissene her være utenlandske. Det som er uvanlig er å kunne skape disse gjenbrukbare, dynamiske bitene av magi i CSS. MINDRE, du er virkelig flott!
Vi startet denne opplæringen ved å kort nevne at MINDRE kan hjelpe matematikken til å skape en flytende layout. Lesere av Ethan Marcottes verk vil gjenkjenne ligningen bredde ÷ kontekst = resultat. Denne lille mengden matematikk gjør oss i stand til å gjøre pikselbaserte bredder til de prosentbaserte målingene vi trenger for en flytende webside. Her er et kort eksempel på litt HTML og CSS, som vi bruker matematikken for å gjøre den flytende:
seksjon> artikkel> /artikkel>/seksjon>.forelder {bredde: 200px;}. barn {bredde: 110px;}
For enkelhets skyld ber vi foreldreseksjonen om å fylle ut hva den inneholder i slik:
.parent {bredde: 100%;}
Så hva med barneartikkelen vår? For dette må vi få inn vår fancy ligning, og den første verdien vi trenger å etablere er vårt barns element kontekst. Vi er ute etter bredden på elementet som barneartikkelen vår sitter inne i - eller, faktisk, dens forelder. Her er det seksjonen .foreldre og verdien (før vi endret den til en prosentandel) er 200 px. Deretter trenger vi pikselverdien som barneartikkelen vår ville ha hvis det skulle være et fast oppsett - 110px i henhold til CSS. Her er matematikken:
110px ÷ 200px = 0,55
Veldig hyggelig, men vi må ta et siste skritt for å bruke det som en prosentandel i CSS, og det er å multiplisere det med 100:
0,55 x 100 = 55
La oss koble den til stilarket vårt og se hva vi får:
.forelder {bredde: 100%;}. barn {bredde: 55%;}
Flott, dette vil fungere som en godbit. Vi bruker imidlertid MINDRE, og kalkulatorene er for nerdene, ikke sant? Så la oss ta en titt på å lage en fin parametrisk miks for å ordne alt for oss. Jeg skal bare kaste det ut først, og så går vi gjennom det for en forklaring.
.width (@context, @target) {@percent: (@ target / @ context) * 100; bredde: `@ {percent} +"% "`};
La oss starte på toppen. Først må vi definere mixin-navnet vårt. Vi har valgt .bredde siden det er semantisk, og utvider standarden bredde eiendom i CSS. Så, som argumenter, har vi deklarert to variabler som er kjent basert på vår ligning. Inne i blandingen vår er det første vi har gjort å erklære en annen variabel - @ prosent - og tilordne hele ligningen som verdien. Ligningen vil bli løst når LESS-filen kompileres - og dette oppnås ved hjelp av variablene vi overfører til mixin. De @ prosent variabelen vil da bli erstattet uansett hvor den brukes i de følgende linjene i mixin med svaret på matematikken, i dette tilfellet prosentandelen beregnet fra våre argumenter.
Det siste vi gjør er å erklære standarden bredde CSS-egenskap etterfulgt av en kort kode som vil 'skrive ut' prosentverdien vår i riktig format med et vedlagt '%' -tegn. Syntaksen til denne endelige linjen, nemlig forrige tilde, rundt bakre flått og krøllete bukseseler rundt variabelnavnet, er viktig siden de lar variabelen analyseres riktig som en tekststreng i CSS.
Nå, dypt pust, alt vi trenger å gjøre for å bruke den fancy koden vår, er å erklære den i en annen CSS-klasse som vi gjorde med mixins. Vi gjør det med breddeverdiene i vårt forrige eksempel.
.parent {width: 100%;}. child {.width (200, 110);}
Nå, når vi laster inn HTML-en vår og siden er kompilert, vil den resulterende CSS (som vil bli plassert i hodet> av dokumentet vårt) ligner på dette:
.forelder {bredde: 100%;}. barn {bredde: 55%;}
Fantastisk. For å se dette i aksjon, la oss bruke det et sted i prosjektet vårt. Det første vi trenger å gjøre er å ta .bredde mixin og sett det et trygt sted. Siden det er et veldig gjenbrukbart stykke kode, la oss lage en ny mindre fil sammen med våre andre og gi den et navn. Jeg ringer til meg responsive_mixins.less. For å bruke dette i mine andre MINDRE prosjektstilark, er alt jeg trenger å bruke følgende kodelinje:
@import "responsive_mixins.less";
Hold den øverst i MINDRE filen for dette prosjektet, så er du klar. La oss nå bruke den på et av elementene våre. Min stemme er profilbildet. Alt for? God. Vår pikselbredde for bildeelementet er 150 px, og konteksten er side element, som har en bredde på 600 px, så koden vår vil se omtrent slik ut:
.profil {.width (600, 150); ...}
Det er ganske enkelt, og vi kan rulle det ut på de andre elementene i markeringen vår, men hva med marginer? Jeg tror vi også vil at de skal bøye seg med utformingen vår, så la oss lage en mixin for det.
.margin (@context, @top, @right, @bottom, @left) {@ topp prosent: (@ top / @ context) * 100; @ høyre prosent: (@ høyre / @ kontekst) * 100; @ bunnprosent: (@ bunn / @ kontekst) * 100; @ venstre prosent: (@ venstre / @ kontekst) * 100; margin: `@ {topp-prosent} +"% "+ @ {høyre-prosent} +"% "+ @ {bunnprosent} +"% "+ @ {venstre-prosent} +"% "`;}
Litt mer å se på her, men det bør være fornuftig gitt vår forrige blanding. Denne gangen gir vi inn verdiene for marginer på hver side av elementet vårt. Vi bruker den samme ligningen for å gjøre matematikken, og spytter deretter ut en standard CSS-egenskap med resultatene. La oss prøve det ved å beregne marginene oppgitt i vår . flyteboks mixin. Det stemmer, en mixin i en mixin. Her går:
.float-box {.margin (600, 0, 20, 10, 0); ...}
Godt jobba! Nå, sist av alt, polstring. Dette er enkelt nok; vi tar bare marginblandingen og erstatter ordet polstring. Jobben er gjort! Det er mer å hente her, siden vi vet at standard vanilje CSS gjør det mulig for oss å erklære marginer og polstring som separate egenskaper for hver side av et element. Jeg lar deg finne ut av dette skjønt - eller du kan kikke i de ferdige prosjektfilene og finne løsningen der. Uansett er du nå godt på vei til raskere væskeoppsett med MINDRE.
