 h1 {
  color: green;
}
 
h2 {
  color: blue;
}
 
p {
  color: red;
}

Farvepalette i CSS

 html {
  --primary-color: red;
  --secondary-color: blue;
  --brand-accent-color: green;
  
  --spacing-16: 1em;
}
 
h1 {
  color: var(--brand-accent-color);
  padding-bottom: var(--padding);
}
 
p {
  color: var(--primary-color);
}

 h1 {
  color: #bada55;
}
 
h2 {
  color: #ff2291;
}
 
p {
  color: #5000ca;
}

Farvepalette i CSS

 html {
  --primary-color: red;
  --secondary-color: blue;
  --brand-accent-color: green;
  
  --spacing-16: 1em;
}
 
h1 {
  color: var(--brand-accent-color);
  padding-bottom: var(--padding);
}
 
p {
  color: var(--primary-color);
}

???

 h1 {
  color: #bada55;
  padding-bottom: 1rem;
}
 
h2 {
  color: #ff2291;
  padding-bottom: 1rem;
}
 
p {
  color: #5000ca;
  padding-bottom: 1rem;
}

Farvepalette i CSS

 html {
  --primary-color: red;
  --secondary-color: blue;
  --brand-accent-color: green;
  
  --spacing-16: 1em;
}
 
h1 {
  color: var(--brand-accent-color);
  padding-bottom: var(--padding);
}
 
p {
  color: var(--primary-color);
}

Farvepalette i CSS

 html {
  --primary-color: #bada55;
  --secondary-color: #ff2291;
  --brand-accent-color: #5000ca;
  
  --spacing-16: 1rem;
}
 
h1 {
  color: var(--brand-accent-color);
  padding-bottom: var(--spacing-16);
}
 
p {
  color: var(--primary-color);
  padding-bottom: var(--spacing-16);
}

 h1 {
  color: #bada55;
  padding-bottom: 1rem;
}
 
h2 {
  color: #ff2291;
  padding-bottom: 1rem;
}
 
p {
  color: #5000ca;
  padding-bottom: 1rem;
}

Farvepalette i CSS

 html {
  --primary-color: #bada55;
  --secondary-color: #ff2291;
  --brand-accent-color: #5000ca;
  
  --spacing-16: 1rem;
}
 
h1 {
  color: var(--brand-accent-color);
  padding-bottom: var(--spacing-16);
}
 
p {
  color: var(--primary-color);
  padding-bottom: var(--spacing-16);
}

 h1 {
  color: #bada55;
  padding-bottom: 1rem;
}
 
h2 {
  color: #ff2291;
  padding-bottom: 1rem;
}
 
p {
  color: #5000ca;
  padding-bottom: 1rem;
}

 html {
  --primary-color: #bada55;
  --secondary-color: #ff2291;
  --brand-accent-color: #5000ca;
  
  --spacing-16: 1rem;
}
 
h1 {
  color: var(--brand-accent-color);
  padding-bottom: var(--spacing-16);
}
 
p {
  color: var(--primary-color);
  padding-bottom: var(--spacing-16);
}

Custom Properties

 html {
  --primary-color: #bada55;
}

 h1 {
  color: var(--primary-color);
}

Definér

Brug

--dit-variabel-navn: [værdi];

[property]: var(--dit-variabel-navn);

Custom Properties

 html {
  --primary: #5000ca;
  --secondary: #463866;
  --accent: #fb28a8;
 
  --space-xxs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-xxl: 6rem;
}

eksempel

"Consistency"

Custom Properties

 .grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}
 
@media (min-width: 600px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

eksempel

Custom Properties

 .grid {
  --cols: 1fr 1fr 1fr;
  display: grid;
  grid-template-columns: var(--cols);
}
 
@media (min-width: 600px) {
  .grid {
    --cols: 1fr 1fr 1fr 1fr 1fr;
  }
}

eksempel

Custom Properties

 .grid {
  --cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
}
 
@media (min-width: 600px) {
  .grid {
    --cols: 5;
  }
}

repeat( 3, 1fr )

repeat( 5, 1fr )

eksempel

Custom Properties

 :root {
  --my-color: green;
}
 
p {
  color: var(--my-color);
}
 
aside p {
  --my-color: red;
}

Instead of this

We can do this

Custom Properties

scoping

 p {
  color: var(--my-color, green);
}
 
aside p {
  --my-color: red;
}

Instead of this

We can do this

Custom Properties

scoping

 .object-1 {
  --move-to: 100px;
}
 
.object-2 {
  --move-to: 400px;
}
 
[class|="object"] {
  animation: move 1s linear forwards;
}
 
@keyframes move {
  to {
    transform: translateX(var(--move-to));
  }
}

	html {
	--background-color: #222;
	--foreground-color: #fafafa;
	}

	@media (prefers-color-scheme: dark) {
	html {
	--background-color: #fafafa;
	--foreground-color: #222;
	}
	}

	body {
	background-color: var(--background-color);
	color: var(--foreground-color);
	}

	.grid {
	--grid-size: repeat(3, 1fr);

	display: grid;
	grid-template-rows: var(--grid-size);
	grid-template-columns: var(--grid-size);
	}

	@property --colorPrimary {
	syntax: '<color>';
	initial-value: magenta;
	inherits: false;
	}

	@property --colorPrimary {
	syntax: '<color>';
	initial-value: magenta;
	inherits: false;
	}

	/* CSS colors w/ aplha channel */
	div {
	color: #6a00ff80;
	color: rgb(106 0 255 / 50%);
	color: hsl(265deg 100% 50% / 50%);
	}

	html {
	--primary-color: red;
	--secondary-color: blue;
	--brand-accent-color: green;

	--spacing-16: 1em;
	}

	h1 {
	color: var(--brand-accent-color);
	padding-bottom: var(--padding);
	}

	p {
	color: var(--primary-color);
	}

	h1 {
	color: #bada55;
	padding-bottom: 1rem;
	}

	h2 {
	color: #ff2291;
	padding-bottom: 1rem;
	}

	p {
	color: #5000ca;
	padding-bottom: 1rem;
	}

	html {
	--primary-color: #bada55;
	--secondary-color: #ff2291;
	--brand-accent-color: #5000ca;

	--spacing-16: 1rem;
	}

	h1 {
	color: var(--brand-accent-color);
	padding-bottom: var(--spacing-16);
	}

	p {
	color: var(--primary-color);
	padding-bottom: var(--spacing-16);
	}

	html {
	--primary: #5000ca;
	--secondary: #463866;
	--accent: #fb28a8;

	--space-xxs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2rem;
	--space-xl: 3rem;
	--space-xxl: 6rem;
	}

	.grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	}

	@media (min-width: 600px) {
	.grid {
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
	}
	}

	.grid {
	--cols: 1fr 1fr 1fr;
	display: grid;
	grid-template-columns: var(--cols);
	}

	@media (min-width: 600px) {
	.grid {
	--cols: 1fr 1fr 1fr 1fr 1fr;
	}
	}

	.grid {
	--cols: 3;
	display: grid;
	grid-template-columns: repeat(var(--cols), 1fr);
	}

	@media (min-width: 600px) {
	.grid {
	--cols: 5;
	}
	}

	:root {
	--my-color: green;
	}

	p {
	color: var(--my-color);
	}

	aside p {
	--my-color: red;
	}

	p {
	color: var(--my-color, green);
	}

	aside p {
	--my-color: red;
	}

	.object-1 {
	--move-to: 100px;
	}

	.object-2 {
	--move-to: 400px;
	}

	[class\|="object"] {
	animation: move 1s linear forwards;
	}

	@keyframes move {
	to {
	transform: translateX(var(--move-to));
	}
	}

	<div id="context">
	<p>Some text</p>
	</div>

Custom Props