Hva er Sass? Lær hvordan du bruker dette CSS-utvidelsesspråket

Syntaktisk fantastiske stilark (Sass) er et populært CSS-utvidelsesspråk. Språket har eksistert i rundt 15 år. Det fungerer bra med alle versjoner av CSS, noe som gjør det kompatibelt med alle CSS-biblioteker og rammeverk, fra Bootstrap til Foundation.

Språket lar deg skrive Sass-kode og deretter kompilere den koden til CSS. Verdien av å bruke Sass i stedet for vanlig CSS er at det gir tilleggsfunksjoner som for øyeblikket er utenfor CSS-området.

I denne opplæringen lærer du hvordan du bruker Sass og dets viktigste funksjoner.

Installerer Sass

Det er flere måter å bruke Sass på enheten din. Disse inkluderer å kjøre en applikasjon (som LiveReload eller Scout-App), nedlasting Sass fra GitHub, eller installere den bruker npm.

Installerer Sass med npm

For å installere Sass ved hjelp av npm må du installer NodeJS og npm på enheten din. Deretter må du opprette en package.json fil (som er en god praksis når du installerer en hvilken som helst npm-pakke i prosjektene dine). Du kan lage en grunnleggende package.json fil i prosjektkatalogen din med følgende terminalkommando:

npm init -y

Utførelse av denne kommandoen vil generere en package.json-fil med følgende innhold:

{
 "name": "min_app",
 "versjon": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "ekko \"Feil: ingen test spesifisert\" && avslutt 1"
 },
 "søkeord": [],
 "author": "",
 "license": "ISC"
}

De package.json filen er viktig fordi den fungerer som konfigurasjon for prosjektet ditt. Hver gang du installerer en ny npm-pakke vil package.json filen vil gjenspeile dette.

Nå kan du installere Sass ved å sette inn følgende kommando i terminalen din:

npm installer sass

Denne kommandoen vil oppdatere package.json fil ved å opprette en ny avhengighetsfelt, som vil inneholde den nye Sass-pakken. Det vil også generere en ny package-lock.json fil og installer sass (pluss avhengigheter) i en node_modules katalog.

De forskjellige typene Sass-filer

En Sass-fil kan ha en av to utvidelser, .sass eller .scss. Hovedforskjellen mellom dem er at .scss filen bruker krøllete klammeparenteser og semikolon (omtrent som CSS), mens .sass filstrukturer CSS ved hjelp av innrykk (omtrent som Python). Noen utviklere foretrekker å bruke .scss fil da strukturen er nærmere CSS.

Eksempel på .scss-fil

$primærfarge: blå;
kropp {
 farge: $primærfarge;
 p {
 fargen rød;
 }
}

Eksempel på .sass-fil

$primærfarge: blå
kropp
 farge: $primærfarge
 s
 fargen rød

Kompilere en Sass-fil til CSS

Du kan kompilere en individuell Sass-fil ved å bruke frekk kommandolinjeprogram:

sass file.scss > file.css

Du kan også kjøre sass på tvers av alle filer i en bestemt katalog:

sass scss: dist/css/

Den kommandoen kompilerer alle Sass-filer i scss katalog og lagrer de resulterende filene i dist/css.

Hvis du bruker npm, kan du sette opp en praktisk snarvei for sass kompilering ved å bruke skript felt i din package.json fil:

"scripts": {
 "test": "ekko \"Feil: ingen test spesifisert\" && avslutt 1",
 "sass": "sass --watch scss: dist/css/"
 },

Denne konfigurasjonen bruker --se alternativ. Det holder sass i gang og sikrer at den rekompilerer disse filene når de endres. For hver fil vil sass generere en .css og a .css.map fil.

For å utføre Sass-skriptet ovenfor må du utføre følgende kommando i terminalen din:

npm kjøre sass

Å kjøre den kommandoen vil generere utdata som ligner på dette:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss: dist/css/
Kompilert scss\main.scss til dist\css\main.css.
Sass ser etter endringer. Trykk Ctrl-C for å stoppe.

Sass variabler

Du kan lage variabler i CSS i dag, men for 15 år siden fantes ikke CSS-variabler, så Sass-støtte for dem var verdifull. Sass-variabler fungerer omtrent på samme måte som CSS-variabler gjør. De lagrer verdier (som farger) som du har tenkt å bruke gjennom en CSS-fil. En av hovedfordelene med variabler er at de lar deg oppdatere mange forekomster av en verdi ved å endre den på bare ett sted.

Hver Sass-variabel starter med dollartegnet, etterfulgt av en hvilken som helst kombinasjon av tegn. Prøv å gjøre variablene beskrivende, som f.eks $primærfarge eksempel ovenfor. Det er viktig å merke seg at en Sass-variabel ikke kompileres til CSS-variabler. For eksempel denne .scss-filen:

$primærfarge: blå;
kropp {
 farge: $primærfarge;
}

Vil kompilere til følgende CSS:

kropp {
 farge: blå;
}

Som du kan se fra filen ovenfor er det ingen CSS-variabler. Fordelen med variabler er at enhver endring som gjøres i Sass-filen vil oppdatere den tilsvarende CSS-filen.

Sass Mixins

Hvis du har en egenskap som du ønsker å bruke flere ganger gjennom prosjektet, så er en variabel flott. Men hvis du har en gruppe egenskaper som du ønsker å bruke som en enhet, vil en mixin gjøre susen.

Hver blanding starter med @mixin nøkkelord, etterfulgt av navnet du vil tilordne til mixin. Du har muligheten til å sende variabler til mixin som parametere og bruke disse variablene i kroppen til mixin, omtrent på samme måte som en funksjon.

Ved hjelp av en Mixin

@mixin lys-tema($primærfarge: hvit, $sekundærfarge: #2c2c2c) {
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 bakgrunnsfarge: $primærfarge;
 farge: $sekundær-farge;
}
#hjem {
 @inkluder lys-tema (blått);
}

Det første du kanskje legger merke til i koden ovenfor er at mixin godtar to argumenter. Du kan tilordne standardverdier til argumenter og overstyre dem når du inkluderer dem.

Etter at du har laget din mixin, kan du bruke den i hvilken som helst seksjon på nettstedet ditt ved å bruke @inkludere nøkkelord etterfulgt av navnet på blandingen.

Ved å kompilere Sass-koden ovenfor genereres følgende CSS-kode i målfilen din:

#hjem {
 font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 bakgrunnsfarge: blå;
 farge: #2c2c2c;
}

Sass funksjoner

Bortsett fra de forskjellige nøkkelordene, er hovedforskjellen mellom en funksjon og en mixin at en funksjon må returnere noe. Du kan bruke Sass-funksjoner til å beregne verdier eller utføre operasjoner.

@function add-numbers($num-one, $num-two){
 $sum: 0;
 $sum: $num-one + $num-two;
 @return $sum 
}

Denne funksjonen ovenfor aksepterer to tall og returnerer summen deres. Sass-funksjoner kan til og med inneholde if-setninger, for loops og andre kontrollflyt-setninger.

Sass-moduler

Hvis du måtte inkludere alle dine variabler, blandinger og funksjoner i samme fil, ville du ha en massiv Sass-fil når du lager store applikasjoner. Moduler gir en måte å splitte store filer i mindre som sass kombinerer under kompilering. For eksempel kan du ha en funksjonsmodul og en mixin-modul, alt du trenger å huske er @bruk søkeord.

Her er et eksempel som viser hvordan du kan skille forrige mixin til sin egen fil:

Filen mixins.scss

@mixin lys-tema($primærfarge: hvit, $sekundærfarge: #2c2c2c) {
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 bakgrunnsfarge: $primærfarge;
 farge: $sekundær-farge;
}

Hoved.scss-filen

@bruk 'mixins';
#hjem{
 @inkluder mixins.light-theme;
}

For å importere og bruke en ekstern fil som en modul, må du bruke @bruk nøkkelord for å importere den. Deretter, for å bruke en spesifikk mixin fra den importerte filen, prefikser du det spesifikke mixin-navnet med filnavnet etterfulgt av et punktum. Ved å kompilere filene ovenfor genereres følgende CSS-kode:

#hjem {
 font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 bakgrunnsfarge: hvit;
 farge: #2c2c2c;
}

Bruk Sass til å utvide og organisere CSS

Sass er en utvidelse av CSS sin syntaks. Den lar deg strømlinjeforme stilarkene dine og administrere dem mer effektivt. Men du må fortsatt beherske CSS og webdesignprinsipper for å lage effektive design.

Denne artikkelen lærer deg hvordan du installerer og bruker Sass. Du har lært hvordan du lager Sass-variabler, mixins, funksjoner og moduler. Nå er alt som gjenstår for deg å lage et HTML-dokument og se Sass-koden komme til live.

8 essensielle CSS-tips og triks alle utviklere bør vite

Les Neste

Om forfatteren