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!

Firefox 52 er ute - Her er det som er nytt

Firefox-brukere er en godbit fordi den nyeste versjonen av Mozillas nettleser har fått en ny bygning i form av Firefox 52 . Som med alle andre store bygger, kommer Firefox 52 med nye funksjoner og mer. Her er de tre hovedfunksjonene og endringene som du vil se med Firefox 52 . WebAssembly-støtte er nå tilgjengelig på Firefox 52 Tilbake i 2015 samarbeidet Mozilla, Google, Microsoft og Apple med å utvikle en effektiv bytecode som kan drives effektivt av virtuelle JavaScript-maskiner. Sai

(Tekniske og design tips)

Geomicons - En unik håndkodet SVG Iconset

Web ikonsett blir raskt normen for moderne webdesign. De er enorme eiendeler til webdesignere, da disse ikonene kan tilpasses gjennom CSS og endres uten noe tap av kvalitet.Men noen ikonpakker kan føles oppblåst og for store til mindre steder. Det er der Geomicons virkelig skinner.Dette er en egendefinert håndkodet ikonpakke som kjører på SVG . Du

(Tekniske og design tips)