Share
Het is een avontuur om de ware kracht van een CSS-preprocessor te gebruiken. Er zijn talloze talen, syntaxes en functies, allemaal klaar voor gebruik nu.
In dit artikel bespreken we de verschillende functies en voordelen van het gebruik van drie verschillende preprocessors: Sass, LESS en Stylus.
Preprocessors produceren CSS die in alle browsers werkt.
CSS3 preprocessors zijn talen die zijn geschreven met als enig doel coole, inventieve functies toe te voegen aan CSS zonder de browsercompatibiliteit te doorbreken. Ze doen dit door de code die we schrijven te compileren in standaard CSS die in elke browser kan worden gebruikt, helemaal tot aan de steentijd. Er zijn duizenden functies die preprocessors naar voren brengen, en in dit artikel bespreken we enkele van de gepubliceerde en enkele niet-gepubliceerde. Laten we beginnen.
Het belangrijkste onderdeel van het schrijven van code in een CSS-preprocessor is het begrijpen van de syntaxis. Gelukkig voor ons is de syntaxis (of kan) identiek zijn aan reguliere CSS voor alle drie de preprocessors.
Sass en LESS gebruiken beide de standaard CSS-syntaxis. Dit maakt het uiterst eenvoudig om een bestaand CSS-bestand naar een preprocessor te converteren. Sass gebruikt de .SCSS bestandsextensie en LESS gebruikt de .minder uitbreiding. Het basis Sass- of LESS-bestand kan worden ingesteld zoals hieronder:
/ * style.scss of style.less * / h1 color: # 0982C1;
Zoals je misschien al gemerkt hebt, is dit gewoon normale CSS, die perfect in zowel Sass als LESS samenkomt.
Het is belangrijk op te merken dat Sass ook een oudere syntaxis heeft, waarbij puntkomma's en accolades worden weggelaten. Hoewel dit er nog steeds is, is het dat wel oud en we zullen het niet voorbij dit voorbeeld gebruiken. De syntaxis gebruikt de .sass bestandsextensie en ziet er als volgt uit:
/ * style.sass * / h1 kleur: # 0982c1
De syntaxis voor Stylus is veel meer uitgebreid. De ... gebruiken .styl Bestandsextensie, Stylus accepteert de standaard CSS-syntaxis, maar accepteert ook enkele andere variaties waarbij haakjes, dubbele punt en puntkomma allemaal optioneel zijn. Bijvoorbeeld:
/ * style.styl * / h1 color: # 0982C1; / * haakjes weglaten * / h1 kleur: # 0982C1; / * dubbele punten en puntkomma's * / h1-kleur # 0982C1 weglaten
Het gebruik van verschillende variaties in dezelfde stylesheet is ook geldig, dus het volgende zal zonder fouten worden gecompileerd.
h1 color # 0982c1 h2 font-size: 1.2em
Variabelen kunnen door het hele stylesheet worden gedeclareerd en gebruikt. Ze kunnen elke waarde hebben die een CSS-waarde is (bijvoorbeeld kleuren, cijfers [inbegrepen eenheden] of tekst) en waarnaar overal in ons stylesheet kan worden verwezen..
Sass-variabelen worden voorafgegaan door de $ symbool en de waarde en naam worden gescheiden door een puntkomma, net als een CSS-eigenschap.
$ mainColor: # 0982c1; $ siteWidth: 1024px; $ borderStyle: gestippeld; body color: $ mainColor; border: 1px $ borderStyle $ mainColor; max-breedte: $ siteWidth;
MINDER variabelen zijn exact hetzelfde als Sass-variabelen, behalve dat de variabelenamen zijn voorafgegaan door de @ symbool.
@mainColor: # 0982c1; @siteWidth: 1024px; @borderStyle: gestippeld; body color: @mainColor; border: 1px @borderStyle @mainColor; max-width: @siteWidth;
Stylusvariabelen vereisen niets dat aan hen moet worden toegevoegd, hoewel het de $ symbool. Zoals altijd is de laatste puntkomma niet vereist, maar een gelijkteken tussen de waarde en de variabele is. Een ding om op te merken is dat Stylus (0.22.4) compileert als we de @ symbool voor een variabelenaam, maar past de waarde niet toe wanneer ernaar wordt verwezen. Met andere woorden, doe dat niet.
mainColor = # 0982c1 siteWidth = 1024px $ borderStyle = gestippelde hoofdkleur mainColor border 1px $ borderStyle mainColor max-width siteWidth
Elk van de bovenstaande bestanden zal worden gecompileerd naar dezelfde CSS. U kunt uw verbeelding gebruiken om te zien hoe nuttig variabelen kunnen zijn. We hoeven niet meer één kleur te wijzigen en moeten deze twintig keer opnieuw typen, of we willen de breedte van onze site wijzigen en rond gaan zoeken om deze te vinden. Hier is de CSS na compilatie:
lichaam kleur: # 0982c1; rand: 1px gestippeld # 0982c1; maximale breedte: 1024 px;
Als we moeten verwijzen naar meerdere elementen met dezelfde ouder in onze CSS, kan het vervelend zijn om de ouder steeds opnieuw te schrijven.
sectie margin: 10px; sectie nav height: 25px; sectie nav a color: # 0982C1; sectie nav a: hover text-decoration: onderstrepen;
In plaats daarvan kunnen we met behulp van een preprocessor de kindselectoren in de haakjes van de ouder schrijven. Ook de & symbool verwijst naar de bovenliggende selector.
Alle drie de preprocessors hebben dezelfde syntaxis voor het nesten van selectors.
sectie margin: 10px; nav height: 25px; een color: # 0982C1; &: hover text-decoration: onderstrepen;
Dit is de gecompileerde CSS van de bovenstaande code. Het is precies hetzelfde als toen we begonnen - hoe handig!
sectie margin: 10px; sectie nav height: 25px; sectie nav a color: # 0982C1; sectie nav a: hover text-decoration: onderstrepen;
Mixins zijn functies die het hergebruik van eigenschappen in ons hele stylesheet mogelijk maken. In plaats van dat we door onze stylesheet moeten gaan en een woning meerdere keren moeten wijzigen, kunnen we deze nu gewoon in onze mixin wijzigen. Dit kan erg handig zijn voor het specifiek opmaken van elementen en voorvoegsels van leveranciers. Wanneer mixins vanuit een CSS-selector worden aangeroepen, worden de argumenten van mixin herkend en worden de stijlen in de mixin toegepast op de selector.
/ * Sass-mixin-fout met (optioneel) argument $ borderWidth die standaard 2px is indien niet opgegeven * / @mixin error ($ borderWidth: 2px) border: $ borderWidth solid # F00; kleur: # F00; .generic-error padding: 20px; marge: 4px; @ include error (); / * Past stijlen toe van mixin error * / .login-error left: 12px; positie: absoluut; top: 20px; @ include-fout (5px); / * Past stijlen toe van mixin error met argument $ borderWidth gelijk aan 5px * /
/ * MINDER mixinfout met (optioneel) argument @borderWidth, standaard 2px indien niet opgegeven * /. Fout (@borderWidth: 2px) border: @borderWidth solid # F00; kleur: # F00; .generic-error padding: 20px; marge: 4px; .fout(); / * Past stijlen toe van mixin error * / .login-error left: 12px; positie: absoluut; top: 20px; .error (5px); / * Past stijlen toe van mixin-fout met argument @borderWidth gelijk aan 5px * /
/ * Stylus mixin-fout met (optioneel) argument borderWidth die standaard 2px is indien niet opgegeven * / error (borderWidth = 2px) border: borderWidth solid # F00; kleur: # F00; .generic-error padding: 20px; marge: 4px; fout(); / * Past stijlen toe van mixin error * / .login-error left: 12px; positie: absoluut; top: 20px; error (5px); / * Past stijlen toe van mixin-fout met argument borderWidth gelijk aan 5px * /
Alle preprocessors compileren naar dezelfde code hieronder:
.generieke fout opvulling: 20px; marge: 4px; rand: 2px vast # f00; kleur: # f00; .login-error left: 12px; positie: absoluut; top: 20px; rand: 5px vast # f00; kleur: # f00;
Wanneer CSS op de ouderwetse manier wordt geschreven, kunnen we de volgende code gebruiken om dezelfde stijlen tegelijkertijd op meerdere elementen toe te passen:
p, ul, ol / * stijlen hier * /
Dat werkt geweldig, maar als we de elementen afzonderlijk moeten stylen, moet er voor elk een andere selector worden gemaakt en kan deze snel rommeliger en moeilijker te onderhouden worden. Om dit tegen te gaan, kan overerving worden gebruikt. Overerving is de mogelijkheid voor andere CSS-selectors om de eigenschappen van een andere selector over te nemen.
.blok margin: 10px 5px; opvulling: 2px; p @extend .block; / * Stijlen overnemen van '.block' * / border: 1px solid #EEE; ul, ol @extend .block; / * Stijlen overnemen van '.block' * / color: # 333; text-transform: hoofdletters;
.blok, p, ul, ol margin: 10px 5px; opvulling: 2px; p border: 1px solid #EEE; ul, ol color: # 333; text-transform: hoofdletters;
LESS ondersteunt niet echt overervende stijlen zoals Sass en Stylus. In plaats van meerdere selectors aan een set eigenschappen toe te voegen, behandelt het overerving als een mixin zonder argumenten en worden de stijlen in hun eigen selectors geïmporteerd. Het nadeel hiervan is dat de eigenschappen worden herhaald in uw gecompileerde stylesheet. Dit is hoe je het zou instellen:
.blok margin: 10px 5px; opvulling: 2px; p .block; / * Stijlen overnemen van '.block' * / border: 1px solid #EEE; ul, ol .block; / * Stijlen overnemen van '.block' * / color: # 333; text-transform: hoofdletters;
.blok margin: 10px 5px; opvulling: 2px; p margin: 10px 5px; opvulling: 2px; border: 1px solid #EEE; ul, ol margin: 10px 5px; opvulling: 2px; kleur: # 333; text-transform: hoofdletters;
Zoals je kunt zien, de stijlen van .blok werden ingevoegd in de selectors waaraan we de erfenis wilden geven. Het is belangrijk op te merken dat prioriteit hier een probleem kan worden, dus wees voorzichtig.
In de CSS-community wordt het importeren van CSS afgekeurd omdat er meerdere HTTP-aanvragen voor nodig zijn. Importeren met een preprocessor werkt echter anders. Als u een bestand importeert uit een van de drie preprocessors, zal het letterlijk omvatten het importeren tijdens het compileren, waarbij slechts één bestand wordt aangemaakt. Houd er echter rekening mee dat het importeren regelmatig gebeurt .css bestanden compileert met de standaard @import "file.css"; code. Mixins en variabelen kunnen ook worden geïmporteerd en gebruikt in uw hoofdstijlblad. Import maakt het creëren van afzonderlijke bestanden voor de organisatie zeer de moeite waard.
/ * bestand. type * / body background: #EEE;
@import "reset.css"; @import "bestand. type"; p achtergrond: # 0982C1;
@import "reset.css"; body background: #EEE; p background: # 0982C1;
Kleurfuncties zijn ingebouwd in functies die bij het compileren een kleur zullen transformeren. Dit kan zeer handig zijn voor het maken van verlopen, donkere zweefkleuren en nog veel meer.
lichter ($ kleur, 10%); / * retourneert een kleur die 10% lichter is dan $ kleur * / donkerder ($ kleur, 10%); / * geeft een kleur 10% donkerder dan $ kleur * / verzadigd ($ kleur, 10%); / * geeft een kleur 10% meer verzadigd dan $ kleur * / desaturatie ($ kleur, 10%); / * geeft een kleur 10% minder verzadigd dan $ kleur * / grijsschaal ($ kleur); / * geeft grijstinten van $ color * / complement ($ color); / * retourneert complementkleur van $ color * / invert ($ color); / * geeft de omgekeerde kleur weer van $ color * / mix ($ color1, $ color2, 50%); / * mix $ color1 met $ color2 met een gewicht van 50% * /
Dit is slechts een korte lijst van de beschikbare kleurfuncties in Sass, een volledige lijst met beschikbare Sass-kleurfuncties is te vinden door de Sass-documentatie te lezen.
Kleurfuncties kunnen overal worden gebruikt waar een kleur valide CSS is. Hier is een voorbeeld:
$ kleur: # 0982C1; h1 achtergrond: $ kleur; rand: 3px effen donkerder ($ kleur, 50%);
lichter (@color, 10%); / * retourneert een kleur die 10% lichter is dan @color * / donker (@color, 10%); / * geeft een kleur 10% donkerder dan @color * / saturate (@color, 10%); / * retourneert een kleur die 10% meer verzadigd is dan @color * / desaturate (@color, 10%); / * retourneert een kleur die 10% minder verzadigd is dan @color * / spin (@color, 10); / * retourneert een kleur met een tint van 10 graden in tint dan @color * / spin (@color, -10); / * retourneert een kleur met een 10 graden kleinere tint dan @color * / mix (@ color1, @ color2); / * retourneer een mix van @ color1 en @ color2 * /
Een lijst van alle MINDER functies kan worden gevonden door de LESS-documentatie te lezen.
Hier is een voorbeeld van hoe een kleurenfunctie in MINDER te gebruiken:
@color: # 0982C1; h1 background: @color; rand: 3px effen donkerder (@color, 50%);
lichter (kleur, 10%); / * geeft een kleur 10% lichter dan 'kleur' * / donkerder (kleur, 10%); / * geeft een kleur 10% donkerder dan 'kleur' * / verzadigd (kleur, 10%); / * geeft een kleur 10% meer verzadigd dan 'kleur' * / desaturaat (kleur, 10%); / * retourneert een kleur die 10% minder verzadigd is dan 'kleur' * /
Een volledige lijst van alle Stylus-kleurfuncties is te vinden door de Stylus-documentatie te lezen.
Hier is een voorbeeld met de Stylus-kleurfuncties:
kleur = # 0982C1 h1 achtergrondkleur rand 3px effen donkerder (kleur, 50%)
Doen wiskunde in CSS is heel handig, en nu volledig mogelijk. Het is eenvoudig en dit is hoe het te doen:
body margin: (14px / 2); top: 50px + 100px; rechts: 100 px - 50 px; links: 10 * 10;
We hebben veel van de functies en nieuwe dingen behandeld die preprocessors kunnen doen, maar we hebben praktisch gezien niets aan de hand gehad. Hier is een korte lijst met toepassingen uit de praktijk waarbij het gebruik van een preprocessor levensreddend is.
Dit is een van de opgekropte redenen om een preprocessor te gebruiken en om een zeer goede reden - het bespaart veel tijd en tranen. Het maken van een mix in voorvoegsels van leveranciers is eenvoudig en bespaart veel herhaling en pijnlijke bewerkingen. Hier is hoe het te doen:
@mixin border-radius ($ values) -webkit-border-radius: $ values; -moz-border-radius: $ waarden; grensradius: $ waarden; div @ include border-radius (10px);
.grensradius (@waarden) -webkit-border-radius: @waarden; -moz-border-radius: @waarden; grensradius: @waarden; div .border-radius (10px);
grensradius (waarden) -webkit-border-radius: waarden; -moz-border-radius: waarden; grensradius: waarden; div border-radius (10px);
div -webkit-border-radius: 10px; -moz-border-radius: 10px; grensradius: 10px;
Faken van 3D-tekst met behulp van meerdere text-schaduwen is een slim idee. Het enige probleem is dat het veranderen van de kleur na het feit moeilijk en omslachtig is. Met behulp van mixins en kleurfuncties kunnen we 3D-tekst maken en de kleur direct wijzigen!
@mixin text3d ($ color) color: $ color; tekstschaduw: 1px 1px 0px donkerder ($ kleur, 5%), 2px 2px 0px donkerder ($ kleur, 10%), 3px 3px 0px donkerder ($ kleur, 15%), 4px 4px 0px donkerder ($ kleur, 20% ), 4px 4px 2px # 000; h1 font-size: 32pt; @ include text3d (# 0982c1);
.text3d (@color) color: @color; tekstschaduw: 1px 1px 0px donkerder (@color, 5%), 2px 2px 0px donkerder (@color, 10%), 3px 3px 0px donkerder (@color, 15%), 4px 4px 0px donkerder (@color, 20% ), 4px 4px 2px # 000; span font-size: 32pt; .text3d (# 0982c1);
text3d (kleur) kleur: kleur tekst-schaduw: 1px 1px 0px donkerder (kleur, 5%), 2px 2px 0px donkerder (kleur, 10%), 3px 3px 0px donkerder (kleur, 15%), 4px 4px 0px donkerder (kleur , 20%), 4px 4px 2px # 000 bereik lettertype: 32pt tekst3d (# 0982c1)
Ik heb ervoor gekozen de Stylus te schrijven text-schaduwen op één regel omdat ik de accolades heb weggelaten.
span font-size: 32pt; kleur: # 0982c1; tekstschaduw: 1px 1px 0px # 097bb7, 2px 2px 0px # 0875ae, 3px 3px 0px # 086fa4, 4px 4px 0px # 07689a, 4px 4px 2px # 000;
Het gebruik van nummerbewerkingen en variabelen voor kolommen is een idee dat ik bedacht toen ik voor het eerst met CSS-preprocessors speelde. Door een gewenste breedte in een variabele te declareren, kunnen we deze gemakkelijk zonder enige mentale berekening op de weg veranderen. Hier is hoe het gedaan is:
$ siteWidth: 1024px; $ gutterWidth: 20px; $ sidebarWidth: 300px; body margin: 0 auto; breedte: $ siteWidth; .content float: left; width: $ siteWidth - ($ sidebarWidth + $ gutterWidth); .sidebar float: left; margin-left: $ gutterWidth; breedte: $ sidebarWidth;
@siteWidth: 1024px; @gutterWidth: 20px; @sidebarWidth: 300px; body margin: 0 auto; width: @siteWidth; .content float: left; width: @siteWidth - (@ sidebarWidth + @ gutterWidth); .sidebar float: left; margin-left: @gutterWidth; width: @sidebarWidth;
siteWidth = 1024px; gutterWidth = 20px; sidebarWidth = 300px; body margin: 0 auto; breedte: siteWidth; .content float: left; width: siteWidth - (sidebarWidth + gutterWidth); .sidebar float: left; margin-left: gutterWidth; width: sidebarWidth;
body margin: 0 auto; breedte: 1024 px; .content float: left; breedte: 704px; .sidebar float: left; marge links: 20 px; breedte: 300 px;
Er zijn nogal wat eigenaardigheden aan het gebruik van een CSS-preprocessor. Ik ga een paar van de leuke bespreken, maar als je echt geïnteresseerd bent om ze allemaal te vinden, raad ik je aan om de documentatie door te nemen of, beter nog, gewoon een preprocessor te gebruiken in je dagelijkse codering.
Als je al enige tijd CSS hebt geschreven, weet ik zeker dat je een punt hebt bereikt waarop je ergens een fout hebt gemaakt en deze eenvoudig niet kunt vinden. Als je zoiets als mij bent, dan heb je waarschijnlijk de hele middag je haar uitgetrokken en verschillende dingen becommentarieerd om op de fout te jagen.
CSS-preprocessors rapporteren fouten. Het is zo simpel. Als er iets mis is met je code, vertelt het je waar, en als je geluk hebt: waarom. U kunt deze blogpost bekijken als u geïnteresseerd bent om te zien hoe fouten worden gemeld in de verschillende preprocessors.
Bij het compileren met een CSS-preprocessor wordt elke dubbele schuine streep verwijderd (bijv. //commentaar) en elke slash-asterisk-opmerking blijft (bijv. /* commentaar */). Dat gezegd hebbende, gebruik dubbele schuine streep voor opmerkingen die u wilt op de niet-gecompileerde zijde en slash-asterisk voor opmerkingen die u na de compilatie wilt laten zien.
Gewoon een opmerking: als u geminifieerd compileert, worden alle opmerkingen verwijderd.
Elke CSS-preprocessor die we hebben gedekt (Sass, LESS en Stylus) heeft een eigen unieke manier om dezelfde taak te vervullen, waardoor ontwikkelaars de mogelijkheid krijgen om nuttige, niet-ondersteunde functies te gebruiken terwijl ze de compatibiliteit van de browser en de netheid van de code behouden.
Hoewel dit geen vereiste is voor ontwikkeling, kunnen preprocessors veel tijd besparen en een aantal zeer nuttige functies hebben.
Ik moedig jullie allemaal aan om zoveel mogelijk van de preprocessors te proberen, zodat je effectief een favoriet kunt kiezen en weet waarom het de voorkeur geniet boven de vele anderen. Als je nog niet hebt geprobeerd om een preprocessor te gebruiken om je CSS te schrijven, raad ik je aan het eens te proberen.
Heb je een favoriete CSS preprocessor-functie die ik niet heb genoemd? Is er iets dat iemand kan doen dat een ander niet kan? Laat het ons weten in de comments hieronder!
Een speciale dank aan Karissa Smith, een zeer getalenteerde vriend van me die de voorbeeldminiatuur voor dit artikel heeft gemaakt.
Accentsconagua