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!
50 Nyttige Android Apps for Designers (2018)
Design er en av verdens mest krevende yrker. Fra å holde seg oppdatert med nyere verktøy og teknologi for å være konstant på jakt etter inspirasjon, har designere mye på tallerkenen deres. Under slike omstendigheter kan noen nyttige Android-apper være veldig praktiske.Så, her er en lang liste over nyttige Android-apper for designere som kan hjelpe dem med å administrere sine daglige oppgaver raskt på farten . Listen o
20+ må ha apps for den nye Windows-telefonen
Til tross for mangel på apps, vokser Windows Phone Store jevnlig sitt arsenal av gode apps månedlig. Du kan nå finne en rekke offisielle apps og alternativer som ligner på eller enda bedre enn de vanlige synderne for mobilbehovene dine.Det beste med Windows Phone Store er at vi kan prøve appene før du kjøper noen ; Hvis det ikke fungerer som forventet, eller du ikke liker det, kan du bare trykke på Avinstaller .Etter å