Nå er jeg sikker på at du har hørt om Sass og hvordan "Du må virkelig begynne å bruke det!"
Å lære et nytt verktøy kan suge og finne tid til å gjøre det er nesten umulig, men noen ganger kommer et verktøy som endrer vår bransje og er for godt til å ignorere.
Siden våre nettsider og programmer blir mer komplekse blir stilarkene våre større og vanskeligere å vedlikeholde. CSS preprosessorer som Sass hjelp ved å holde stilarkene våre konsise og tillater oss å modulere vår kode samtidig som de tilbyr en hel rekke funksjoner som ikke er tilgjengelige i vanlig CSS.
Disse ekstrafunksjonene gjør dem også veldig morsomme å bruke! Nå har du kanskje sett noe som ser slik ut:
$i: 6;@while $i > 0 {.item-#{$i} {bredde: 2em * $ i; } $ i: $ i - 2;} // http://sass-lang.com/documentation/file.SASS_REFERENCE.html#_11
og tenkte, "Whatttttttttttt? Takk, men jeg beholder min vanlige ol 'CSS.'
Jeg innrømmer at det ser skremmende ut og noen mennesker gjør noen veldig galte, komplekse ting med Sass, men jeg er her for å fortelle deg at alle kan begynne å bruke det, og gevinster du får på dag ett, vil gjøre deg til en Sass-troende.
Å få Sass satt opp for et prosjekt er litt utover omfanget av denne artikkelen, men installasjonen er relativt enkel og Sass-nettstedet har bruksanvisning for Linux, Mac eller PC. Den kule tingen er, når den er installert, kan du ta en CSS-fil du har og endre navn på den .scss gjør det til en Sass-fil.
Alt riktig formatert CSS er gyldig Sass!
Dette betyr at du kan begynne å bruke Sass mens du fortsetter å skrive stilene dine slik som du alltid har, sakte inkorporere flere funksjoner ettersom komfortnivået ditt vokser. Det er riktig folk, akkurat det samme. samme ol 'men her er fem fantastiske gevinster du nå har til disposisjon:
Hva er den viktigste headerfargen igjen? Hvordan skriver jeg den skriftstakken? Hvor mange ganger har du skrevet CSS og måtte søke gjennom dine tidligere stiler til en verdi eller måtte bryte ut fargelapperen, enda en gang for å finne ut den heksadesimale fargen?
Sass gir variabler som en måte å lagre informasjon på som du vil bruke på nytt i stilarket. Nå kan du lagre den fargeverdien eller lange fontstakken som noe lett å huske. Måten du erklære en variabel på, er med et dollarskilt $ etterfulgt av navnet. Dette navnet kan være hva du vil at det skal være. Deretter skriver du en kolon : etterfulgt av verdien og en halvkolon ; :
$mainFont: "Helvetica Neue", Arial, sans-serif;$mainColor: #CC6699;
Nå, hvis du vil bruke en av disse verdiene, kan du bare bruke variabelen i stedet.
.mySelector { font-family: $mainFont; color: $mainColor; }
Awesome, ikke sant? Denne funksjonen alene gjør det verdt installasjonen, da det sparer så mye tid når du skriver CSS. Det er så flott at det sannsynligvis vil komme seg inn i CSS spec men hvem vet når vi skal kunne bruke den? Heldig for oss, med Sass, vi trenger ikke å vente.
Nå kan du kanskje si til deg selv: "CSS har @ import, det er ikke så kult", og du ville ha rett, men CSS og Sass-versjoner er forskjellig på en betydelig måte. I vanlig CSS @import trekker i andre stilark, men det gjør dette ved å lage en annen HTTP-forespørsel, noe vi vanligvis vil unngå. Av denne grunn har du kanskje ikke engang brukt @import før. Sass, derimot, er en preprocessor (vekt på pre) som vil trekke inn den filen før den kompilerer CSS.
Resultatet er en CSS-side som håndteres av en HTTP-forespørsel. Hva dette betyr er at du kan bryte opp din css i mindre, mer vedlikeholdbare biter, mens du fremdeles bare serverer en side i nettleseren. Trenger du å fikse teksten på knappen? Ingen flere skimming stilark ser etter relevante knappestiler. Bare åpne knappen din delvis og foreta endringene.
Hva er en del? Bare hva de høres ut som. De er delvise Sass-filer som inneholder små utdrag av CSS som du kan inkludere i andre Sass-filer. De er navngitt ved å bruke en ledende underskrift etterfulgt av et navn. _myFile.scss . Understreket lar Sass vite at filen bare er en delvis fil, og at den ikke skal kompileres til CSS. For å importere denne delen må du bare legge @import til filen din slik:
@import 'partials/myPartial';
Så jeg importerer _myPartial.scss som ligger i en mappe som heter partials. Du trenger ikke å inkludere underskriften eller filtypen. Sass er smart nok til å vite hvilken fil du mener. Bruken av delvise gir oss en flott måte å modulere koden vår, noe som gjør den mer bærbar og lettere å vedlikeholde.
Sass bringer funksjoner sammen til CSS-partiet. Jeg vet ikke at alle er programmerer, og konseptet med en funksjon kan være litt over hodet ditt, men ikke bekymre deg, mange legger massevis av nyttige funksjoner mens du ikke er altfor komplisert. Så langt som farger, er det flere nyttige til å manipulere dem, men tre skiller seg ut som fantastiske, enkle gevinster for folk som bare kommer i gang. La oss se på hvordan vi bruker dem.
//syntax lighten($color, $amount) darken($color, $amount) rgba($color, $alpha)
Syntaxen er ganske rett frem. I de tre funksjonene ovenfor ser vi at vi har to argumenter for hver. Den første er fargen vi vil manipulere. Dette kan være en heksadesimal, RGB eller et fargeformat som er riktig CSS. Det kan til og med være en variabel. Den andre er mengden vi ønsker å endre den fargen ved. Gjør 10% mørkere, Lys opp med 5%, Sett alfa til 0,6. Resultatet av denne funksjonen er verdien som er angitt i den sammensatte CSS. Så nede under ser du våre funksjoner på jobb
//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åpentligvis kan du allerede se hvordan dette kan være nyttig. Det er et dusin måter å bruke disse tre funksjonene på, for å legge til litt fin, fargekontrast, og de kan brukes hvor som helst en fargevare normalt vil gå. Disse tre er bare toppen av isfjellet. Det er mange flere fargefunksjoner og mange kreative måter de kan brukes på.
Noen ting i CSS er litt kjedelige å skrive. Mixins lager grupper av CSS-erklæringer som vi kan gjenbruke gjennom hele vårt nettsted. CSS3-stiler som krever leverandørprefikser, er et perfekt eksempel på når du skal bruke en mixin. I stedet for å skrive den samme eiendommen om og om, skriver vi en mixin en gang til, og kaller det mixin når som helst vi vil bruke den. For å erklære en mixin bruker vi @mixin søkeord. Vi gir det et navn og bruker våre stiler i mellom krøllete braces slik: @mixin box-sizing { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Argumenter kan til og med sendes til mixin for å gjøre det mer fleksibelt. For å bruke vår mixin bruker vi bare @include søkeord.
//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, kaller vi vår mixin med @include etterfulgt av navnet på mixin og deretter noen argumenter innenfor parentes. Tenk på hvor mye tid dette vil spare deg for. Hvorfor bruker ikke alle dette?
Disse verktøyene har vært gode, men jeg har reddet det beste til sist. @extend er en av de mest nyttige funksjonene som lar oss dele et sett med CSS egenskaper fra en velger til en annen. Tenk på et par knapper, som en aksepterings- og avslagsknapp på et modalt vindu. Siden de er begge knappene, vil de nok dele det meste av den samme stylingen, men nedslagsknappen vil ha en rød bakgrunn for å få det til å skille seg ut. Med Sass skriver vi standardstilene for alle knapper og "forlenge" disse stilene til nedslagsknappen der vi ville legge til den røde bakgrunnen.
.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;}Mann, hvor fantastisk er det å ikke måtte gjenta seg selv? Dette fremmer ikke bare modularisering av våre stiler, men det reduserer risikoen for at stiler blir av fra knapp til knapp. Dette er en stor tid spare seier! Multipliser dette for alle stilene på nettstedet, og vi har en betydelig redusert tidsramme for skriving av CSS.
Heck, med hele tiden vi sparer kanskje vi kunne lære de mer komplekse aspektene av Sass.
Jeg håper jeg har overbevist deg om å gi dette fantastiske verktøyet et skudd og illustrert noen funksjoner som kan forbedre produktiviteten din med en gang. Sannheten er at jeg kunne skrive denne artikkelen igjen i morgen og ha fem flere veldig fine funksjoner å dele. Det er bare det gøy! Sass (og andre forprosessorer) er her for å bli så gjør deg selv en tjeneste og begynn å bruke den. For de som er interessert i å finne ut mer, sjekk ut disse ressursene på twitter og på nettet:
Dustene:
webs:
Og hvis du er i South Florida Tri-county-området, kom med oss på South Florida Sass Meetup .