Als u opnieuw het lezen van dit, dat betekent waarschijnlijk dat u bekend bent met CSS en hebben gehoord van SCSS of Sass, maar nog niet genomen de duik.,
goed Goed Nieuws. Sass gaat je leven veel beter maken. U zult eindelijk in staat zijn om uw code uit te drogen (herhaal uzelf niet) in CSS.
In Principe ontbreekt CSS enkele geweldige functies die het zouden helpen om te zetten in een gemakkelijker te gebruiken en te lezen. Sass voegt variabelen, Nesting, Partials, Mixins, Extend/overerving en Operators toe. Sommige van deze dingen hebben programmeertalen meestal., Als je niet weet wat sommige zijn, is dat oké. We gaan elk van deze definiëren en je laten zien hoe ze gebruikt kunnen worden.
een Sass kan worden gecompileerd in een CSS-bestand, waardoor het schrijven van veel bestanden eenvoudig is.
als u de create react-app gebruikt, heeft u geluk omdat het verwerkingsgedeelte al voor u is geregeld. Zo niet, dan kun je Grunt of Gulp gebruiken om je Sass/SCSS bestanden in CSS te verwerken. Als je nog niet in een omgeving bent die dit zal doen, stel ik voor dat eerst op te zetten. Dit artikel is om te praten over de kenmerken van Sass en hoe ze te gebruiken.,
Wat is het verschil tussen Sass en SCSS. Nou, beide kunnen worden gecompileerd in CSS. Het echte verschil zit hem in de syntaxis. SCSS gebruikt meestal dezelfde syntaxis van CSS terwijl Sass krullende beugels en semi-dubbele punten wegneemt. In beide kunt u gebruik maken van de extra functies die Sass biedt.
het volgende toont de syntactische verschillen.
Als u een codeertaal gebruikt, weet u wat een variabele is. Dus ik ga hier niet te diep op in. In wezen Sass eindelijk kunt u variabelen definiëren, zodat als u besluit om te veranderen zeggen dat een kleur je niet hoeft te veranderen 1000 keer., U kunt gewoon uw primaire kleurvariabele op één plaats wijzigen en u bent klaar om te gaan
$primary-color: #333; body {
background-color: $primary-color;
}.text {
color: $primary-color;
}
nesten
In CSS die u niet kunt nestelen. Laten we eens kijken naar deze twee selectors. Daar is helemaal niets mis mee. Maar we herhalen code.
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
We kunnen zo in Sass nestelen. Dit ziet er veel schoner uit.
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
}
Partials
Partials zijn Sass-of Scss-bestanden met een underscore voor de bestandsnaam. Bijvoorbeeld. “_test.scss”. Wat doet dit?, Het geeft aan dat dit specifieke bestand niet moet worden omgezet in CSS wanneer de tijd komt. Deze bestanden bevatten fragmenten van CSS die vervolgens door andere SCSS-bestanden kunnen worden geïmporteerd.
Dit is een geweldige manier om je CSS te modulariseren en dingen gemakkelijker te onderhouden te houden. U kunt bijvoorbeeld variabelen opslaan die in meerdere bestanden worden gebruikt. Dit is de manier om het te doen.
Mixins
Mixins zijn interessant omdat ze een codeertaal-achtige functie toevoegen. U zult onmiddellijk herkennen wat ik bedoel bij het zien van de code:
in plaats van 3 keer “roteren(30deg)” te typen., Je kunt creëren wat in wezen voelt als een functie en een soort van werkt als een. U passeert in het pand aan de transform () mixin.
om dit stukje code te gebruiken, moet u het “@include” sleutelwoord gebruiken.
Meer info Als u hier klikt.
Extend / Inheritance & Operators
Ik zal het in Deel 2 hebben over deze zaken omdat ze iets meer betrokken zijn. Dit zijn enkele van de meest handige functies in SCSS dus volg en Ik zal het posten van deze blog volgende week!
volg me op Twitter @thedrewprint en vind me op LinkedIn op Andrew Richards., Bedankt voor het lezen!