Du har kanskje hørt om CSS preprocessing og lurer på hva alt buzz handler om. Du har kanskje hørt om sass eller MINDRE .

Kort sagt, forbehandling av CSS gir deg mulighet til å skrive mer konsise stilark som er formatert pent og krever mindre repeterende teknikker som ofte finnes når du skriver CSS-koden. Resultatet er mer dynamisk styling og store mengder tid lagret når du utvikler nettsteder eller applikasjoner.

Hvis du allerede skriver CSS, kan du lett lære å forhåndsbehandle CSS. Når du forstår omfanget av Sass, vil du lure på hvorfor du ikke byttet før.

Hvordan er Sass forskjellig fra CSS?

Sass ligner på CSS, men har sine åpenbare forskjeller når du dykker inn. Det er to måter å skrive Sass på, og det er til slutt opp til deg, hvilken stil du foretrekker. Jeg bruker den innrykkede og brakede stilen (.scss) i prosjektene mine fordi jeg virkelig liker å visualisere hvor en blokk slutter og begynner når mye kode blir nestet. Når behandlingen er ferdig, samler Sass-koden automatisk til tradisjonell CSS automatisk ved hjelp av en forbehandlingsmotor.

Det er mange applikasjoner tilgjengelig som tillater forhåndsinnstilling av Sass for å være sømløst og enkelt. For å installere, kan du bruke kommandolinjen så lenge du har installert Ruby på maskinen din. Hvis du ikke er komfortabel med kommandolinjen, er det andre alternativer (mer på dette under), og hvis dette er over hodet ditt, besøk Sass-lang.com for å lære hvordan du gjør dette i et enkelt trinn for trinn-format. Til slutt, ved hjelp av en hvilken som helst metode, det er kommandolinje eller app, vil Sass-installasjonen se på endringene dine og automatisk kompilere ned til tradisjonell CSS for deg.

Jeg anbefaler på det sterkeste å bruke apper som Codekit , LiveReload , eller Blanding som hjelper deg med å sette opp et Sass-prosjekt på en Mac fra begynnelsen, eller hvis du er en Windows-bruker jeg anbefaler PrePros . Codekit, mitt valg av preprocessor, hjelper meg ved å forhåndsbehandle min Sass, samt validere og redusere koden din slik at nettstedet ditt kan kjøre raskt og effektivt. (Evnen til å skape Kompass eller bourbon baserte prosjekter innen Codekit er også en fantastisk funksjon, men er utenfor rammen av denne artikkelen.) Når du blir mer komfortabel med Sass, må du sjekke ut hvordan du bruker Compass og Bourbon i dine Sass-prosjekter.

Så hva er Sass?

Sass står for Syntactically Awesome Stylesheets og ble laget av Hampton Catlin . Sass introduserer nye konsepter som variabler, mixins og nesting i CSS-koden du allerede kjenner og elsker. Disse konseptene gjør i siste instans din CSS fantastisk, enklere å skrive og mer dynamisk. Alle disse funksjonene kombineres, øker hastigheten på hvilken som helst designer eller utviklerens arbeidsflyt.

Det som ofte forveksler folk er de alternative måtene å skrive Sass. Du vil se andre veiledninger eller forklaringer på Sass ved hjelp av .SCSS eller .Sass-utvidelsen for deres Sass-filer. Dette er tydelig fordi det er to måter å skrive koden på som gir samme utgang. Det vanligste jeg har sett, og metoden jeg bruker for øyeblikket, er den brakede versjonen, kjent som .SCSS. En annen metode er .Sass forlengelsen som er mer avhengig av innrykk snarere enn punktlige elementer og er hvitt plassavhengig. Med denne syntaksen er det ikke behov for halvkolonner eller parenteser som du ser i CSS og .SCSS-syntaksen.

Sjekk ut eksemplet nedenfor.

CSS

#container {width:960px;margin:0 auto;}#container p {color: black;}

.SCSS

/* Same as CSS but has variables and nesting. */$black: #000000;#container {width:960px;margin:0 auto;p {color :$black;}}

.Sass

/* Same as SCSS without semicolons, brackets, and more dependent on indentation. */$black: #000000#containerwidth:960pxmargin: 0 autopcolor:$black

Struktur

Ok, så nå lurer du sikkert på hvordan du får Sass-oppsett for dine egne prosjekter. Prosessen er ganske enkelt, spesielt hvis du bruker Codekit eller et lignende program som hjelper deg på veien.

En typisk filstruktur for et Sass-prosjekt ser ut som skissen nedenfor. Dette kan se skremmende ut, men jeg lover at arbeidsflyten din vil bli bedre når du bryter hodet rundt hvordan ting fungerer sammen. Til slutt blir alle dine Sass kompilert ned til en CSS-fil som vil være filen du inkluderer i dine arbeidsdokumenter, enten det er HTML, PHP, etc ...

stylesheets/||-- modules/ # Common modules| |-- _all.scss # Global level styles| |-- _utility.scss # Basic utility styles| |-- _colors.scss # Global Colors| ...||-- partials/ # Partials - use these to target specific styles and @import on _base.scss| |-- _base.scss # imports for all mixins + global project variables| |-- _buttons.scss # buttons| |-- _figures.scss # figures| |-- _grids.scss # grids| |-- _typography.scss # typography| |-- _reset.scss # reset| ...||-- vendor/ # CSS or Sass from other projects| |-- _colorpicker.scss| |-- _jquery.ui.core.scss| ...||-- main.scss # primary Sass file - where your main Sass code will likely be.

Hvordan du setter opp strukturen din, er avhengig av deg. Start med en grunnleggende struktur og finjustere dine egne behov og arbeidsflyt.

@Import

Sass utvider CSS @ import-regelen slik at den kan importere Sass- og SCSS-filer. Alle importerte filer slås sammen i en enkelt utgitt CSS-fil. I tillegg overfører eventuelle variabler eller mixins som er definert i importerte filer over til hovedfilen, noe som betyr at du nesten kan blande og matche alle filer og være sikker på at alle stilene dine forblir på et globalt nivå.

@import tar et filnavn som skal importeres. Som en siste utvei importeres Sass- eller SCSS-filer via filnavnet du velger. Hvis det ikke er noen utvidelse, vil Sass forsøke å finne en fil med det navnet og .scss eller .Sass utvidelsen og importere det.

Hvis du har et typisk Sass-prosjektoppsett, vil du legge merke til noen @import-regler i en basisfil. Dette lar deg bare ha flere filer som synkroniseres effektivt når de er kompilert, for eksempel:

@import "main.scss";

eller:

@import "main";@Partials

Hvis du har en SCSS- eller Sass-fil som du vil importere, men ikke kompilere til CSS, kan du legge til et understreke til begynnelsen av filnavnet, som ellers er kjent som en Delvis. Når koden samler, ignorerer Sass partisjoner når de behandles til CSS. For eksempel kan du ha _buttons.scss, ingen _buttons.css-fil vil bli opprettet, og du kan deretter @import "-knapper";

Best praksis er å lage en delvis katalog og plassere alle dine delvise Sass-filer inni den. Hvis du gjør dette, vil du ikke ha noen dupliserte filnavn som Sass ikke vil tillate, for eksempel den delvise _buttons.scss og filknappene .scss kan ikke eksistere i samme katalog. Å bruke partials er en fin måte å holde orden på globalt nivå. Så lenge du @ importerer filen, er Sass du skriver brukbar gjennom hele prosjektet. Vanligvis inne deler jeg lager mixins eller variabler å bruke gjennom hele prosjektet mitt. Jeg heter dem basert på innholdet og elementene de styler.

variabler

Variabler i CSS er et gjennombrudd i moderne webutvikling. Med Sass kan du opprette variabler for ting som fonter, farger, størrelser, margin, polstring, etc ... Listen er uendelig. Hvis du skriver JavaScript eller PHP, er konseptet ganske likt når det gjelder å definere variabler og konvensjoner.

Så hvorfor bruke variabler? Enkle, variabler lar deg bruke et element mer enn en gang, ligner en klasse i HTML eller en variabel i JavaScript. For eksempel, si at du definerer flere divs med en bestemt bakgrunnsfarge. Du kan bruke variabelen som er lettere å huske i stedet for den tradisjonelle hex-koden eller RGB-beregningen. Å lage en variabel med et lett å huske navn muliggjør mindre kopiering og liming og en mer produktiv arbeidsflyt. Det samme konseptet gjelder når en variabel kan implementeres, og med Sass som er praktisk talt hvor som helst, for eksempel dette .scss:

#container {/* Here we define our variables */$basetextsize: 12px;$container-space: 10px;$red: #C0392B;/* Variables are applied */font-size: $basetextsize;padding: $container-space;color : $red;}

vil resultere i denne. css filen:

#container {font-size: 12px;padding: 10px;color: #C0392B;}

Operasjoner og funksjoner

Den kule delen om variabler er at de er svært lik de som brukes i skriptspråk. Variabler i Sass kan brukes både i operasjoner og funksjoner. Standard matteoperasjoner (+, -, *, / og%) støttes for tall. For farger er det funksjoner bygget inn i Sass som retter seg mot lyshet, nyanse, metning og mer.

Å ha denne funksjonaliteten gjør koden din mer dynamisk enn noensinne. Hvis du for eksempel vil endre den samlede koblingsfargen på nettstedet ditt, kan du bare endre variabelen, re-kompilere, og nettstedet ditt vil oppdatere dynamisk hele tiden. Sjekk ut et annet eksempel nedenfor for en gjenbrukbar navigasjonsliste, dette .scss:

nav{$nav-width: 900px;$nav-links: 5;$nav-color: #ce4dd6;width: $nav-width;li{float: left;width: $nav-width/$nav-links - 10px;background-color:lighten($nav-color, 20%);&:hover{background-color:lighten ($nav-color, 10%);}  }} 

vil resultere i dette. css:

nav {width: 900px;}nav li {float:left;width: 170px;background-color: #E5A0E9;}nav li:hover {background-color: #D976E0;}

nesting

Nesting er en stor grunn til at jeg elsker Sass. Du skriver færre kodelinjer til slutt, og hele koden din er lett å lese på grunn av den nestede formatering. (Det samme konseptet med hekker finnes også i MINDRE.)

Det er to typer nesting:

Selector nesting

Selector nesting i Sass ligner på hvordan du ville neste HTML:

Main Content
Sidebar Content

Sass-versjonen av nesting:

#container {.main {width:600px;h1 {color: $red;}}.sidebar {width: 300px;h3 {margin: 0;}}}

ville resultere i følgende CSS:

#container .main {width: 960px;}#container .main h1 {color: #C0392B;}#container .sidebar {width: 300px;}#container .sidebar h3 {margin: 0;}

Eiendomsnest

Den andre typen nesting er eiendomsnesting. Du kan neste egenskaper med samme prefiks til bedre målelementer som resulterer i færre linjer med kode, for eksempel dette:

#container {.main {font:weight: bold;size: 12px;.intro {font:size: 20px;}}}

ville resultere i dette CSS:

#container .main {font-weight:bold;font-size: 12px;}#container .main .intro {font-size:20px;}

mixins

Av alle Sass-funksjonene må Mixins være den mektigste. Mixins ligner på en variabel, men på steroider. Du kan definere en komplett stil av et element og gjenbruk de stilene gjennom hele prosjektet.

Mixins er definert ved hjelp av @mixin- direktivet, som tar en blokk med stiler du opprettet før, og bruker den til valget av ditt valg med @include- direktivet. Nedenfor er et vanlig CSS-mønster som brukes til å lage en horisontal navigasjonsmeny. I stedet for å skrive den samme koden for hver navigasjonsinstans, bare bruk en mixin og senere inkludere den når det er nødvendig. Dette konseptet kan gjøres for alt du bruker om og om igjen, for eksempel knapper, typografi, gradienter, etc ...

/* Here we define the styles */@mixin navigate {list-style-type:none;padding:0;margin:0;overflow:hidden;> li {display:block;float:left;&:last-child{margin-right:0px;}}}

Og her inkluderer vi mixin med en linje med kode:

ul.navbar {@include navigate;}

som resulterer i dette kompilerte CSS:

ul.navbar {list-style-type: none;padding:0;margin:0;overflow: hidden;}ul.navbar li {display: block;float: left;}ul.navbar li:last-child {margin-right: 0px;}

Du kan til og med gå så langt som å lage tilpassbare mixins som bruker argumenter for å oppdatere dynamisk. På toppen av det kan du inkludere mixins i andre mixins eller lage funksjoner ved hjelp av mixins og mer. Kraften bak disse er helt enorm.

Det er noen populære forhåndsdefinerte mixin samlinger som jeg nevnte tidligere kalt Compass og Bourbon. Med en enkel @import i prosjektet kan du få tilgang til allerede genererte mixins som vanligvis brukes over hele nettet. Det er så mange alternativer at det er vanskelig å dekke alt som er tilgjengelig, men det er definitivt morsomt å eksperimentere og få hendene skitne å utvikle egendefinerte animasjoner eller overganger med noen få linjer kode i stedet for en skjerm full. Mixins gjør kryssleserutvikling en bris hvis du ikke føler for å skrive nettleserdefinerte prefikser om og om igjen i ditt CSS.

For eksempel, her lager vi en mixin med argumenter slik at den kan tilpasses.

@mixin my-border($color, $width) {border: {color: $color;width: $width;style: $dashed;}}p { @include my-border (blue, lin); }

som gir oss dette CSS når det er samlet:

p {border-color: blue;border-width: lin;border-style: dashed;}

Sammendrag

Mens Sass har en læringskurve, tror jeg virkelig at når du forstår metodene og syntaksen, vil du aldri vil gå tilbake til å skrive standard CSS igjen.

Sass er ekstremt kraftig og jeg har bare dekket det grunnleggende her. Med tradisjonell CSS har vi alle møtt kopi og lim inn eller funnet og erstattet oppgaver som sparer så mye tid i utviklingsfasen av prosjektet ditt. Gi Sass et forsøk og oppdag hvordan du bygger en effektiv arbeidsflyt i fremtidige prosjekter.

Bruker du Sass, eller favoriserer en annen CSS preprosessor? Har du en favoritt mixin? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde, bruker null til heltbilde via Shutterstock.