Vad är Sass? Lär dig hur du använder detta CSS-tilläggsspråk

Syntaktisk fantastiska stilmallar (Sass) är ett populärt CSS-tilläggsspråk. Språket har funnits i cirka 15 år. Det fungerar bra med alla versioner av CSS, vilket gör det kompatibelt med alla CSS-bibliotek och ramverk, från Bootstrap till Foundation.

Språket låter dig skriva Sass-kod och sedan kompilera den koden till CSS. Värdet med att använda Sass istället för vanlig CSS är att det ger ytterligare funktioner som för närvarande ligger utanför CSS.

I den här handledningen kommer du att lära dig hur du använder Sass och dess viktigaste funktioner.

Installerar Sass

Det finns flera sätt att använda Sass på din enhet. Dessa inkluderar att köra en applikation (som LiveReload eller Scout-App), ladda ner Sass från GitHub, eller installera den använder npm.

Installerar Sass med npm

För att installera Sass med npm måste du installera NodeJS och npm på din enhet. Då måste du skapa en package.json fil (vilket är en bra praxis när du installerar valfritt npm-paket i dina projekt). Du kan skapa en grundläggande package.json fil i din projektkatalog med följande terminalkommando:

npm init -y

Om du kör det här kommandot genereras en package.json-fil med följande innehåll:

{
 "name": "min_app",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Fel: inget test specificerat\" && avsluta 1"
 },
 "nyckelord": [],
 "author": "",
 "license": "ISC"
}

De package.json filen är viktig eftersom den fungerar som konfiguration för ditt projekt. Varje gång du installerar ett nytt npm-paket package.json filen kommer att återspegla detta.

Nu kan du installera Sass genom att infoga följande kommando i din terminal:

npm installera sass

Detta kommando kommer att uppdatera package.json fil genom att skapa en ny beroendefält, som kommer att innehålla det nya Sass-paketet. Det kommer också att generera en ny package-lock.json fil och installera sass (plus beroenden) i en node_modules katalog.

De olika typerna av Sass-filer

En Sass-fil kan ha en av två tillägg, .sass eller .scss. Den största skillnaden mellan dem är att .scss fil använder hängslen och semikolon (ungefär som CSS), medan .sass filstrukturer CSS med indrag (ungefär som Python). Vissa utvecklare föredrar att använda .scss filen eftersom dess struktur är närmare CSS.

Exempel på .scss-fil

$primär-färg: blå;
kropp {
 färg: $primär-färg;
 p {
 färgen röd;
 }
}

Ett exempel på .sass-fil

$primärfärg: blå
kropp
 färg: $primärfärg
 sid
 färgen röd

Kompilera en Sass-fil till CSS

Du kan kompilera en individuell Sass-fil med hjälp av sass kommandoradsprogram:

sass file.scss > file.css

Du kan också köra sass över alla filer i en specifik katalog:

sass scss: dist/css/

Det kommandot kompilerar alla Sass-filer i scss katalog och lagrar de resulterande filerna i dist/css.

Om du använder npm kan du ställa in en bekväm genväg för sass kompilering med hjälp av manus fält i din package.json fil:

"scripts": {
 "test": "echo \"Fel: inget test specificerat\" && avsluta 1",
 "sass": "sass --watch scss: dist/css/"
 },

Denna konfiguration använder --Kolla på alternativ. Den håller sass igång och säkerställer att den kompilerar om dessa filer när de ändras. För varje fil kommer sass att generera en .css och a .css.map fil.

För att köra Sass-skriptet ovan måste du köra följande kommando i din terminal:

npm kör sass

Att köra det kommandot kommer att generera utdata som liknar detta:

> [email protected] sass C:\Users\kadeisha\Documents\my_app
> sass --watch scss: dist/css/
Kompilerade scss\main.scss till dist\css\main.css.
Sass håller utkik efter förändringar. Tryck Ctrl-C för att stoppa.

Sass Variabler

Du kan skapa variabler i CSS idag, men för 15 år sedan fanns inte CSS-variabler, så Sass stöd för dem var värdefullt. Sass-variabler fungerar på ungefär samma sätt som CSS-variabler gör. De lagrar värden (som färger) som du tänker använda i en CSS-fil. En av de största fördelarna med variabler är att de låter dig uppdatera många förekomster av ett värde genom att ändra det på bara ett ställe.

Varje Sass-variabel börjar med dollartecknet, följt av valfri kombination av tecken. Försök att göra dina variabler beskrivande, som t.ex $primär-färg exemplet ovan. Det är viktigt att notera att en Sass-variabel inte kompileras till CSS-variabler. Till exempel denna .scss-fil:

$primär-färg: blå;
kropp {
 färg: $primär-färg;
}

Kommer att kompilera till följande CSS:

kropp {
 färgen blå;
}

Som du kan se från filen ovan finns det inga CSS-variabler. Fördelen med variabler är att alla ändringar som görs i Sass-filen kommer att uppdatera motsvarande CSS-fil.

Sass Mixins

Om du har en egenskap som du vill använda flera gånger under ditt projekt, då är en variabel bra. Men om du har en grupp egenskaper som du vill använda som en enhet, kommer en mixin att göra susen.

Varje mixin börjar med @blanda i nyckelord, följt av namnet som du vill tilldela mixin. Du har möjlighet att skicka variabler till mixin som parametrar och använda dessa variabler i mixinens kropp, ungefär på samma sätt som en funktion.

Använda en Mixin

@mixin ljustema($primärfärg: vit, $sekundärfärg: #2c2c2c) {
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 bakgrundsfärg: $primärfärg;
 färg: $sekundär-färg;
}
#Hem {
 @inkludera ljustema (blått);
}

Det första du kanske lägger märke till i koden ovan är att mixin accepterar två argument. Du kan tilldela standardvärden till argument och åsidosätta dem när du inkluderar det.

När du har skapat din mixin kan du använda den i valfri sektion på din webbplats med hjälp av @omfatta nyckelord följt av namnet på mixin.

Om du kompilerar Sass-koden ovan genereras följande CSS-kod i din destinationsfil:

#Hem {
 font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 bakgrundsfärg: blå;
 färg: #2c2c2c;
}

Sass funktioner

Förutom de olika nyckelorden är den största skillnaden mellan en funktion och en mixin att en funktion måste returnera något. Du kan använda Sass-funktioner för att beräkna värden eller utföra operationer.

@function add-numbers($num-ett, $num-två){
 $summa: 0;
 $summa: $num-one + $num-två;
 @return $summa 
}

Den här funktionen ovan accepterar två tal och returnerar deras summa. Sass-funktioner kan även innehålla if-satser, för loopar och andra kontrollflödessatser.

Sass moduler

Om du var tvungen att inkludera alla dina variabler, mixins och funktioner i samma fil, skulle du ha en enorm Sass-fil när du skapar stora applikationer. Moduler tillhandahåller ett sätt att dela upp stora filer i mindre som sass kombinerar under kompileringen. Till exempel kan du ha en funktionsmodul och en mixin-modul, allt du behöver komma ihåg är @använda sig av nyckelord.

Här är ett exempel som visar hur du kan separera föregående mixin till sin egen fil:

Filen mixins.scss

@mixin ljustema($primärfärg: vit, $sekundärfärg: #2c2c2c) {
 font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
 bakgrundsfärg: $primärfärg;
 färg: $sekundär-färg;
}

Main.scss-filen

@använd 'mixins';
#Hem{
 @inkludera mixins.light-theme;
}

För att importera och använda en extern fil som en modul, måste du använda @använda sig av nyckelord för att importera det. För att sedan använda en specifik mixin från den importerade filen, prefix det specifika mixinnamnet med filnamnet följt av en punkt. Om du kompilerar filerna ovan genereras följande CSS-kod:

#Hem {
 font-family: "Franklin Gothic Medium", "Arial Narrow", Arial, sans-serif;
 bakgrundsfärg: vit;
 färg: #2c2c2c;
}

Använd Sass för att utöka och organisera din CSS

Sass är en förlängning av CSS: s syntax. Det låter dig effektivisera dina stilmallar och hantera dem mer effektivt. Men du måste fortfarande behärska CSS och webbdesignprinciper för att skapa effektiva designs.

Den här artikeln lär dig hur du installerar och använder Sass. Du har lärt dig hur du skapar Sass-variabler, mixins, funktioner och moduler. Nu återstår bara att skapa ett HTML-dokument och se din Sass-kod komma till liv.

8 viktiga CSS-tips och tricks som alla utvecklare bör känna till

Läs Nästa

Om författaren