Share
I denne opplæringen skal vi bygge et enkelt, responsivt rutenettsystem ved hjelp av CSS. Når vi er kjent med hvordan det fungerer, forbedrer vi det med Sass, og lærer noen kjernevirksomheter på Sass.
La oss raskt undersøke hva vårt gridsystem vil se ut. Det finnes smartere måter å bygge grids på, de som er mindre påtrengende på oppslaget som trengs, men dette rutenettet gir oss en flott mulighet til å praktisere enkle, men nyttige Sass-teknikker. Den bruker ett innpakningselement, så andre elementer i det som fungerer som rader, så flere elementer i de som fungerer som våre kolonner.
Litt trippy, men du får ideen ... Til å begynne med er alt vi trenger, en CSS-fil, så åpne et nytt dokument i kodeditoren og kaller det "grid.css".
Det første vi skal legge til er en global reset- og boksestørrelsesregel. Dette vil sørge for at polstring brukt på elementene våre er lagt til innenfor deres beregnede dimensjoner, noe som gir oss langt mer frihet til å definere kolonnebredder.
*, *: etter, *: før margin: 0; polstring: 0; -webkit-boks-størrelse: border-box; -moz-box-size: border-box; boks-størrelse: border-box;
Deretter legger vi til en regel for å sikre at eventuelle bilder som brukes oppfører seg fluidly.
img bredde: auto; maksimal bredde: 100%; høyde: auto! viktig;
Nå er det noen regler for å sikre at vår wrapper-element oppfører sig.
.wrapper bredde: 100%; margin: 0 auto;
Merk: Husk at vi jobber mobil først. Vår container starter ut på 100% visningsbredde, men vi endrer det for større skjermer.
Alle våre radelementer gjør at det inneholder kolonnene, og sørger for at grupper med kolonner sletter hverandre riktig. La oss legge til noe generelt .clearfix Regler til vår wrapper og radelementer.
.wrapper: etter, .row: etter innhold: ""; skjerm: bord; klare: begge;
Merk: Vi trenger ikke å nevne disse elementene .wrapper, .rad og .kolonne, Vi kan være mye mer kreative enn det. Disse navnene er bare veldig klare for denne veiledningens formål.
Vi skal ha en rekke kolonne klasser, avhengig av størrelsen på hver enkelt (for eksempel .kolonne-1 og .kolonne-6. La oss bruke en attributtvelger til å målrette og stil alle disse på en gang.
[class * = 'column-'] float: left; polstring: 1em; bredde: 100%; min høyde: 1px;
Denne velgeren sier; ta ethvert element hvis klasse inneholder strengen kolonne- og bruk følgende stiler. Derfor vil alle våre kolonneelementer flyte til venstre, vil ha en polstring av 1em (dette danner vår renner og litt vertikal plass) og fyller 100% av visningsbredden (igjen, vi jobber mobil først her). Til slutt, Min høyde: 1px sørger for at kolonnen vises riktig, selv om den ikke har noe innhold.
Tro det eller ei, vi har nå oss et rutenett! Følgende oppføring er alt vi trenger.
Vi kan bruke en hvilken som helst kombinasjon av kolonner innenfor rader, ta en titt på demoen for å se hva du bør ha.
Dette skjermbildet viser flere flere kolonner enn i utsnittet ovenfor Det er vår mobile visning tatt vare på, nå la oss legge til en medieforespørsel for å gi oss et annet layout for større skjermer. Du må bestemme bruddpunkter for ditt eget rutenett, men vi skal bruke et vilkårlig bruddpunkt på 30em.
@media bare skjerm og (min bredde: 30em)
Eventuelle stiler vi legger inn i denne mediequesten, får virkning på skjermbilder på 30em og større. Vi bruker dette punktet til å dele opp våre kolonner i riktig bredde.
Hvor bred skal hver kolonne være? Det avhenger av hvor mange kolonner vi har. For denne demonstrasjonen skal jeg jobbe med tolv kolonner, så hver skal være nøyaktig en tolvte (1/12) av omslaget. For en kolonne som strekker seg over to bredder, vil det bli to tolvte, og så videre. Her er det som gir oss:
@media bare skjerm og (min bredde: 30em) .wrapper bredde: 95%; maksimal bredde: 65em; .column-1 width: 8.33333%; .column-2 width: 16.66667%; .column-3 width: 25%; .column-4 width: 33.33333%; .column-5 width: 41.66667%; .column-6 bredde: 50%; .column-7 width: 58.33333%; .column-8 width: 66.66667%; .column-9 bredde: 75%; . kolonne-10 bredde: 83.33333%; .column-11 width: 91.66667%; .column-12 bredde: 100%;
Du vil også se at vi har laget .wrapper element mindre enn skjermens full bredde og gitt den a max bredde. Ta en titt på hva som er gjort i vårt rutenett.
Du vil sannsynligvis velge mer passende polstring i ditt eget rutenett Vårt CSS-nett fungerer, men hva ville skje hvis vi egentlig ønsket seksten kolonner i vårt rutenett? Eller enda mer? Vi må omberegne hver kolonne og oppgi den manuelt i vår CSS-fil hver gang. For ikke å nevne at vår CSS ville bli lengre og lengre og vanskeligere å administrere. Heldigvis kan Sass (eller annen forprosessor) hjelpe oss.
Denne opplæringen handler ikke om å sette opp Sass, det forutsetter at du allerede vet hvordan du gjør det. Hvis det ikke er tilfelle, og du må få ting i gang, ta en titt på Mastering Sass: Leksjon 1, eller SASS og Kompass for webdesignere: Introduksjon.
Når du har et Sass prosjektoppsett, dykk inn i neste trinn.
Sass skal hjelpe oss med å rydde opp CSS på alle måter, men det første vi kan gjøre er å trekke ut noen nyttige verdier og lagre dem i variabler. Begynn med å starte en ny delvis kalt "_variables.scss"; en Sass-fil som ikke blir kompilert direkte til CSS, men vi refererer til i våre andre filer.
// gridvariabler $ grid-kolonner: 12; $ grid-maksimal bredde: 65em; // breakpoints $ breakpoint-small: "bare skjerm og (min-bredde: 20em)"; $ breakpoint-medium: "bare skjerm og (min-bredde: 30em)";
Disse variablene gir oss mengden av kolonner vi vil jobbe med; 12 for øyeblikket, men kan lett bli endret til 16, kanskje 32 (hva du vil egentlig). Vi har også lagret noen bruddpunkter i variabler som strenger, selv om vi bare bruker en for øyeblikket.
Vi bruker disse snart, men først vil vi sette opp noen mixins.
Sass mixins er kodenheter som vi kan definere en gang og deretter gjenbrukes andre steder i prosjektet vårt. For eksempel kan vi ta det aller første settet med regler der vi konfigurerer border-box og trekk det meste ut i en mixin. Vi starter med:
*, *: etter, *: før margin: 0; polstring: 0; -webkit-boks-størrelse: border-box; -moz-box-size: border-box; boks-størrelse: border-box;
Da trekker vi ut en del av det som vi kan gjenbruke, definerer en mixin som jeg har kalt "border-box" slik:
@mixin border-box -webkit-box-size: border-box; -moz-box-size: border-box; boks-størrelse: border-box;
Da vi @importere våre variabler og blander inn i hovedgrid.scss, ved hjelp av mixin med en @inkludere uttalelse.
@import "variabler"; @import "mixins"; *, *: etter, *: før margin: 0; polstring: 0; @include border-box;
Vi kan gjøre en lignende ting med clearfix-reglene, som foreslått av Sebastian Ekström. I dette tilfellet tar vi clearfix-reglene anbefalt av Nicolas Gallagher og legger dem til vår mixin-fil med a plassholdervelger (%):
% clearfix * zoom: 1; &: før, &: etter innhold: ""; skjerm: bord; &: etter clear: both;
Med plassholdervelgeren kan vi definere hele stykker stil som bare får utgang når vi strekker dem andre steder, slik som dette:
.wrapper, .row @extend% clearfix;
Når de er sammensatt, ser de så fine linjene Sass ut som dette:
.wrapper, .row * zoom: 1; .wrapper: før, .row: før, .wrapper: etter, .row: etter innhold: ""; skjerm: bord; .wrapper: etter, .row: etter clear: both;
La oss gjøre bruk av noen av de variablene vi har satt opp, skal vi? Til å begynne med kan vi bytte ut max bredde verdi på omslaget. Dette:
.wrapper bredde: 95%; maksimal bredde: 65em;
blir dette:
.wrapper bredde: 95%; maksimal bredde: $ grid-maksimal bredde;
La oss nå gjøre det samme med vår media spørring. Dette:
@media bare skjerm og (min bredde: 30em)
vil bli forbedret med vår $ Stoppunkt-medium variabel:
@media # $ breakpoint-medium
Merk: Vi ser at vi har pakket inn vår variabel i # . Dette kalles interpole. Dette gjøres vanligvis hvis vi trenger å utstede en variabel i en annen, men det er nødvendig i dette tilfellet fordi Sass-kompilatoren reiser over medieforespørsler hvis @media er ikke direkte etterfulgt av braces (). Du kan lese mer om dette i Hugo Giraudels Alt du trenger å vite om Sass Interpolation.
Å bruke vår endelige variabelen, $ grid-kolonner, Vi må gjøre bruk av noe mer Sass funksjonalitet; løkker.
Definisjonene av kolonnebredde er alle nøyaktig de samme, bortsett fra de faktiske verdiene. Det vil bli langt renere hvis vi skriver ut en kolonnevarsjon for så mange kolonner som vi trenger, og endrer verdiene hver gang. For å gjøre dette kan vi bruke en Sass @til sløyfe, som ser slik ut:
@for $ i fra 1 til 12 // looped content
Dette vil sløyfe over 12 iterasjoner, og hver gang verdien av $ i vil gjenspeile den sløyfen. Vi kan sende ut $ i som dette:
@for $ i fra 1 til 12 .column - # $ i
Igjen, vil du legge merke til at vi bruker # rundt $ i å utføre verdien som en streng som vi legger til i .kolonne- velgeren. Dette gir oss følgende når de er samlet:
.kolonne-1 .column-2 .column-3 .column-4 .column-5 .column-6 .column-7 .column-8 .column- 9 .column-10 .column-11 .column-12
Strålende! La oss nå bruke noen beregninger for å skrive ut de riktige stilene i disse velgerne.
Vi har det bra, men vi må nå sende ut noe som følgende for hver velger:
.kolonne-5 bredde: 41,66667%;
Den kolonnebredden er beregnet som 100% dividert med totalt antall kolonner, multiplisert med kolonnnummeret. I dette tilfellet 100% / 12 * 5 = 41,66667%. Det er derfor beregningen vi må søke, bytte ut de relevante verdiene for variabler.
@for $ i fra 1 til 12 .column - # $ i bredde: 100% / 12 * $ i;
Sass utfører nå beregningene for oss, og gir oss følgende:
.kolonne-1 bredde: 8.33333%; .column-2 width: 16.66667%; .column-3 width: 25%; .column-4 width: 33.33333%; .column-5 width: 41.66667%; .column-6 bredde: 50%; .column-7 width: 58.33333%; .column-8 width: 66.66667%; .column-9 bredde: 75%; . kolonne-10 bredde: 83.33333%; .column-11 width: 91.66667%; .column-12 bredde: 100%;
Som en siste bit å rydde opp, kan vi bruke $ grid-kolonner variabel, i stedet for verdien 12:
@for $ i fra 1 til $ grid-kolonner .column - # $ i bredde: 100% / $ grid-kolonner * $ i;
Nå, hvis vi ønsker å endre antall kolonner, endrer vi bare variabelen og beregningene vil alle bli gjort for oss! For eksempel, endring $ grid-kolonner til 4 gi oss følgende CSS:
@media bare skjerm og (min bredde: 30em) .wrapper bredde: 95%; maksimal bredde: 65em; .column-1 width: 25%; .column-2 bredde: 50%; .column-3 width: 75%; .column-4 bredde: 100%;
Vårt siste grid.scss er en dårlig 42 linjer med kode; langt mindre enn vår første CSS.
@import "variabler"; @import "mixins"; *, *: etter, *: før margin: 0; polstring: 0; @include border-box; img bredde: auto; maksimal bredde: 100%; høyde: auto! viktig; .wrapper width: 100%; margin: 0 auto; .wrapper, .row @extend% clearfix; [class * = 'column-'] float: left; polstring: 1em; bredde: 100%; min høyde: 1px; @media # $ breakpoint-medium .wrapper bredde: 95%; maksimal bredde: $ grid-maksimal bredde; @ for $ i fra 1 til $ grid-kolonner .column - # $ i bredde: 100% / $ grid-kolonner * $ i;
Gjennom denne prosessen har vi sett på Sass-variabler, mixiner, plassholdere, strekk, sløyfer, operatører og til og med interpolering. Dette er et utrolig kraftig sett med funksjoner og en god start hvis du bare kommer inn i Sass.
Hvordan kan du ellers forbedre nettverket vi har bygget? Hva annet vil du legge til eller til og med fjerne? Gi oss beskjed i kommentarene!
Accentsconagua