Share
I denne opplæringen vil vi dekke hva som kan gjøres med de fleksible Sass-stilene som inngår i stiftelsens rammeverk. Mange av disse tilbyr et mer tilpassbart funksjonssett enn det for CSS-versjonen, pluss det er snarveier som kan brukes til å stilte elementer som topplinjen raskt og enkelt.
Følg instruksjonene som er funnet i Sette opp Foundation With Sass and Compass eller Zurb dokumentasjonen hvis du trenger hjelp med å sette opp Foundation med Sass. Du kan bruke kommandolinjen til å få ting i gang med Compass og Bourbon, eller alternativt bare ta tak i de frittstående Sass-filene fra GitHub, plasser dem i prosjektet ditt og importer hvilken bit du trenger.
La oss begynne med nettet da dette er grunnlaget for Foundation. Det er også en god komponent for å vise deg hvor fleksibel scss / sass kan være.
For eksempel, når du bruker mixins som er tilgjengelige for rutenettet (mixins, forresten, er som snarveier til forhåndskrevet kode) kan du lage dine egne klasser, eller til og med ditt eget rutenett ved å bruke noen få enkle variabler. La oss se på det første eksempelet som Foundation gir deg:
/ * Mixin alternativer som lager rader * / @include rutenett ($ behavior); / * Standardverdien er feil, som vil bringe standard radstiler * / $ oppførsel: false / * Hvis elementet du lager som en rad er nestet i et annet element * / / * det er også en rad, trenger du å legge til de riktige nesting stilene * / $ oppførsel: nest / * Du kan bruke dette alternativet til å kollapse beholder rad marginer * / / * Dette kommer til nytte når du arbeider med skjemaer inne i rutenettet * / $ oppførsel: kollaps / * Hvis du ha en nestet rad og vil at den skal kollapses, må du legge til dette alternativet * / $ behavior: nest-collapse
Du kan se her at vi har en mixin (disse refereres av '@' tegn prefiks) som har parentes som inneholder en variabel. Vi starter med mixin @include rutenett, angir alternativene i parentesene.
Når du lager en mixin, kan du spesifisere deler av den forhåndskrevne koden for å endre hver gang du bruker den blandingen. Et enkelt eksempel ville være å lage en mixin som legger til en skrifttype sammen med sin størrelse, vekt, farge etc. men kanskje du vil kunne endre fontfargen hver gang du bruker mixin. Dette ville være det du plasserer i parentesene.
I dette tilfellet bruker vi en variabel i koden, variabler kan brukes til å lagre noen verdi i Sass og begynne med et "$" tegn. For eksempel:
/ * her lager vi mixin * / @mixin fonten ($ color) font-family: 'Arial'; skriftstørrelse: 14px; font-weight: 500; farge: $ color; / * her definerer vi en variabel som skal brukes i den * / $ blue = # 0099cc; / * og her bruker vi faktisk mixin * / @include font ($ blue);
Så i denne koden har vi opprettet en mixin med det tilpassbare alternativet for farge, under det at vi har definert en farge ved hjelp av en variabel $ blå deretter følger vi faktisk mixin, refererer innenfor parentes vår variabel $ blå, som tilsvarer heksekoden # 0099cc.
Hvis vi refererer tilbake til det første kodeeksemplet, vil du se $ oppførsel brukt flere ganger. Dette kan virke litt rart, og en felles tolkning er "Vent! Er dette ikke bare overskrive variabelen hver gang?". I hovedsak gir du en verdi for hvert alternativ i en type liste, også kjent som en matrise. Hver gang du bruker $ oppførsel Utgangen vil korrespondere med alternativet i den rekkefølgen de er erklært.
Du kan også se flere variabler i din inkludere:
@include rutenett-kolonne ($ kolonner, $ siste kolonne); / * Det mest brukte alternativet med en kolonne * / / * Dette angir breddeegenskapene for kolonnen, bruk et tall som representerer kolonner * / $ kolonner: # / * Bruk dette alternativet hvis kolonnene dine ikke legger opp til 12. * / / * Vi gjør den siste kolonnen til å flyte: rett for å holde tingene på linje * / / * Hvis du ikke vil ha dette, sett $ last kolonne til ekte * / $ siste kolonne: falsk
For å virkelig sette dette i perspektiv, løper vi gjennom å opprette et rutenett som bare bruker veldig grunnleggende HTML, da klassene ikke er overalt som nødvendig på grunn av at alle snarveiene er satt i Sass-koden selv. Her er et enkelt eksempel for å bygge en header.
$ radbredde: em-calc (600); $ kolonne-gutter: em-calc (30); $ totalt kolonner: 12! default; header @ include grid-row; @include panel; legge til @include rutenett-kolonne (3); Seksjon @include rutenett-kolonne (9); artikkel @include grid-row; header @ include grid-column (2); Div @include grid-column (10);
Du kan se her at html er minimal og sass beregner hekkingen perfekt, jeg har også satt noen globale verdier for maksimal bredde, mellomrom mellom kolonner og antall kolonner. Fra et HTML-perspektiv sparer det en god del tid, men disse tankeprosessene bak layoutet kan være litt forvirrende til å begynne med. La oss ta en titt nå på knapper og hvordan du kan manipulere dem med Sass.
En av de fine tingene om Sass er hvor raskt du kan stilere sidene dine og hvor mye tid du sparer når du ikke må duplisere koden.
Du kan snarvei til knappestilen enkelt ved å bruke noe enkelt som:
.ditt-klassenavn @include-knappen;
Legg til i noen få alternativer, og i en enkelt linje med kode har du replikert en stil som ville ta seks eller syv linjer med CSS, hvilken tidsparer!
Du vil også legge merke til at for knapper er det massevis av alternativer som ikke finnes i CSS-versjonen, og dette gjelder for alle Sass-elementene. Dette vil virkelig legge til et ekstra frihetslag over CSS-versjonen som du tidligere har jobbet med. Nedenfor er et eksempel på en knapp bygget med variabler, det samme, men ved hjelp av direkte verdier, slik at du kan få en veldig god ide om hvordan disse fungerer.
.ditt-klassenavn @include-knappen ($ polstring, $ bg, $ radius, $ full bredde, $ deaktivert, $ er-inngang); @include innskuddskugg ($ aktiv); .klassens navn @include-knapp (1em, # ca2727, 2px, falsk, falsk, falsk); @include innsettingsskygge (sant);
Dette er bare et enkelt eksempel, men det er et eksempel du sannsynligvis vil bruke på med jevne mellomrom. Når koden er kompilert, vil du ende opp med CSS slik: (og som du kan forestille deg at utgangskoden ville ha mye mer tid til å skrive enn Sass):
.link border-style: solid; kantbredde: 1px; markør: pointer; font-familie: arv; font-weight: bold; linjehøyde: normal; margin: 0 0 1.25em; stilling: relativ; tekst-dekorasjon: ingen; tekst-align: center; display: inline-block; polstring: 1em; polstring-høyre: 2em; polstring-bunn: 1,0625em; polstring-venstre: 2em; skriftstørrelse: 1,25em; bakgrunnsfarge: # ca2727; border-farge: # 9f1f1f; farge: hvit; -webkit-grense-radius: 2px; border-radius: 2px; -webkit-boks-skygge: 0 1px 0 rgba (255, 255, 255, 0,5) innsett; boks-skygge: 0 1px 0 rgba (255, 255, 255, 0.5) innsett;
Selv om mange av dere vil se Sass som et annet språk, er det faktisk veldig raskt å plukke opp når du har skrevet noen linjer. Strukturen er litt mer forbedret sammenlignet med CSS, og hvis du sitter fast, kan du fallback på CSS ved hjelp av SCSS når du absolutt trenger å.
Endelig er en av de mindre skriftlige om funksjonene til Sass evnen til å legge til funksjoner i stilarkene dine. Dette er ikke dynamiske funksjoner på siden (de kjører når du samler din Sass-kode), men de tilbyr interessante muligheter for å spare enda mer tid.
For eksempel, i Foundation er det en pen funksjon for å konvertere px til em. Dette er fantastisk for responsive nettsteder; bare sett inn basisverdien via:
$ em-base: 16px! default;
Så når du vil bruke en em-verdi, som du normalt må beregne pixel til, bruk bare:
høyde: em-kalk (46);
"46" er antall piksler og em-calc å være funksjonen. Du kan bruke dette hvor som helst i din Sass-kode hvor du vil trenge en pikselverdi.
I det siste innlegget nevnte jeg Sass-samlere og de store fordelene de har over manuell kompilering. Denne gangen skal jeg vise deg et verktøy jeg har funnet nyttig på nesten hvert prosjekt jeg noensinne har jobbet med.
Først og fremst når du snakker om Foundation, jobber du med Sass, CSS, HTML og JavaScript, men la oss ikke glemme en stor del av webdesignet dreier seg om bilder, spesielt png- og jpg-filer. Det er absolutt nødvendig å ha weboptimerte bilder, derfor bruker du enten imageOptim (OS X) eller File Optimizer (Windows).
Disse verktøyene komprimerer bilder uten å miste noe av kvaliteten. Det er faktisk veldig effektivt og kompresjonsfrekvensene kan være ufattelige, med noen reduksjoner på opptil 70%. Tenk på det; Hvis du laster opp en png på 100kb, kan du se på en 30kb-fil etter konvertering. Dette kan være enda mer effektivt hvis du bruker sprite-bilder.
Vi har sett på grunnleggende om Sass, hvordan det skal settes opp, hva du kan gjøre med det og hvordan det kan øke hastigheten på arbeidsflyten din. I neste stykke skifter vi inn i noe ganske spennende; Stiftelsen for skinner. Dette vil tillate noen kule dynamiske funksjoner som kan sitte sammen med HTML, CSS og JavaScript.
Accentsconagua