Hvordan komme i gang med Sass

Det er et vedvarende problem med CSS; den støtter ikke variabler. Hver gang du angir en farge, for en blokk med tekst eller en bildegrense, må du gjenta heksekoden. Når du vil endre fargen, må du gjøre det overalt. Selvfølgelig er det alternativet 'erstatte alle' i tekstredigeringsprogrammet, men mangel på innebygd støtte for objektorienterte stiler er en stor ulempe for CSS.

Mange prosjekter har forsøkt å løse problemet, og en av de mest populære er Sass.

For de som ikke er veldig kjent med det, er Sass en CSS preprosessor som effektivt utvider funksjonene til CSS. Det gjør det mulig å bruke mer avanserte programmeringsfunksjoner i stilarkene dine.

Denne artikkelen vil gå deg gjennom det grunnleggende, og hjelpe deg med det prep-arbeidet som kreves for å få Sass satt opp, slik at du kan bruke det i dine egne prosjekter.

Sass funksjoner

De Sass nettsted beskriver språket som følger:

Du kan spørre deg selv nøyaktig hvorfor du bør ta deg tid til å lære alt dette nye språket for å utforme webdesignene dine? Svaret ligger under denne korte listen over fantastiske funksjoner som Sass følger med og bringer til bordet. Eller mer riktig, til arkene.

• Nesting en funksjon som gjør at du kan nest barnevalgere i foreldrevelgeren eller til hekseegenskapene, og sparer dermed mye repetisjon og hodepine.
• Variabler Denne funksjonen gjør at du kan opprette forhåndsinnstilte tilpassede variabler (for eksempel farger og tall) som skal brukes i hele stilarket ditt, som gjør det mulig å gå gjennom og gjøre endringer til en absolutt bris.
• Operasjoner og funksjoner forenkler matematikken som har en tendens til å komme med CSS-styling, slik at du enkelt kan beregne størrelsen og / eller fargen til et element i stilarket uten å måtte beregne dem selv riktig.
• Mixins Dette er en stor tid og plassbesparende funksjon som gjør det mulig å kontinuerlig gjenbruke hele blokker fra stilarket uten det vanlige trykket på mye kopiering og liming av koden.
• Argumenter dette er hvor Sass virkelig skinner, ved å implementere lister over variabler som tildeles en verdi hver gang en mixin brukes, kan denne funksjonen virkelig forlenge kraften til mixins.

Med disse funksjonene kombineres kraft, raiser Sass helt baren med hensyn til styling av webdesign. Legge til et nytt lag med funksjonalitet som definitivt er verdt å se på.

Tross alt, som designere, søker vi alltid etter løsninger som vil utvide effektiviteten av arbeidet vårt. Og Sass er en som samtidig forenkler prosessen for oss også. Hva mer kan du be om?

Ulemperne

Det er selvsagt ikke alt oppe. Selv i sin egen utvikling fra original Sass til SCSS (Sassy CSS) ble noen av de unødvendige rotene som ga det så mye appell - frigjort designere fra den fryktede manglende semikolon eller braketten - lagt inn for å appease noen medlemmer av samfunnet.

• Ikke standarden som kanskje ikke betyr noe for noen, men som holder vekt med mange i samfunnet på jakt etter løsninger som de fullt ut kan implementere og administrere, og med mangel på aksept kommer mangel på dedikerte ressurser.
• Ikke nødvendigvis lagevennlig, som egentlig er et spill-over fra Sass, ikke som standard og brukes mye innenfor samfunnet. Arbeid på et team hvor alle skal kunne få tilgang til og manipulere koden er problematisk hvis du bruker Sass.
• Hvis koden din er urent, så vil det sees at hvis du ender med en masse rot i baksiden, ikke forvent at utgangen skal være ren og skjule den for deg (her kan nestingsfunksjonen faktisk fungere mot deg hvis du bruker for mye tung gruppering når oversatt).
• Ikke for nybegynner vennlig, du må være kjent med koding av CSS allerede for å kunne administrere Sass. Hopping rett inn uten en rudimentær forståelse av CSS vil bare føre til problemer.

Nå som skalaene har blitt balansert, kan du ta en mer informert beslutning om hvorvidt Sass er for deg. Hvis vi har piqued din nysgjerrighet, så gjør deg klar til å bli Sassy.

Installere Sass

Det første du bør vite om Sass er at du kommer til å trenge å bruke kommandolinjen.

Linux-brukere har beinet her oppe, da de er sannsynligvis nært kjent med sin kommandolinje. Windows og OSX-brukere er kanskje ikke så heldige. Hvis du trenger hjelp med å komme i gang, sjekk ut enten OSX-kommandopromptveiledningen eller Windows Command Prompt Guide

Før du kan installere og kjøre Sass, må du sørge for at du har installert Ruby. Windows har en tendens til ikke å ha Ruby forhåndsinstallert, så du må installere Ruby ved hjelp av Windows installer. Hvis du er en Linux-bruker, får du tilgang til kommandolinjen din og installerer både Ruby og Ruby Gems. Hvis du kjører OSX, får du en pause her siden Ruby kommer forhåndsinstallert.

Nå som du forstår kommandolinjen din og har Ruby installert, er du endelig klar til å installere Sass.

1. Åpne kommandolinjen
2. Naviger til din Ruby bin-mappe
3. Skriv inn "gem install sass"

Det er det! Sass er installert, du er klar til å gå.

Bruke Sass

Nå skal vi lage et ekstremt enkelt utvalg stilark som vil gi deg en ide om hvordan Sass fungerer og hvordan du bruker det.

Bruk din foretrukne tekstredigerer opprett en fil med tittelen "test.scss"

Skriv inn litt enkle stiler som:

.black {color: #000;}

For å sikre at Sass fungerer som det skal være, åpne kommandolinjen og naviger til mappen som inneholder testfilen din. Skriv inn "sass test.scss" og utdataene skal være hva som er i css-filen.

Du kan få feilen 'sass' blir ikke gjenkjent som en intern eller ekstern kommando ... Hvis dette skjer, må du sannsynligvis legge til en sti til din Ruby bin-fil. For å gjøre dette, gå til Kontrollpanel> System> Avansert> Miljøvariabler. Klikk på Legg til . Det variable navnet vil være sti, og den variable verdien vil være adressen til ruby ​​bin-mappen din (c: Ruby ### bin)

Oversett Sass-filen til en CSS-fil slik at test.css oppdateres automatisk når du endrer test.scss-filen. Gjør dette ved å skrive inn følgende i kommandolinjen.

sass --watch test.scss:test.css

Du kan også se hele mappene ved hjelp av følgende.

sass --watch stylesheets/sass:stylesheets/css

syntax

Original Sass bruker .sass-utvidelsen og tilbyr et rent, lettlest format som ikke bruker parenteser eller semikolon og er i stedet hvite plassfølsomme. Dette var den opprinnelige versjonen av Sass og vil aldri bli avskrevet, selv om Sass har flyttet videre til SCSS (som holder det tradisjonelle utseendet til CSS, oppmuntrer til bedre nesting og er mer gjenkjennelig og akseptert når man arbeider i et lag).

Original Sass ser slik ut:

.blackcolor: #000

Som vi allerede har sett, ser SCSS slik ut:

.black {color: #000;}

Det er ikke noe riktig eller feil svar som du bør bruke. Begge tilbyr sine fordeler og ulemper. Jeg foreslår at du prøver hver og å se hvilken som føles riktig for deg.

Konklusjon

Til slutt er det ubestridelig at Sass er et kraftig verktøy, og som med alle spirende teknologier, jo flere mennesker i samfunnet som undersøker og bruker det, jo mer sannsynlig er det at det vil vokse og blomstre.

Er du en Sass eller SCSS bruker? Hva synes du om mulighetene Sass tilbyr? Gi oss beskjed i kommentarseksjonen nedenfor.

Utvalgt bilde og miniatyrbilde, strømlinjeformet bilde via Shutterstock

• ← Stopp Chasing Screen Resolutions
• Hvordan lage en enkel CSS3 Tooltip →