CSS Variabelen

CSS Custom Properties

Wat?

CSS Custom Properties (ook bekend als CSS Variables) maken het mogelijk om herbruikbare waarden te definiëren die door je hele stylesheet gebruikt kunnen worden.

.heading {
	color: hsl(0,0%,0%);
}
:root {
  --heading-color: hsl(0,0%,0%);
}

.heading {
	color: var(--heading-color);
}

Zonder

Met

Fallback

Indien een variabele niet bestaat kan je een backup (of fallback) toevoegen.

:root {
  --heading-color: hsl(0,0%,0%);
}

.heading {
	color: var(--heading-color, hsl(0,0%,0%));
}

Scope en cascade

Variabelen kunnen gescoped worden op=
- :root = voor de volledige scope van de CSS (globale variabele)

- selector = voor de selector scope en de children (lokale variabele)

:root {
  --heading-color: hsl(0,0%,0%);
}

.heading {
	color: var(--heading-color, hsl(0,0%,0%));
}

.introduction {
  	--intro-color: hsl(0,0%,20%);
      
	color: var(--intro-color);
}

Overschrijven

De waarde van een variabele kan overschreven worden.

Handig om minder properties te schrijven.

:root {
  --heading-color: hsl(0,0%,0%);
}

.heading,
.subtitle {
	color: var(--heading-color, hsl(0,0%,0%));
}

.subtitle {
  	--heading-color: hsl(0,0%,20%);
}

Kan voor alle CSS waardes (nummer + unit) gebruikt worden.

Niet enkel voor kleuren

:root {
  --primary-color: hsl(204, 70%, 53%);
  --secondary-color: hsl(145, 63%, 49%);
  --text-color: hsl(0, 0%, 20%);
  --background-color: hsl(0, 0%, 100%);
  --border-radius: 1rem;
  --spacing-unit: 1rem;
  --font-size-large: 2rem;
  --transition-duration: 0.3s;
}

Met de calc() functie kan je nieuwe waarden berekenen in je variabelen.

Extra: berekeningen

:root {
  --spacing-unit: 8px;
  --spacing-sm: calc(var(--spacing-unit) * 1);
  --spacing-md: calc(var(--spacing-unit) * 2);
  --spacing-lg: calc(var(--spacing-unit) * 4);
}

Voorbeelden

Typografie systemen

:root {
  --font-size-base: 16px;
  --font-size-sm: 0.875rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  
  --font-weight-normal: 400;
  --font-weight-bold: 700;
}

Consistente spatiëring

:root {
  --spacing-unit: 1rem;
  --spacing-sm: calc(var(--spacing-unit) * 1);
  --spacing-md: calc(var(--spacing-unit) * 2);
  --spacing-lg: calc(var(--spacing-unit) * 4);
}

.card {
  padding: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

Transitie values/variaties

:root {
  --transition-fast: 150ms;
  --transition-base: 300ms;
  --transition-slow: 500ms;
  --easing: cubic-bezier(0.4, 0, 0.2, 1);
}

.modal {
  transition: 
	opacity 
	var(--transition-base) 
	var(--easing);
}

Component variaties

.button {
  --btn-bg: hsl(217, 91%, 60%);
  --btn-padding: 1rem 2rem;
  
  background: var(--btn-bg);
  padding: var(--btn-padding);
}

.button--small {
  --btn-padding: .5rem 1rem;
}

.button--danger {
  --btn-bg: hsl(0, 84%, 60%);
}

CSS variabelen

By Lecturer GDM

CSS variabelen

Writing clean HTML and CSS

  • 75

More from Lecturer GDM