Nu er jeg sikker på at du har hørt om Sass og hvordan "Du skal virkelig begynde at bruge det!"
At lære et nyt værktøj kan suge og finde tid til at gøre det er næsten umuligt, men nogle gange kommer et værktøj sammen, der ændrer vores industri og er for godt til at ignorere.
Da vores websider og apps bliver mere komplekse bliver vores stilark større og sværere at vedligeholde. CSS preprocessorer som Sass hjælp ved at holde vores stilarker koncise og giver os mulighed for at modulere vores kode, samtidig med at der leveres en hel række funktioner, der endnu ikke er tilgængelige i almindelig CSS.
Disse ekstra funktioner gør dem også rigtig sjove at bruge! Nu har du muligvis set noget, der ser sådan ud:
$i: 6;@while $i > 0 {.item-#{$i} {bredde: 2em * $ i; } $ i: $ i - 2;} // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11
og tænkte, "Whatttttttttttt? Tak, men jeg vil holde min regelmæssige OL 'CSS. "
Jeg indrømmer, det ser skræmmende ud og nogle mennesker laver nogle virkelig vanvittige, komplekse ting med Sass, men jeg er her for at fortælle dig, at alle kan begynde at bruge det, og de gevinster du får på dag et vil gøre dig til en Sass-troende.
At få Sass oprettet til et projekt er lidt ud over denne artikels anvendelsesområde, men installationen er forholdsvis let og Sass-webstedet har instruktioner til Linux, Mac eller PC. Den seje ting er, når den er installeret, kan du tage en CSS-fil, du har og omdøbe den .scss gør det til en Sass-fil.
Alle korrekt formaterede CSS er gyldige Sass!
Det betyder, at du kan begynde at bruge Sass, mens du fortsætter med at skrive dine stilarter, som du altid har, og langsomt inkorporere flere funktioner, når dit komfortniveau vokser. Det er rigtige folk, bare det samme. samme ol 'men her er fem fantastiske gevinster, som du nu har til din rådighed:
Hvad er den primære hovedfarve igen? Hvordan skriver jeg skrifttypestakken? Hvor mange gange har du skrevet CSS og var nødt til at søge igennem dine tidligere stilarter til en værdi eller måtte bryde farvedråberen igen for at finde ud af den hexadecimale farve?
Sass leverer variabler som en måde at lagre oplysninger på, som du vil genbruge i dit stilark. Nu kan du gemme den farveværdi eller den lange skrifttypestak som noget, der er let at huske. Den måde, du erklærer en variabel på, er med et dollar tegn $ efterfulgt af navnet. Dette navn kan være, hvad du vil have det. Så skriver du et kolon : efterfulgt af værdien og en halvkolon ; :
$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;
Nu, hvis du vil bruge en af disse værdier, kan du bare bruge variablen i stedet.
.mySelector { font-family: $mainFont; color: $mainColor; }
Awesome, right? Denne ene funktion alene gør det værd at installere, da det sparer så meget tid, når der oprettes CSS. Det er så godt, at det sandsynligvis vil gå ind i CSS spec men hvem ved, hvornår vi vil kunne bruge det? Heldig for os, med Sass, vi behøver ikke vente.
Nu kan du måske sige til dig selv: "CSS har @ import, det er ikke så koldt", og du ville have ret, men CSS og Sass versionerne er forskellige på en betydelig måde. I normal CSS @import trækker i andre stilark, men det gør det ved at lave en anden HTTP-anmodning, som vi normalt vil undgå. Af denne grund har du muligvis ikke brugt @import før. Sass, derimod, er en præprocessor (vægt på præ), der vil trække i den fil, før den kompilerer CSS.
Resultatet er en CSS-side, der håndteres af en HTTP-anmodning. Hvad det betyder er at du kan opdele din css i mindre, mere vedligeholdelige klumper, mens du stadig kun serverer en side til browseren. Har du brug for at rette teksten på knappen? Ikke mere skimming stilark søger de relevante knapper. Bare åben din knap delvis og foretag ændringerne.
Hvad er en del? Bare hvad de lyder som. De er delvise Sass-filer, der indeholder små uddrag af CSS, som du kan medtage i andre Sass-filer. De er navngivet ved at bruge en ledende understregning efterfulgt af et navn. _myFile.scss . Undersøgelsen gør det muligt for Sass at filen kun er en delvis fil, og at den ikke skal kompileres til CSS. For at importere dette parti skal du bare tilføje @import til din fil som sådan:
@import 'partials/myPartial';
Så jeg importerer _myPartial.scss, der er placeret i en mappe med navnet partials. Du behøver ikke at medtage understregningen eller filtypen. Sass er smart nok til at vide, hvilken fil du mener. Anvendelsen af partials giver os en god måde at modulere vores kode på, så den bliver mere bærbar og lettere at vedligeholde.
Sass bringer funktioner sammen til CSS-partiet. Jeg ved ikke, at alle er en programmør, og begrebet en funktion kan være en smule over hovedet, men rolig, mange tilføjer masser af nyttige funktioner, mens de ikke er alt for komplicerede. Hvad farver angår, er der en række nyttige til at manipulere dem, men tre skiller sig ud som fantastiske, nemme gevinster for folk, der lige kommer i gang. Lad os se på, hvordan vi bruger dem.
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
Syntaxen er ret lige fremad. I de tre funktioner ovenfor ser vi, at vi har to argumenter for hver. Den første er den farve, vi vil manipulere. Dette kan være en hexadecimal, RGB eller et hvilket som helst farveformat, der er korrekt CSS. Det kan endda være en variabel. Det andet er det beløb, vi ønsker at ændre den farve ved. Gør 10% mørkere, Lys med 5%, Sæt alfa til 0,6. Resultatet af denne funktion er den værdi, der er angivet i den sammensatte CSS. Så nedenunder ser du vores funktioner på arbejdspladsen
//in parenthesis you can put any color value followed by the amount you want to modify it by.//lighten(#000, 10%)//darken(rgb(0,0,0), 25%)//rgba(blue, 0.6)//rgba($mainColor, 0.6)//use case$color: #333;//set color variable.myButton {background-color: rgba($color, 0.8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);}//this compiles to:.myButton {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;}Forhåbentlig kan du allerede se, hvordan det kan være nyttigt. Der er et dusin måder at udnytte disse tre funktioner til at tilføje nogle temmelig cool farvekontrast, og de kan bruges hvor som helst en farveværdi normalt ville gå. Disse tre er bare toppen af isbjerget. Der er mange flere farvefunktioner og mange kreative måder, de kan bruges på.
Nogle ting i CSS er lidt kedelige at skrive. Mixins laver grupper af CSS-erklæringer, som vi kan genanvende hele vores hjemmeside. CSS3-stilarter, der kræver leverandørpræfikser, er et perfekt eksempel på, hvornår man skal bruge en mixin. I stedet for at skrive den samme ejendom igen og igen skriver vi en mixin en gang til, så ring til den mixin når som helst vi vil bruge den. For at erklære en mixin bruger vi @mixin søgeord. Vi giver det derefter et navn og anvender vores stilarter i mellem krøllede braces som sådan: @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Argumenter kan endda overføres til mixin for at gøre det mere fleksibelt. For at bruge vores mixin bruger vi bare @include søgeord.
//declare mixin(now being passed an argument)@mixin box-sizing($boxSize) {-webkit-box-sizing: $boxSize;-moz-box-sizing: $boxSize;box-sizing: $boxSize;}//use mixin.mySelector {@include box-sizing(border-box);}//compiled to:.mySelector {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
Som du ser i eksemplet ovenfor kalder vi vores mixin med @include efterfulgt af mixins navn og derefter argumenter indenfor parentes. Tænk på hvor meget tid dette vil spare dig for. Hvorfor bruger ikke alle dette?
Disse værktøjer har været gode, men jeg har reddet det bedste til sidst. @extend er en af de mest nyttige funktioner, der giver os mulighed for at dele et sæt CSS-egenskaber fra en vælger til en anden. Tænk på et par knapper, som en accept og tilbagekald på et modalt vindue. Da de er begge knapper, vil de nok dele det meste af den samme styling, men nedfaldsknappen vil have en rød baggrund for at få det til at skille sig ud. Med Sass skriver vi standardstile for alle knapper og "forlænger" disse stilarter til nedfaldsknappen, hvor vi vil tilføje den røde baggrund.
.button {background: rgba($color, .8);color: lighten($color, 65%);border: 1px solid darken($color, 5%);padding: 1em;display: block;max-width: 200px;}.button-decline {@extend .button;background: red;}//compiles to.button, .button-decline {background: rgba(51, 51, 51, 0.8);color: #d9d9d9;border: 1px solid #262626;padding: 1em;display: block;max-width: 200px;}.button-decline {background: red;}Mand, hvor fantastisk er det at du ikke skal gentage dig selv? Dette fremmer ikke kun modularisering af vores stilarter, men det reducerer risikoen for, at stilarter bliver slukket fra knap til knap. Dette er en enorm tid spare gevinst! Multiplicér dette for alle stilarter på webstedet, og vi har en markant reduceret tidsramme for at skrive CSS.
Heck, med hele tiden vi sparer måske kunne vi lære de mere komplekse aspekter af Sass.
Jeg håber jeg har overbevist dig om at give dette fantastiske værktøj et skud og illustreret nogle funktioner, der kunne forbedre din produktivitet med det samme. Sandheden er, at jeg kunne skrive denne artikel igen i morgen og har fem mere rigtig flotte funktioner at dele. Det er bare så fantastisk! Sass (og andre præprocessorer) er her for at blive så gør dig selv en tjeneste og begynde at bruge den. For de interesserede i at finde ud af mere, tjek disse ressourcer på twitter og på internettet:
Twits:
webs:
Og hvis du er i South Florida Tri-County-området, kom med os på South Florida Sass Meetup .