Wat is Sas? Leer hoe u deze CSS-extensietaal kunt gebruiken

Syntactisch geweldige stylesheets (Sass) is een populaire CSS-extensietaal. De taal bestaat al zo'n 15 jaar. Het werkt goed met elke versie van CSS, waardoor het compatibel is met elke CSS-bibliotheek en -framework, van Bootstrap tot Foundation.

Met de taal kun je Sass-code schrijven en die code vervolgens in CSS compileren. De waarde van het gebruik van Sass in plaats van gewone CSS is dat het extra functies biedt die momenteel buiten het bereik van CSS vallen.

In deze zelfstudie leert u hoe u Sass en de belangrijkste functies ervan kunt gebruiken.

Sass installeren

Er zijn verschillende manieren om Sass op uw apparaat te gebruiken. Deze omvatten het uitvoeren van een applicatie (zoals LiveReload of Scout-App), downloaden Sass van GitHub, of installeren met behulp van npm.

Sass installeren met npm

Om Sass te installeren met npm, moet je: installeer NodeJS en npm op uw apparaat. Dan moet je een maken pakket.json bestand (wat een goede gewoonte is bij het installeren van een npm-pakket in uw projecten). U kunt een basis

pakket.json bestand in uw projectdirectory met de volgende terminalopdracht:

npm init -y

Als u deze opdracht uitvoert, wordt een bestand package.json gegenereerd met de volgende inhoud:

{
 "naam": "mijn_app",
 "versie": "1.0.0",
 "Beschrijving": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Fout: geen test opgegeven\" && exit 1"
 },
 "zoekwoorden": [],
 "schrijver": "",
 "licentie": "ISC"
}

De pakket.json bestand is belangrijk omdat het dient als configuratie voor uw project. Elke keer dat u een nieuw npm-pakket installeert, pakket.json bestand zal dit weerspiegelen.

Nu kunt u Sass installeren door de volgende opdracht in uw terminal in te voeren:

npm sass installeren

Deze opdracht zal de. updaten pakket.json bestand door een nieuwe afhankelijkheidsveld, die het nieuwe Sass-pakket zal bevatten. Het genereert ook een nieuwe package-lock.json bestand en installeer sass (plus afhankelijkheden) in a node_modules map.

De verschillende soorten Sass-bestanden

Een Sass-bestand kan een van de twee extensies hebben, .sass of .scss. Het belangrijkste verschil tussen hen is dat de .scss bestand gebruikt accolades en puntkomma's (net als CSS), terwijl de .sass bestandsstructuren CSS met behulp van inspringing (net als Python). Sommige ontwikkelaars geven er de voorkeur aan om de .scss bestand omdat de structuur dichter bij CSS ligt.

Een .scss-bestandsvoorbeeld

$primaire kleur: blauw;
lichaam {
 kleur: $primaire kleur;
 P {
 kleur rood;
 }
}

Een .sass-bestandsvoorbeeld

$primaire kleur: blauw
lichaam
 kleur: $primaire kleur
 P
 kleur rood

Een Sass-bestand compileren naar CSS

U kunt een individueel Sass-bestand samenstellen met behulp van de sass opdrachtregelprogramma:

sass bestand.scss > bestand.css

U kunt sass ook uitvoeren op alle bestanden in een specifieke map:

sass scss: dist/css/

Dat commando compileert alle Sass-bestanden binnen de scss directory en slaat de resulterende bestanden op in dist/css.

Als u npm gebruikt, kunt u een handige snelkoppeling instellen voor sass-compilatie met behulp van de scripts veld in je pakket.json het dossier:

"scripts": {
 "test": "echo \"Fout: geen test opgegeven\" && exit 1",
 "sass": "sass --watch scss: dist/css/"
 },

Deze configuratie gebruikt de --horloge optie. Het houdt Sass actief en zorgt ervoor dat het die bestanden opnieuw compileert wanneer ze veranderen. Voor elk bestand genereert sass een .css en een .css.map het dossier.

Om het bovenstaande Sass-script uit te voeren, moet u de volgende opdracht in uw terminal uitvoeren:

npm run sass

Door die opdracht uit te voeren, wordt een uitvoer gegenereerd die lijkt op deze:

> [email protected] sass C:\Gebruikers\kadeisha\Documents\mijn_app
> sass --watch scss: dist/css/
Scss\main.scss gecompileerd naar dist\css\main.css.
Sass let op veranderingen. Druk op Ctrl-C om te stoppen.

Sass-variabelen

Je kunt vandaag variabelen in CSS maken, maar 15 jaar geleden bestonden CSS-variabelen niet, dus Sass-ondersteuning voor hen was waardevol. Sass-variabelen werken op vrijwel dezelfde manier als CSS-variabelen. Ze slaan waarden op (zoals kleuren) die u in een CSS-bestand wilt gebruiken. Een van de belangrijkste voordelen van variabelen is dat ze u in staat stellen om veel exemplaren van een waarde bij te werken door deze op slechts één plaats te wijzigen.

Elke Sass-variabele begint met het dollarteken, gevolgd door een willekeurige combinatie van tekens. Probeer je variabelen beschrijvend te maken, zoals de $primaire-kleur voorbeeld hierboven. Het is belangrijk op te merken dat een Sass-variabele niet wordt gecompileerd in CSS-variabelen. Dit .scss-bestand bijvoorbeeld:

$primaire kleur: blauw;
lichaam {
 kleur: $primaire kleur;
}

Zal compileren naar de volgende CSS:

lichaam {
 kleur blauw;
}

Zoals u in het bovenstaande bestand kunt zien, zijn er geen CSS-variabelen. Het voordeel van variabelen is dat elke wijziging in het Sass-bestand het bijbehorende CSS-bestand zal bijwerken.

Sass Mixins

Als je één eigenschap hebt die je meerdere keren in je project wilt gebruiken, dan is een variabele geweldig. Maar als je een groep eigenschappen hebt die je als eenheid wilt gebruiken, zal een mixin het lukken.

Elke mixin begint met de @mixin trefwoord, gevolgd door de naam die u aan de mixin wilt toewijzen. Je hebt de mogelijkheid om variabelen als parameters aan de mixin door te geven en die variabelen in de body van de mixin te gebruiken, op vrijwel dezelfde manier als een functie.

Een Mixin gebruiken

@mixin lichtthema ($ primaire kleur: wit, $ secundaire kleur: #2c2c2c) {
 font-familie: 'Franklin Gothic Medium', 'Arial Narrow', Arial, schreefloos;
 achtergrondkleur: $primaire kleur;
 kleur: $ secundaire kleur;
}
#thuis {
 @include lichtthema (blauw);
}

Het eerste dat je misschien opvalt in de bovenstaande code, is dat de mixin twee argumenten accepteert. U kunt standaardwaarden aan argumenten toewijzen en deze overschrijven wanneer u deze opneemt.

Nadat je je mixin hebt gemaakt, kun je deze in elk gedeelte van je website gebruiken met de @erbij betrekken trefwoord gevolgd door de naam van de mixin.

Het compileren van de Sass-code hierboven genereert de volgende CSS-code in uw doelbestand:

#thuis {
 font-familie: "Franklin Gothic Medium", "Arial Narrow", Arial, schreefloos;
 achtergrondkleur: blauw;
 kleur: #2c2c2c;
}

Sass-functies

Afgezien van de verschillende trefwoorden, is het belangrijkste verschil tussen een functie en een mixin dat een functie iets moet retourneren. U kunt Sass-functies gebruiken om waarden te berekenen of bewerkingen uit te voeren.

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

Deze functie hierboven accepteert twee getallen en retourneert hun som. Sass-functies kunnen zelfs if-statements, for-lussen en andere control flow-statements bevatten.

Sass-modules

Als je al je variabelen, mixins en functies in hetzelfde bestand zou moeten opnemen, zou je een enorm Sass-bestand hebben bij het maken van grote applicaties. Modules bieden een manier om grote bestanden op te splitsen in kleinere die sass combineert tijdens het compileren. U kunt bijvoorbeeld een functiemodule en een mixin-module hebben, het enige dat u hoeft te onthouden is de: @gebruiken trefwoord.

Hier is een voorbeeld dat laat zien hoe je de vorige mixin in een eigen bestand kunt scheiden:

Het mixins.scss-bestand

@mixin lichtthema ($ primaire kleur: wit, $ secundaire kleur: #2c2c2c) {
 font-familie: 'Franklin Gothic Medium', 'Arial Narrow', Arial, schreefloos;
 achtergrondkleur: $primaire kleur;
 kleur: $ secundaire kleur;
}

Het main.scss-bestand

@gebruik 'mixins';
#thuis{
 @include mixins.light-thema;
}

Om een ​​extern bestand als module te importeren en te gebruiken, moet je de @gebruiken trefwoord om het te importeren. Om vervolgens een specifieke mixin uit het geïmporteerde bestand te gebruiken, voeg je de specifieke mixin-naam toe aan de bestandsnaam gevolgd door een punt. Door de bovenstaande bestanden te compileren, wordt de volgende CSS-code gegenereerd:

#thuis {
 font-familie: "Franklin Gothic Medium", "Arial Narrow", Arial, schreefloos;
 achtergrondkleur: wit;
 kleur: #2c2c2c;
}

Gebruik Sass om uw CSS uit te breiden en te ordenen

Sass is een uitbreiding van de syntaxis van CSS. Hiermee kunt u uw stylesheets stroomlijnen en efficiënter beheren. Maar je moet nog steeds de CSS- en webontwerpprincipes beheersen om effectieve ontwerpen te maken.

Dit artikel leert u hoe u Sass installeert en gebruikt. Je hebt geleerd hoe je Sass-variabelen, mixins, functies en modules kunt maken. U hoeft nu alleen nog een HTML-document te maken en uw Sass-code tot leven te zien komen.

8 essentiële CSS-tips en -trucs die elke ontwikkelaar zou moeten weten

Lees volgende

Over de auteur