Slik bruker du variabler i CSS og effektiviserer stylingen din

De fleste nettsteder bruker CSS for å polere utseendet og style forskjellige nettsidekomponenter. CSS, eller Cascading Style Sheet, er ikke teknisk sett et programmeringsspråk. Imidlertid kan CSS brukes med programmeringsspråk som JavaScript for å lage responsive og interaktive nettsider.

Hvis du har brukt programmeringsspråk, som JavaScript, vet du at du kan deklarere en variabel, tilordne den en verdi og gjenbruke den i ulike deler av koden din. Den gode nyheten er at du kan bruke det samme konseptet i CSS.

Denne artikkelen vil definere CSS-variabler, beskrive fordelene deres og vise deg hvordan du deklarerer og bruker en variabel i CSS.

Hva er variabler i CSS?

CSS-variabler er egendefinerte egenskaper som lar webutviklere lagre verdier de kan gjenbruke gjennom stilarket. Du kan for eksempel deklarere skriftstilen, bakgrunnsfargen og skriftstørrelsen som du kan gjenbruke med elementer som overskrifter, avsnitt og divs i kodebasen.

Hvorfor bruke CSS-variabler? Dette er noen av grunnene;

• Gjør det enklere å oppdatere kode: Når du erklærer en variabel, kan du gjenbruke hele stilarket uten å oppdatere hvert element manuelt.
• Reduserer repetisjon: Etter hvert som kodebasen din vokser, vil du oppdage at du har lignende klasser og elementer. I stedet for å skrive CSS-kode for hvert element, kan du ganske enkelt bruke CSS-variabler.
• Gjør koden mer vedlikeholdbar: Kodevedlikehold er viktig hvis du vil at virksomheten din skal fortsette.
• Forbedrer lesbarheten: Den moderne verden oppmuntrer til samarbeid. Bruk av variabler i CSS resulterer i en kompakt kodebase som er lesbar.
• Enkel å opprettholde konsistens: CSS-variabler kan hjelpe deg å opprettholde en konsistent stil etter hvert som kildekoden din vokser eller appstørrelsen øker. Du kan for eksempel deklarere margene, utfylling, skriftstil og farger som skal brukes i knappene dine på hele nettstedet.

Hvordan deklarere variabler i CSS

Siden du vet hva variabler i CSS er og hvorfor du bør bruke dem, kan vi gå videre og illustrere hvordan du deklarerer dem.

For å erklære en CSS-variabel, start med elementets navn, og skriv deretter to bindestreker (–), ønsket navn og verdi. Den grunnleggende syntaksen er;

element {

--variable-name: value;

}

For eksempel, hvis du vil bruke utfylling i hele dokumentet ditt, kan du erklære det som;

body { 

--padding: 1rem;

}

Omfang av variabler i CSS

CSS-variabler kan scopes lokalt (tilgjengelig innenfor et spesifikt element) eller globalt (tilgjengelig i hele stilarket).

Lokale variabler

Lokale variabler legges til spesifikke velgere. Du kan for eksempel legge dem til på en knapp. Dette er et eksempel;

.button {

    --button-bg-color: #33ff4e;

  }

Bakgrunnsfargevariabelen er tilgjengelig på knappevelgeren og dens underordnede.

Globale variabler

Når de er deklarert, kan du bruke globale variabler med et hvilket som helst element i koden din. Vi bruker pseudoklassen :root for å deklarere globale variabler. Dette er hvordan vi erklærer dem;

:root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

  }

I koden ovenfor kan du bruke hvilken som helst av variablene som er deklarert med forskjellige elementer, for eksempel overskrifter, avsnitt, divs eller til og med hele kroppen.

Hvordan bruke variabler i CSS

Vi skal lage et prosjekt for demonstrasjonsformål og legge til index.html og styles.css filer.

I filen index.html kan vi ha en enkel div med to overskrifter ( h1 og h2) og et avsnitt (p).

<div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

I style.css-filen kan vi ha følgende;

:root {

    --primary-color: grey;

    --secondary-color: orange;

    --font-weight: 700:

    --font-size: 16px;

    --font-style: italic;

  }

  body {

    background-color: var(--primary-color);

    font-size: var(--font-size);

  }

  h1 {

    color: var(--secondary-color);

    font-style: var(--font-style)

  }

  h2 {

    font-weight: var(--font-weight)

  }

  p {

    font-size: calc(var(--font-size) * 1.2);

  }

Når nettsiden er gjengitt vil vi ha følgende;

Fra koden ovenfor har vi erklært globale variabler i :root-elementet. Vi må bruke nøkkelordet var for å bruke den globale variabelen i alle elementene våre. For eksempel, for å bruke bakgrunnsfargen vi erklærte som en global variabel, presenterer vi koden vår som følger;

bakgrunnsfarge: var(–primærfarge);

Sjekk alle de andre elementene, og du vil merke en trend i hvordan søkeordet var brukes.

Bruk CSS-variabler med JavaScript

Vi vil bruke lokale og globale variabler for å illustrere hvordan man bruker CSS-variabler med JavaScript.

Vi kan legge til et varslingselement til vår eksisterende kode;

Vårt nye index.html dokument vil være som følger;

<div>

      <h1>Hello Front-end Dev!!!!</h1>

      <h2>This is how to use variables in CSS.</h2>

      <p> Keep scrolling</p>

    </div>

    <div class="alert">Click me!</div>

Vi kan style variabelen vår. Legg til følgende kode til din eksisterende CSS-kode;

.alert {

    --bg-color: red; /* Define local variable */

    background-color: var(--bg-color); /* Use the local variable for the background color */

    padding: 10px 20px;

    border-radius: 4px;

    font-weight: var(--font-weight); /*Use the global variable for font weight*/

    width: 50px;

  }

Vi har gjort følgende;

• Definerte en lokal variabel inne i varslingselementet;

–bg-farge: rød

• Brukte nøkkelordet var for å få tilgang til denne lokale variabelen;

bakgrunnsfarge: var(–bg-farge);

• Brukte den globale variabelen vi deklarerte tidligere som vår font-weight;

font-weight: var(–font-weight);

Legg til JavaScript-kode

Vi kan gjøre varslingselementet vårt responsivt; når du klikker på den, får du opp en popup i nettleseren din som sier; «Vi har brukt CSS-variabler med JavaScript!!!!».

Vi kan legge til JavaScript-kode direkte i HTML-koden ved å omslutte den ved å bruke