En enkel og enkel guide til å forstå Sass
For en stund siden skrev Thoriq Firdaus en god artikkel om å komme i gang med Sass, som viste deg hvordan du installerer og bruker dette svært nyttige CSS preprocessor-språket (du vil kanskje sjekke det ut, du vet, for å komme i gang).
I denne artikkelen trodde jeg at jeg ville gi deg litt mer innsikt i hva du kan gjøre med Sass og hvordan utviklere bruker det hver dag for å skape bedre og mer modulær CSS-kode. Gå videre til delen du vil ha:
- Verktøy av handel
- variabler
- nesting
- Utvidelse av regler
- mixins
- Placeholder Selectors
- operasjoner
- funksjoner
Verktøy av handel
Thoriq viste deg hvordan du kan bruke Sass fra kommandolinjen ved hjelp av sass - klokka kommando.
Hvis du foretrekker GUI-verktøy, kan du gå med min personlige favorittapp, Codekit, et webutviklerverktøy for å samle Sass, concatenating, autoprefixing og mye mer. Prepros er en annen veldig dyktig applikasjon som kan brukes på alle systemer. Begge er betalte søknader men det er vel verdt det hvis du skal bruke dem i det lange løp.
Hvis du bare vil prøve Sass uten å betale for noe Du kan bruke terminalen, eller Koala (her er vår anmeldelse), en gratis plattforms-feature-rik app, som kan holde grunnen mot premium kolleger.
variabler
En av de første tingene du trenger å vikle hodet rundt er variabler. Hvis du kommer fra en PHP eller annen lignende kodende språkbakgrunn, vil dette være den andre naturen til deg. Variabler er for lagring av biter og deler av gjenbrukbar informasjon, som en fargeverdi for eksempel:
$ primary_color: # 666666; .button color: $ primary_color; .important color: $ primary_color;
Dette kan ikke virke som nyttig her, men tenk å ha 3000 kodenummer. Hvis fargeskjemaet endres, må du erstatte hver fargeverdi i CSS. Med Sass kan du bare endre verdien av $ primary_color variabel og gjøres med den.
Variabler brukes til lagring av skriftnavn, størrelser, farger og en rekke andre opplysninger. For større prosjekter kan det være verdt å trekke ut alle variablene dine i en egen fil (vi vil se på hvordan dette gjøres snart). Hva dette gjør at du kan gjøre er å tilbakekalle hele prosjektet og endre skrifter og andre viktige aspekter uten noen gang å berøre faktiske CSS-regler. Alt du trenger å gjøre er å endre noen variabler.
nesting
En annen grunnleggende funksjon som Sass gir deg er evnen til å hekke regler. La oss anta at du bygger en navigasjonsmeny. Du har en nav element som inneholder en uordnet liste, listeposter og lenker. I CSS kan du gjøre noe slikt:
#header nav / * Regler for nav-området * / #header nav ul / * Regler for menyen * / #header nav li / * Regler for listeposter * / #header nav a / * Regler for lenker * /
I selektoren gjentar vi oss mye. Hvis elementene har felles røtter, kan vi bruke nesting til skriv våre regler på en mye renere måte.
Slik kan koden ovenfor se i Sass:
#header nav / * Regler for nav-området * / ul / * Regler for menyen * / li / * Regler for listeposter * / a / * Regler for lenker * /
Nesting er ekstremt nyttig fordi det gjør stilark (mye) mer lesbar. Ved å bruke nesting sammen med riktig innrykk du kan oppnå svært lesbare kode strukturer, selv om du har en god del kode.
En ulempe med nesting er at det kan føre til unødvendig spesifisitet. I eksemplet ovenfor har jeg henvist til linker med #header nav a. Du kan også bruke #header nav ul li a som trolig ville være for mye.
I Sass er det mye lettere å være veldig spesifikk siden alt du trenger å gjøre er å neste reglene dine. Følgende er langt mindre lesbar og ganske spesifikk.
#header nav / * Regler for nav-området * / ul / * Regler for menyen * / li / * Regler for listeposter * / a / * Regler for lenker * /
Utvidelse av regler
Utvidelse vil være kjent hvis du har jobbet med objektorienterte språk. Det forstås best gjennom et eksempel, la oss lage 3 knapper som er små variasjoner av hverandre.
.knapp display: inline-block; farge: # 000; bakgrunn: # 333; border-radius: 4 piksler; polstring: 8px 11px; . knapp-primær @extend. knapp; bakgrunn: # 0091C2. knapp-liten @extend. knapp; font-size: 0.9em; polstring: 3px 8px;
De .button-primær og .button-small klasser alle utvide .knapp klasse som betyr at de tar på seg alle sine egenskaper og deretter definerer sine egne.
Dette er utrolig nyttig i mange situasjoner der variasjoner av et element kan brukes. Meldinger (varsling / suksess / feil), knapper (farger, størrelser), menytyper og så videre kan alle bruke den utvidede funksjonaliteten for god CSS effektivitet.
En advarsel av strekker seg er det de vil ikke jobbe i medieforespørsler som du forventer. Dette er litt mer avansert, men du kan lese alt om denne oppførselen i Forståelse av Placeholder Selectors - Placeholder selectors er spesiell type utvidelse som vi snakker om snart.
mixins
Mixins er en annen favoritt funksjon av preprocessor brukere. Mixins er gjenbrukbare regler - perfekt for leverandørspesifikke regler eller for kortfattede lange CSS-regler.
Hva med å skape en overgangsregel for sveverelementer:
@mixing hover-effekt -webkit-overgang: bakgrunnsfarge 200ms; -moz-overgang: bakgrunnsfarge 200ms; -o-overgang: bakgrunnsfarge 200ms; overgang: bakgrunnsfarge 200ms; en @include svever-effekt; . knapp @include svever-effekt;
Mixins lar deg også bruke variabler til definer verdiene i mixin. Vi kunne skrive om eksemplet ovenfor til gi oss kontroll over den nøyaktige tiden for overgangen. Vi vil kanskje ha knapper for å overføre en liten bit tregere for eksempel.
@mixin hover-effekt ($ speed) -webkit-overgang: bakgrunnsfarge $ speed; -moz-overgang: bakgrunnsfarge $ hastighet; -o-overgang: bakgrunnsfarge $ hastighet; overgang: bakgrunnsfarge $ hastighet; en @include hover-effekt (200ms); . knapp @include hover-effekt (300ms);
Placeholder Selectors
Placeholder selectors ble introdusert med Sass 3.2 og løst et problem som kan forårsake litt oppblåsing i din genererte CSS-kode. Ta en titt på denne koden som skaper feilmeldinger:
.melding font-size: 1.1em; padding: 11px; border-bredde: 1 px; border-style: solid; .message-fare @extend .message; bakgrunn: # C20030; farge: #fff; border-farge: # A8002A; .message-suksess @extend .message; bakgrunn: # 7EA800; farge: #fff; border-farge: # 6B8F00;
Det er mest sannsynlig at meldingen klassen aldri vil bli brukt i vår HTML: det har vært opprettet for å bli utvidet, ikke brukt som det er. Dette forårsaker litt oppblåsthet i ditt genererte CSS. For å gjøre koden mer effektiv, kan du bruke plassholdervelgeren som er angitt med et prosentvis tegn:
% melding font-size: 1.1em; padding: 11px; border-bredde: 1 px; border-style: solid; .message-fare @extend% button; bakgrunn: # C20030; farge: #fff; border-farge: # A8002A; .message-suksess @extend% button; bakgrunn: # 7EA800; farge: #fff; border-farge: # 6D9700;
På dette stadiet kan du lure på hva forskjellen mellom strekker seg og mixiner er. Hvis du bruker plassholdere, oppfører de seg som en parameter-mindre mixin. Dette er sant, men utgangen i CSS er forskjellig. Forskjellen er det mixins dupliserte regler samtidig som plassholdere vil sørge for at de samme reglene deler selektorer, noe som resulterer i mindre CSS i slutten.
operasjoner
Det er vanskelig å motstå ordspillet her, men jeg vil avstå fra noen medisinske vitser for nå. Operatørene tillater deg å gjøre litt matte i CSS-koden din og kan være ganske darn nyttig. Eksemplet i Sass guide er perfekt for å vise dette:
.beholder bredde: 100%; artikkel float: left; bredde: 600px / 960px * 100%; til side float: right; bredde: 300px / 960px * 100%;
Eksemplet ovenfor skaper et 960px basert gridsystem med minimal bryderi. Det vil kompilere pent sammen til følgende CSS:
.beholder bredde: 100%; artikkel float: left; bredde: 62,5%; til side float: right; bredde: 31,25%;
En stor bruk jeg finner for operasjoner er faktisk å blande farger. Hvis du ser på suksessmeldingen Sass over, er det ikke klart at fargen på bakgrunnen og grensen har noen form for forhold. Ved å trekke av en gråton kan vi mørke fargen, noe som gjør forholdet synlig:
$ primær: # 7EA800; .message-suksess @extend% button; bakgrunn: $ primary; farge: #fff; border-color: $ primary - # 111;
Lysere den subtraherte farge, jo mørkere blir den resulterende skyggen. Jo lettere den ekstra fargen, desto lettere er den resulterende nyansen.
funksjoner
Det er mange funksjoner å bruke: Nummerfunksjoner, strengfunksjoner, listefunksjoner, fargefunksjoner og mer. Ta en titt på den lange listen i utviklerens dokumentasjon. Jeg skal se på et par her bare for å vise deg hvordan de fungerer.
De lette og mørkere funksjonen kan brukes til å endre lysheten i en farge. Dette er bedre enn å trekke nyanser, det gjør alt enda mer modulært og tydelig. Ta en titt på vårt forrige eksempel ved hjelp av mørkningsfunksjonen.
$ primær: # 7EA800; .message-suksess @extend% button; bakgrunn: $ primary; farge: #fff; border-farge: mørkere ($ primær, 5);
Det andre argumentet for funksjonen er prosentandelen av mørkere som kreves. Alle funksjoner har parametere; ta en titt på dokumentasjonen for å se hva de er! Her er noen andre selvforklarende fargefunksjoner: Avmett, mette, invert, gråtoner.
De ceil funksjon, akkurat som i PHP, returnerer et nummer avrundet til neste hele nummer. Dette kan brukes når du beregner kolonnebredder, eller hvis du ikke vil bruke mange desimaler i den endelige CSS.
.tittel font-size: ceil ($ heading_size * 1,3314);
Oversikt
Funksjonene i Sass gir oss stor kraft til å skrive bedre CSS med mindre innsats. Korrekt bruk av mixins, strekker seg, funksjoner og variabler vil gjøre våre stylesheets mer vedlikeholdsbare, mer lesbare og lettere å skrive.
Hvis du er interessert i en annen lignende CSS preprosessor, foreslår jeg å se på MINDRE (eller sjekk ut vår nybegynners guide) - den underliggende rektor er mye den samme!
