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
• Utvide reglene
• mixins
• Placeholder Selectors
• operasjoner
• funksjoner

Verktøy av handel

Thoriq viste deg hvordan du kan bruke Sass fra kommandolinjen ved hjelp av sass --watch kommandoen.

Hvis du foretrekker GUI-verktøy, kan du gå med min personlige favorittapp, Codekit, et webutviklerverktøy for å samle Sass, sammenkobling, autoprefixing og mye mer. Prepros er en annen veldig dyktig applikasjon som kan brukes på alle systemer. Begge er betalt søknader, men 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, kan du bruke terminalen, eller Koala (her er vår anmeldelse), en gratis plattformsfunksjonell 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 en annen natur for deg. Variabler er for lagring av biter og gjenstander av gjenbrukbar informasjon, som for eksempel en fargeverdi:

 $ primary_color: # 666666; .button {color: $ primary_color; } .important {color: $ primary_color; } 

Dette kan ikke virke som nyttig her, men tenk å ha 3000 kodenummer. Hvis fargevalg endrer seg, må du erstatte hver fargeverdi i CSS. Med Sass kan du bare endre verdien av $primary_color variabelen og gjøres med den.

Variabler brukes til å lagre 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 ditt og endre skrifter og andre viktige aspekter uten å røre ved 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 et nav som inneholder en uordnet liste, listeobjekter 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 elementer har vanlige røtter, kan vi bruke nesting til å skrive reglene våre 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 lesbart . Ved å bruke nesting sammen med riktig innrykk kan du oppnå høyt lesbare kodestrukturer, selv om du har en god del kode.

En ulempe ved nesting er at det kan føre til unødvendig spesifisitet . I eksemplet ovenfor har jeg henvist til koblinger 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 * /}}}}} 

Utvide reglene

Utvidelse vil være kjent hvis du arbeider med objektorienterte språk. Det forstås best gjennom et eksempel, la oss lage 3 knapper som er små variasjoner av hverandre.

 .button {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; } 

.button-primary og. .button-small klasser alle forlenge .button klassen som betyr at de tar på alle sine egenskaper og deretter definere 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 stor CSS-effektivitet.

En advarsel av strekker seg er at de ikke vil fungere i medieforespørsler som du forventer. Dette er litt mer avansert, men du kan lese alt om denne oppførselen i Forståelse 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 å definere verdiene i mixin . Vi kunne skrive om eksemplet ovenfor for å gi oss kontroll over den nøyaktige tidspunktet 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:

 .message {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: den har blitt opprettet for å bli utvidet, ikke brukt som den 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 produksjonen i CSS er forskjellig. Forskjellen er at mixins dupliserer regler mens 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:

 .container {bredde: 100%; } artikkel {float: left; bredde: 600px / 960px * 100%; } til side {float: right; bredde: 300px / 960px * 100%; } 

Eksemplet ovenfor skaper et 960px basert grid-system med minimal problemfrihet. Det vil kompilere pent sammen til følgende CSS:

 .container {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; grensefarge: $ primær - # 111; } 

Jo lettere den subtraherte farge, jo mørkere blir den resulterende nyansen. 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.

lighten og darken 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ørkningen som kreves. Alle funksjoner har parametere; ta en titt på dokumentasjonen for å se hva de er! Her er noen andre selvforklarende desaturate : desaturate, saturate, invert, grayscale .

ceil, 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.

 .title {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å LESS (eller sjekk ut vår nybegynners guide) - den underliggende rektor er mye det samme!

Showcase av Space Inspired Website Designs

Plassen er en av de beste kildene til inspirasjon i enhver form for arbeid: skriving, maleri eller til og med plass bakgrunnsbilder; og for nå, webdesign. Det er så stort, fargerikt og spennende at det er umulig å forbli apatisk å se på disse levende og attraktive farger, uutforskede steder. Webdesignere fanger sin skjønnhet veldig bra ved å bruke lyseffekter, fargerike former og planetbilder for å skape inspirerende og pustende universsforstand i webdesign.I dette

(Tekniske og design tips)

50 flotte nettsteder med sløret bakgrunn for din inspirasjon

Sløret bilde er en fotograferingsteknikk som kan brukes til å forbedre webdesign. I de senere år har bruk av slørte bilder blitt en trend i grafisk design. Den kan brukes i overskrifter, skyveknapper, bannere eller til og med full bredde bakgrunner . Det uskarpe bildet har også den magiske kraften til å markere typografi og knapper og få dem til å pope .Før du

(Tekniske og design tips)