Wat is SASS?
SASS is een stylesheettaal die is ontworpen door Hampton Catlin. Het is een afkorting voor Syntactically Awesome Style Sheets. Het is een pre-processor scripttaal die kan worden geïnterpreteerd of gecompileerd in Cascading-stijlbladen. Het is een stabielere en krachtigere versie van CSS die de stijl van elk document structureel beschrijft. SASS is slechts een uitbreiding van CSS. Het bevat nieuwe functies zoals variabelen, geneste regels, mixins, inline import, ingebouwde functies die helpen bij het manipuleren van kleur en andere waarden. Al deze zijn volledig compatibel met CSS.
Definitie
Het is een CSS-pre-processor die helpt bij het verminderen van herhalingen met CSS en op zijn beurt tijd bespaart. Het wordt beschouwd als stabieler en krachtiger in vergelijking met CSS. Het beschrijft de stijl van een document heel duidelijk en structureel. Het helpt om werk sneller en beter gedaan te krijgen. Met al zijn functies heeft het meestal de voorkeur boven CSS. Hiermee kunnen variabelen worden gedefinieerd die met een $ -teken kunnen beginnen. De variabele toewijzing kan worden gedaan met behulp van een dubbele punt. Het ondersteunt ook logisch nesten en CSS niet. Met SASS kan de gebruiker geneste code hebben die in elkaar kan worden ingevoegd.
SASS begrijpen
SASS wordt beschouwd als krachtig, stabiel en snel. De reden hiervoor is dat het onderscheidende kenmerken heeft zoals variabelen, nesting, mixins, etc. Laten we deze één voor één doornemen en SASS beter begrijpen.
1. Variabelen:
Met variabelen kan de gebruiker bepaalde waarden definiëren en deze opnieuw gebruiken in de code. Deze variabelen zijn vergelijkbaar met JavaScript. Elke variabele kan eenvoudig worden gedefinieerd door een $ -teken toe te voegen.
Voorbeeld : $ variable-name: variable-value;
Een gebruiker kan elk gewenst aantal variabelen definiëren. Nadat de variabelen zijn gecompileerd, worden ze vervangen door hun werkelijke waarden in CSS.
2. Nesten:
Nesten helpt bij het definiëren van kindselectoren in ouderselectoren. CSS ondersteunt dit niet en maakt SASS daarom geoptimaliseerde codeertaal. Het helpt bij het schrijven van schonere en minder repetitieve code.
3. Mixins:
Mixin is een andere handige functie die redundantie kan verminderen en hergebruik van code mogelijk maakt. Het is vergelijkbaar met functies waarbij een eenmaal gedefinieerde code een aantal keren kan worden hergebruikt.
4. Gedeeltelijke invoer en invoer:
Gedeeltelijke bestanden zijn afzonderlijke bestanden die code kunnen bevatten waardoor de code modulair is. Door deze functie te gebruiken, kunt u eenvoudig afzonderlijke bestanden voor verschillende componenten hebben. Een gedeeltelijke naam wordt altijd gedefinieerd door een onderstrepingsteken vóór de naam toe te voegen.
Hoe werkt SASS?
Om de code te krijgen, moet u gebruik maken van de SASS pre-processor. Het helpt bij het vertalen van de SASS-code naar CSS. Dit proces staat bekend als transpirerend. Het is vergelijkbaar met compileren, maar hier in plaats van het omzetten van de menselijke relateerbare code naar machinecode, wordt de vertaling gedaan van de ene door de mens leesbare taal naar de andere. Het transpireren van SASS naar CSS is eenvoudig. Alle variabelen die zijn gedefinieerd in SASS worden vervangen door waarden in CSS. Dit maakt het gemakkelijk om verschillende CSS-bestanden voor uw toepassing te maken en te onderhouden.
Hoe SASS gebruiken?
De onderstaande stappen helpen u om SASS op de gemakkelijkst mogelijke manier te gebruiken.
- Maak een demomap overal op uw systeem.
- Maak in deze map twee mappen / CSS en / scss.
- Zodra deze twee mappen zijn gemaakt, gaat u naar de map / scss en maakt u een bestand met de naam demo.scss. Deze extensie is scss, wat betekent dat het een SASS-bestand is.
- Ga naar de opdrachtprompt en navigeer naar de demomap.
- Zodra u in deze map bent, ziet u hoe uw scss-bestanden worden gecompileerd naar CSS. Typ onderstaande opdracht om te kijken:
Sass –watch scss: CSS
Het horloge is een vlag die de verandering detecteert en het scss-bestand compileert in het uiteindelijke CSS-bestand dat in uw toepassing kan worden gebruikt.
Voordelen van SASS
- Met SASS kan de gebruiker een schone code schrijven. Het maakt het gemakkelijker om ermee om te gaan en er wordt minder CSS gebruikt om een programma te bouwen.
- Het bevat minder code, wat het gemakkelijker maakt om de bijbehorende CSS sneller te hebben.
- Het is stabieler, krachtiger en eleganter. Het wordt gebruikt door ontwerpers en ontwikkelaars en helpt hen efficiënter en sneller te werken.
- Het is compatibel met CSS en daarom kunnen alle CSS-bibliotheken worden gebruikt.
- Het biedt faciliteiten zoals nesten die helpt bij het schrijven van geneste syntaxis en het gebruik van functies zoals kleurmanipulatie, wiskundige functies en andere waarden.
Waarom zouden we SASS gebruiken?
Hieronder staan de vijf belangrijkste punten waarom u SASS zou moeten gebruiken:
- Variabelen: in tegenstelling tot CSS, waar u altijd terug moet gaan en uw vorige stijlen moet controleren, heeft SASS variabelen die informatie opslaan en kunnen worden hergebruikt. Alle kleurwaarden, fontstack, enz. Kunnen worden opgeslagen en gebruikt wanneer dat nodig is.
- @import: CSS heeft wel @import waarmee alle andere stijlen worden opgehaald, maar er wordt geen ander HTTP-verzoek gemaakt. SASS is een pre-processor die alle bestanden ophaalt voordat het de CSS compileert. Als gevolg hiervan wordt de CSS-pagina verwerkt door één HTTP-verzoek. Het verzoek kan worden onderverdeeld in brokken en zal nog steeds slechts één pagina weergeven voor de browser.
- Kleurfuncties : SASS heeft verschillende functies die vergelijkbaar zijn met CSS. Al deze kunnen gemakkelijk worden gebruikt in SASS.
- @extend: met @extend kunnen we een set CSS-eigenschappen van de ene selector naar de andere delen.
- Mixins: Mixins zijn verklaringen die op de hele site kunnen worden gebruikt.
Waarom hebben we SASS nodig?
SASS is sneller en efficiënter. De SASS-code kan opnieuw worden gebruikt en bespaart dus tijd. De conversie van code van SASS naar CSS is niet hectisch en daarom is het raadzaam om te gebruiken zodat tijd kan worden bespaard.
Juist publiek voor het leren van SASS-technologieën
Elke programmeur die CSS gebruikt en op zoek is naar een efficiëntere en minder tijdrovende technologie voor het bouwen van webapplicaties, kan SASS gebruiken en de nieuwe functies ervaren.
Hoe kan deze technologie u helpen groeien in uw carrière?
Het is een geavanceerde versie van CSS. Zodra u SASS kent, kunt u gemakkelijk freelance en banen bij grote bedrijven krijgen. Het helpt u sneller te werken en uw vaardigheden te tonen met de functies die het biedt.
Conclusie
SASS is een zeer efficiënte manier om CSS te vervangen. Met de variabelen, nesting, mixin en andere functies helpt het bij het leveren van betere resultaten dan CSS. Wanneer u CSS vervangt door SASS, kunt u uw code eenvoudig hergebruiken in plaats van steeds opnieuw hetzelfde stuk te schrijven. Gebruik daarom SASS en word brutaal met uw toepassingen.
Aanbevolen artikel
Dit is een gids geweest voor Wat is SASS? Hier hebben we de concepten, definitie, werking, voordelen en carrièregroei van SASS besproken. U kunt ook onze andere voorgestelde artikelen doornemen voor meer informatie -
- Wat is Bootstrap en hoe het te gebruiken?
- Wat is VMware? Wat is het nut ervan?
- Wat doet een applicatieserver?
- Wat is Java-erfenis?
- Belangrijkste voor- en nadelen van SAS