Hvad er Sass? Lær, hvordan du bruger dette CSS-udvidelsessprog

Syntaktisk fantastiske style sheets (Sass) er et populært CSS-udvidelsessprog. Sproget har eksisteret i omkring 15 år. Det fungerer godt med alle versioner af CSS, hvilket gør det kompatibelt med alle CSS-biblioteker og rammer, fra Bootstrap til Foundation.

Sproget giver dig mulighed for at skrive Sass-kode og derefter kompilere denne kode til CSS. Værdien ved at bruge Sass i stedet for almindelig CSS er, at det giver yderligere funktioner, der i øjeblikket er uden for CSS' omfang.

I denne vejledning lærer du, hvordan du bruger Sass og dets vigtigste funktioner.

Installation af Sass

Der er flere måder at bruge Sass på din enhed. Disse inkluderer at køre en applikation (såsom LiveReload eller Scout-App), download Sass fra GitHub, eller installere det bruger npm.

Installation af Sass med npm

For at installere Sass ved hjælp af npm skal du installer NodeJS og npm på din enhed. Så skal du oprette en package.json fil (hvilket er en god praksis, når du installerer enhver npm-pakke i dine projekter). Du kan oprette en grundlæggende

package.json fil i din projektmappe med følgende terminalkommando:

npm init -y

Udførelse af denne kommando vil generere en package.json-fil med følgende indhold:

{
 "navn": "min_app",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "ekko \"Fejl: ingen test angivet\" && afslut 1"
 },
 "søgeord": [],
 "author": "",
 "license": "ISC"
}

Det package.json fil er vigtig, fordi den fungerer som konfiguration for dit projekt. Hver gang du installerer en ny npm-pakke package.json fil vil afspejle dette.

Nu kan du installere Sass ved at indsætte følgende kommando i din terminal:

npm installer sass

Denne kommando vil opdatere package.json fil ved at oprette en ny afhængighedsfelt, som vil indeholde den nye Sass-pakke. Det vil også generere en ny package-lock.json fil og installer sass (plus afhængigheder) i en node_modules vejviser.

De forskellige typer af Sass-filer

En Sass-fil kan have en af ​​to udvidelser, .sass eller .scss. Den største forskel mellem dem er, at .scss fil bruger krøllede seler og semikolon (meget ligesom CSS), mens .sass filstrukturerer CSS ved hjælp af indrykning (meget ligesom Python). Nogle udviklere foretrækker at bruge .scss fil, da dens struktur er tættere på CSS.

Eksempel på .scss-fil

$primær-farve: blå;
krop {
 farve: $primær-farve;
 p {
 farve: rød;
 }
}

Et eksempel på en .sass-fil

$primær-farve: blå
legeme
 farve: $primær-farve
 s
 farve: rød

Kompilere en Sass-fil til CSS

Du kan kompilere en individuel Sass-fil ved hjælp af frækt kommandolinje program:

sass file.scss > file.css

Du kan også køre sass på tværs af alle filer i en bestemt mappe:

sass scss: dist/css/

Denne kommando kompilerer alle Sass-filer i scss mappe og gemmer de resulterende filer i dist/css.

Hvis du bruger npm, kan du konfigurere en praktisk genvej til sass kompilering ved hjælp af scripts felt i din package.json fil:

"scripts": {
 "test": "ekko \"Fejl: ingen test angivet\" && afslut 1",
 "sass": "sass --watch scss: dist/css/"
 },

Denne konfiguration bruger --kigge på mulighed. Det holder sass kørende og sikrer, at det genkompilerer disse filer, når de ændrer sig. For hver fil vil sass generere en .css og en .css.map fil.

For at udføre Sass-scriptet ovenfor skal du udføre følgende kommando i din terminal:

npm køre sass

Kørsel af denne kommando vil generere output svarende til dette:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss: dist/css/
Kompileret scss\main.scss til dist\css\main.css.
Sass holder øje med ændringer. Tryk på Ctrl-C for at stoppe.

Sass variabler

Du kan oprette variabler i CSS i dag, men for 15 år siden fandtes CSS-variabler ikke, så Sass-understøttelse af dem var værdifuld. Sass-variabler fungerer stort set på samme måde, som CSS-variabler gør. De gemmer værdier (såsom farver), som du har til hensigt at bruge i en CSS-fil. En af de vigtigste fordele ved variabler er, at de giver dig mulighed for at opdatere mange forekomster af en værdi ved at ændre den ét sted.

Hver Sass-variabel starter med dollartegnet efterfulgt af en hvilken som helst kombination af tegn. Prøv at gøre dine variable beskrivende, som f.eks $primær-farve eksemplet ovenfor. Det er vigtigt at bemærke, at en Sass-variabel ikke kompileres til CSS-variabler. For eksempel denne .scss-fil:

$primær-farve: blå;
krop {
 farve: $primær-farve;
}

Vil kompilere til følgende CSS:

krop {
 farve: blå;
}

Som du kan se fra filen ovenfor, er der ingen CSS-variabler. Fordelen ved variabler er, at enhver ændring af Sass-filen vil opdatere den tilsvarende CSS-fil.

Sass Mixins

Hvis du har en egenskab, som du ønsker at bruge flere gange gennem dit projekt, så er en variabel fantastisk. Men hvis du har en gruppe af egenskaber, som du ønsker at bruge som en enhed, vil en mixin gøre tricket.

Hver blanding starter med @mixin nøgleord, efterfulgt af det navn, du vil tildele til mixin. Du har mulighed for at overføre variabler til mixin'et som parametre og bruge disse variabler i mixin'ets krop på stort set samme måde som en funktion.

Brug af en Mixin

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

Den første ting, du måske bemærker i koden ovenfor, er, at mixin accepterer to argumenter. Du kan tildele standardværdier til argumenter og tilsidesætte dem, når du inkluderer dem.

Når du har oprettet dit mixin, kan du bruge det i enhver sektion på dit websted ved hjælp af @omfatte nøgleord efterfulgt af navnet på mixin.

Kompilering af Sass-koden ovenfor vil generere følgende CSS-kode i din destinationsfil:

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

Sass funktioner

Bortset fra de forskellige søgeord er den væsentligste forskel mellem en funktion og et mixin, at en funktion skal returnere noget. Du kan bruge Sass-funktioner til at beregne værdier eller udføre operationer.

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

Denne funktion ovenfor accepterer to tal og returnerer deres sum. Sass-funktioner kan endda indeholde if-sætninger, for loops og andre kontrolflow-sætninger.

Sass moduler

Hvis du skulle inkludere alle dine variabler, mixins og funktioner i den samme fil, ville du have en massiv Sass-fil, når du opretter store applikationer. Moduler giver en måde at opdele store filer i mindre, som kræsne kombinerer under kompilering. For eksempel kan du have et funktionsmodul og et mixin-modul, alt du skal huske er @brug søgeord.

Her er et eksempel, der viser, hvordan du kan adskille den forrige mixin i sin egen fil:

Filen mixins.scss

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

Main.scss-filen

@brug 'mixins';
#hjem{
 @include mixins.light-theme;
}

For at importere og bruge en ekstern fil som et modul, skal du bruge @brug nøgleord for at importere det. Derefter, for at bruge et specifikt mixin fra den importerede fil, skal du præfikse det specifikke mixin-navn med filnavnet efterfulgt af et punktum. Kompilering af filerne ovenfor genererer følgende CSS-kode:

#hjem {
 font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 baggrundsfarve: hvid;
 farve: #2c2c2c;
}

Brug Sass til at udvide og organisere din CSS

Sass er en udvidelse af CSS's syntaks. Det giver dig mulighed for at strømline dine stylesheets og administrere dem mere effektivt. Men du skal stadig have styr på CSS og webdesignprincipper for at skabe effektive designs.

Denne artikel lærer dig, hvordan du installerer og bruger Sass. Du har lært, hvordan du opretter Sass-variabler, mixins, funktioner og moduler. Nu er det eneste, du skal gøre, at oprette et HTML-dokument og se din Sass-kode komme til live.

8 essentielle CSS-tip og tricks, som enhver udvikler bør kende

Læs Næste

Om forfatteren