En enkel og nem vejledning til at forstå Sass
For et stykke tid skrev Thoriq Firdaus en god artikel om at komme i gang med Sass, som viste dig, hvordan du installerer og bruger dette meget brugbare CSS preprocessor sprog (du vil måske tjekke det, du ved, at komme i gang).
I denne artikel tænkte jeg, at jeg ville give dig lidt mere indblik i, hvad du kan gøre med Sass, og hvordan udviklere bruger det hver dag for at skabe bedre og mere modulær CSS-kode. Spring videre til det afsnit du vil have:
- Handelens værktøjer
- Variable
- nesting
- Udvidelse af regelsæt
- Mixins
- Placeholder Selectors
- operationer
- Funktioner
Værktøjer af handel
Thoriq viste dig, hvordan du kan bruge Sass fra kommandolinjen ved hjælp af sass-watch kommando.
Hvis du foretrækker GUI-værktøjer, kan du gå med min personlige favoritapp, Codekit, et webudviklerværktøj til kompilering af Sass, sammenkobling, autoprefixing og meget mere. Prepros er en anden meget dygtig applikation, som kan bruges på alle systemer. Begge er betalte ansøgninger men det er vel det værd, hvis du bruger dem i det lange løb.
Hvis du bare vil prøve Sass uden at betale for noget Du kan bruge terminalen eller Koala (her er vores anmeldelse), en gratis platform-feature-rich app, som kan holde sin grund mod premium modparter.
Variable
En af de første ting, du skal bruge til at pakke hovedet rundt, er variabler. Hvis du kommer fra en PHP eller en anden lignende kodende sprog baggrund, vil dette være anden natur for dig. Variabler er til lagring af bits og stykker genbrugelige oplysninger, som en farve værdi for eksempel:
$ primary_color: # 666666; .button farve: $ primary_color; .important farve: $ primary_color;
Det kan ikke synes at være nyttigt her, men forestille sig at have 3.000 linjer kode. Hvis dit farveskema ændrer sig, skal du udskifte hver farveværdi i CSS. Med Sass kan du bare ændre værdien af $ primary_color variabel og gøres med det.
Variabler anvendes til lagring af skrifttypenavne, størrelser, farver og en lang række andre oplysninger. For større projekter kan det være værd at udvinde alle dine variabler i en separat fil (vi tager et kig på, hvordan dette sker snart). Hvad dette giver dig mulighed for at gøre, er at recolor hele dit projekt og ændre skrifttyper og andre vigtige aspekter uden at nogen gang røre de faktiske CSS regler. Alt du skal gøre er at ændre nogle variabler.
nesting
En anden grundlæggende funktion, Sass giver dig is evnen til at huse regler. Lad os antage, at du opbygger en navigationsmenu. Du har en nav element, der indeholder en uordnet liste, listeposter og links. I CSS kan du gøre noget som dette:
#header nav / * Regler for nav-området * / #header nav ul / * Regler for menuen * / #header nav li / * Regler for listeposter * / #header nav a / * Regler for links * /
I selektorerne gentager vi os meget. Hvis elementer har fælles rødder, kan vi bruge nesting til skriv vores regler på en meget renere måde.
Sådan kan den ovenstående kode se i Sass:
#header nav / * Regler for nav-området * / ul / * Regler for menuen * / li / * Regler for listeposter * / en / * Regler for links * /
Nesting er yderst nyttig, fordi det gør stylesheets (meget) mere læselig. Ved at bruge nesting sammen med korrekt indrykning kan du opnå yderst læselige kode strukturer, selvom du har en hel del kode.
En ulempe ved nesting er, at det kan føre til unødvendig specificitet. I eksemplet ovenfor har jeg henvist til links med #header nav a. Du kan også bruge #header nav ul li a som sandsynligvis ville være for meget.
I Sass er det meget nemmere at være meget specifik, da alt du behøver at gøre er at redde dine regler. Følgende er langt mindre læselig og ret specifik.
#header nav / * Regler for nav-området * / ul / * Regler for menuen * / li / * Regler for listeposter * / a / * Regler for links * /
Udvidelse af regelsæt
Udvidelse vil være kendt, hvis du arbejder med objektorienterede sprog. Det forstås bedst gennem et eksempel, lad os oprette 3 knapper, som er små variationer af hinanden.
.knap display: inline-block; farve: # 000; baggrund: # 333; border-radius: 4 pixels; polstring: 8px 11px; .knap-primær @extend. baggrund: # 0091C2 .knap-lille @extend. font-size: 0.9em; polstring: 3px 8px;
Det .knap-primær og .knap-small klasser alle udvide .knap klasse, hvilket betyder at de påtager sig alle sine egenskaber og derefter definerer deres egne.
Dette er uhyre nyttigt i mange situationer, hvor variationer af et element kan bruges. Meddelelser (alarm / succes / fejl), knapper (farver, størrelser), menutyper osv. Kan alle bruge den udvidede funktionalitet til stor CSS effektivitet.
En advarsel om forlængelse er det de vil ikke arbejde i medieforespørgsler som du ville forvente. Dette er lidt mere avanceret, men du kan læse alt om denne adfærd i Forståelse af Placeholder Selectors - Placeholder selectors er specielle slags udvidelse, som vi snakker om snart.
Mixins
Mixins er en anden yndlingsfunktion hos præprocessorbrugere. Mixins er genanvendelige regelsæt - perfekt til leverandørspecifikke regler eller for kortfattede lange CSS-regler.
Hvad med at skabe en overgangsregel for svæveelementer:
@mixing hover-effekt -webkit-overgang: baggrundsfarve 200ms; -moz-overgang: baggrundsfarve 200ms; -o-overgang: baggrundsfarve 200ms; overgang: baggrundsfarve 200ms; en @include hover-effekt; .button @include svæveffekt;
Mixins giver dig også mulighed for at bruge variabler til definere værdierne i mixin. Vi kunne omskrive eksemplet ovenfor til give os kontrol over den nøjagtige overgangsperiode. Vi vil måske have knapper til at overføre en lille smule langsommere for eksempel.
@mixin hover-effekt ($ speed) -webkit-overgang: baggrundsfarve $ speed; -moz-overgang: baggrundsfarve $ hastighed; -o-overgang: baggrundsfarve $ speed; overgang: baggrundsfarve $ speed; en @include hover-effekt (200ms); .button @include hover-effekt (300ms);
Placeholder Selectors
Placeholder selectors blev introduceret med Sass 3.2 og løst et problem, der kunne forårsage en smule opblussen i din genererede CSS kode. Kig på denne kode, som opretter fejlmeddelelser:
.meddelelse font-size: 1.1em; padding: 11px; border-width: 1px; border-style: solid; .message-fare @extend .message; baggrund: # C20030; farve: #fff; randfarve: # A8002A; .message-succes @extend .message; baggrund: # 7EA800; farve: #fff; border-farve: # 6B8F00;
Det er højst sandsynligt, at meddelelsesklassen aldrig vil blive brugt i vores HTML: det har været oprettet for at blive udvidet, ikke brugt som det er. Dette forårsager en smule opblussen i din genererede CSS. For at gøre din kode mere effektiv kan du bruge pladsholdervælgeren, som er angivet med et procenttegn:
% besked font-size: 1.1em; padding: 11px; border-width: 1px; border-style: solid; .message-fare @extend% button; baggrund: # C20030; farve: #fff; randfarve: # A8002A; .message-succes @extend% button; baggrund: # 7EA800; farve: #fff; border-farve: # 6D9700;
På dette tidspunkt kan du undre sig over, hvad forskellen mellem strækker sig og mixiner er. Hvis du bruger pladsholdere, opfører de sig som en parameter-mindre mixin. Dette er sandt, men output i CSS adskiller sig. Forskellen er det mixins duplicate regler mens pladsholdere vil sørge for, at de samme regler deler vælgere, hvilket resulterer i mindre CSS i sidste ende.
operationer
Det er svært at modstå ordspillet her, men jeg afstår fra medicinske vittigheder nu. Operatører giver dig mulighed for at lave nogle matte i din CSS kode og kan være ret darn nyttigt. Eksemplet i Sass guide er perfekt til fremvisning af dette:
.container bredde: 100%; artikel float: left; bredde: 600px / 960px * 100%; til side float: right; bredde: 300px / 960px * 100%;
Eksemplet ovenfor skaber et 960px baseret gridsystem med minimal besvær. Det vil kompilere pænt til følgende CSS:
.container bredde: 100%; artikel float: left; bredde: 62,5%; til side float: right; bredde: 31,25%;
En stor brug, jeg finder for operationer, er faktisk at blande farver. Hvis du kigger på succesmeddelelsen Sass ovenfor, er det ikke klart, at farven på baggrunden og grænsen har en slags forhold. Ved at trække gråskygge, kan vi mørke farven og gøre forholdet synligt:
$ primær: # 7EA800; .message-succes @extend% button; baggrund: $ primary; farve: #fff; grænsefarve: $ primær - # 111;
Lysere den subtraherede farve, jo mørkere vil den resulterende nuance blive. Lysere den ekstra farve, den lettere den resulterende skygge.
Funktioner
Der er et stort antal funktioner at bruge: Nummerfunktioner, strengfunktioner, listefunktioner, farvefunktioner og meget mere. Se på den lange liste i udviklerens dokumentation. Jeg tager et kig på et par her for blot at vise dig, hvordan de virker.
Det lysne og mørkere funktion kan bruges til at ændre lysstyrken i en farve. Dette er bedre end at subtrahere nuancer, det gør alt endnu mere modulært og indlysende. Se vores tidligere eksempel ved hjælp af mørkningsfunktionen.
$ primær: # 7EA800; .message-succes @extend% button; baggrund: $ primary; farve: #fff; randfarve: mørkere ($ primær, 5);
Funktionens andet argument er den procentdel af mørkning, der kræves. Alle funktioner har parametre; tag et kig på dokumentationen for at se, hvad de er! Her er et par andre selvforklarende farvefunktioner: afmætte, mætte, invertsukker, gråtoner.
Det ceil funktion, ligesom i PHP, returnerer et nummer afrundet til det næste hele nummer. Dette kan bruges ved beregning af kolonnebredder, eller hvis du ikke vil bruge mange decimaler i den endelige CSS.
.titel font-size: ceil ($ heading_size * 1.3314);
Oversigt
Funktionerne i Sass giver os stor kraft til at skrive bedre CSS med mindre indsats. Korrekt brug af mixins, udvidelser, funktioner og variabler vil gøre vores stylesheets mere vedligeholdelige, mere læselige og lettere at skrive.
Hvis du er interesseret i en anden lignende CSS preprocessor, foreslår jeg at kigge på MINDRE (eller se vores begynderguide) - den underliggende rektor er meget den samme!
