Share
Variabelen bestaan onveranderlijk in alle programmeertalen, en dat komt omdat ze behoorlijk nuttig zijn. U hoeft slechts eenmaal een waarde in een variabele op te slaan, en u kunt deze later meerdere keren gebruiken, om herhaling te voorkomen. Hoewel CSS geen programmeertaal is, beperkt het gebrek aan variabelen toch zijn mogelijkheden.
Nu de native CSS-variabelen in de buurt zijn, zou ik willen bespreken hoe ze verschillen van variabelen die CSS-preprocessors bieden en hoe ze op de juiste manier moeten worden gebruikt.
De syntaxis voor het gebruik van aangepaste eigenschappen is een beetje uitgebreid en sommige ontwikkelaars vinden het misschien lelijk. Nog een factor die het gebruik van native variabelen ontmoedigt, is de bestaande ondersteuning door Sass-variabelen.
Hoewel preprocessors zoals Sass variabelen ondersteunen, hebben ze nog steeds enkele beperkingen die ik in deze sectie zal bespreken.
U kunt de preprocessorvariabelen niet bijwerken op basis van mediaquery's. Als u een site responsief wilt maken, moet u de waarden wijzigen op basis van schermafmetingen. Preprocessor-variabelen kunnen dat niet doen. Overweeg bijvoorbeeld de volgende code:
$ article-margin: 1em 0.5em; @media (min-width: 1024px) $ article-margin: 2em 1em; .my-artikel margin: $ article-margin;
Het zal compileren om:
.mijn artikel margin: 1em 0.5em;
Zoals u ziet, wordt de toewijzing in de mediaquery volledig genegeerd. Aan de andere kant zullen CSS-variabelen deze toewijzing in een mediaquery respecteren.
Evenzo kunnen preprocessor-variabelen niet cascaderen of erven. Als u native variabelen gebruikt, kunt u al deze beperkingen opheffen. Een nog belangrijker voordeel van het gebruik van native variabelen is dat ze interoperabel zijn. In tegenstelling tot Sass-variabelen, die alleen met Sass werken, werken native variables niet alleen met alle preprocessors, maar ook met gewone CSS-bestanden.
Om te begrijpen hoe u aangepaste CSS-eigenschappen gebruikt, beginnen we met een eenvoudig voorbeeld:
: root --text-color: crimson; .my-section color: var (- text-colour, black);
Wanneer u een aangepaste eigenschap definieert, begint u met het definiëren van de scope. Het bereik bepaalt de DOM-knooppunten waarnaar de aangepaste eigenschap mogelijk beschikbaar is. Gebruik makend van :wortel houdt in dat de aangepaste eigenschap beschikbaar is voor alle elementen. Houd er rekening mee dat alle aangepaste eigenschappen met twee streepjes moeten beginnen.
Als u van plan bent om een aangepaste eigenschap te gebruiken, moet u ernaar verwijzen met de var () functie. Deze functie vereist twee argumenten; de eerste is de aangepaste eigenschap zelf en de tweede is een fallback-waarde. De fallback-waarde wordt gebruikt wanneer een aangepaste eigenschap niet is gedeclareerd op een van de voorouders of als de waarde ongeldig is.
Houd er rekening mee dat aangepaste eigenschappen hoofdlettergevoelig zijn. Dit betekent dat --tekst kleur , --Tekst kleur, en --tekst kleur zijn allemaal verschillend.
Er zijn nog een aantal dingen waar u tijdens het gebruik rekening mee moet houden var ().
De eerste is dat de fallback-waarden door komma's kunnen worden gescheiden en in het geval van afgekorte waarden zoals marge, hoeft u geen afzonderlijke waarden met een komma te scheiden. Bijvoorbeeld, var (- para-font-family, "Lato", "Roboto"); stelt de fallback-waarde in als "Lato" "Roboto";. Evenzo ziet een terugval voor grensvastgoed eruit als:
a border: var (- link-border, 1px dotted brown);
De tweede is dat u variabelen niet als eigenschapnamen kunt gebruiken. De volgende code geeft een fout bij de tweede aangifte.
h1 --mijn-grootte: font-size; var (- my-size): 2em;
Laten we, met de basisbeginselen, eens kijken hoe we waarden kunnen opbouwen op basis van aangepaste eigenschappen. Als u een kaal getal aan een variabele hebt toegewezen, kunt u het niet direct aan een eenheid toevoegen om een geldige waarde te krijgen. Kortom, de onderstaande code is ongeldig:
.quote --t-padding: 20; padding-top: var (- t-padding) px; // Zal niet werken
U zult de gebruiken calc () functie om enkele berekeningen uit te voeren en uiteindelijke CSS-waarden op te bouwen. Om de bovenstaande code te laten werken, moet u deze wijzigen om er als volgt uit te zien:
.quote --t-padding: 20; padding-top: calc (var (- t-padding) * 1px); // Zal werken
Je bent niet beperkt tot rechtvaardig px units. U kunt alle geldige eenheden gebruiken die beschikbaar zijn in CSS.
Native CSS-variabelen kunnen ook communiceren met JavaScript. Om hun waarden te krijgen, kunt u de volgende code gebruiken:
Accentsconagua
var styles = getComputedStyle (document.documentElement); var bgValue = String (styles.getPropertyValue ('- background')). trim ();De trimmen () verwijdert witruimte aan beide uiteinden van uw waarde.
Als u de waarde van een aangepaste eigenschap wilt instellen, moet u de setProperty () methode.
document.documentElement.style.setProperty ('- background', 'black');De --achtergrond variabele is nu zwart. U kunt ook een aangepaste eigenschap instellen om naar een andere te verwijzen met behulp van de var () functie.
document.documentElement.style.setProperty ('- h-color', 'var (- p-color)');De bovenstaande verklaring is volledig geldig en stelt de waarde in van --h-color gelijk aan --p-color.
Variabelen kunnen veel flexibiliteit bieden als het gaat om het wijzigen van thema's op basis van de voorkeuren van een gebruiker. Vroeger moest u inline-styling gebruiken of meerdere stylesheets maken. Beide methoden hebben hun eigen nadelen. Het creëren van meerdere stylesheets is een hoofdpijn, en het gebruik van inline styling is een slechte oefening. Variabelen kunnen een gemakkelijke uitweg bieden in deze situatie. Hier is wat basis JavaScript om thema's dynamisch te veranderen:
document.getElementById ("groenachtig"). addEventListener ("klik", greenTheme); function greenTheme () var greenShades = document.documentElement.style; greenShades.setProperty ('- theme-font', 'Dosis'); greenShades.setProperty ('- heading-background', 'hsl (90, 70%, 60%)'); // Meer van dergelijke waarden instellen De bovenstaande code bevestigt een klikgebeurtenis aan onze themaknop. Zodra iemand erop klikt, de functie greentheme () stelt de waarden in van enkele variabelen om het algehele uiterlijk van de website te veranderen. Zoals u kunt zien, was deze methode veel eenvoudiger te implementeren dan de andere twee oplossingen.
Je kunt proberen een paar variabelen toe te voegen of meer thema's in deze CodePen-demo te maken.
De tutorial lijkt misschien te suggereren dat native CSS-variabelen superieur zijn aan variabelen in preprocessors zoals Sass, maar ik ondermijnt op geen enkele manier het nut van preprocessors. Het gebruik van verschillende CSS-preprocessors verhoogt de productiviteit. Ze hebben veel meer te bieden dan alleen variabelen. Talloze ingebouwde functies, loops en voorwaardelijke verklaringen kunnen dingen snel gedaan krijgen.
Deze tutorial wijst er alleen op dat zelfs als native variabelen een rare syntaxis hebben, ze nog steeds veel meer te bieden hebben en het waard zijn om te gebruiken in uw projecten. Als je vragen hebt over deze tutorial, laat me dit dan weten in de comments.
