CSS: Zmienne

Przykładowe zmienne · 1 min

$c-orange: orange;
$c-green: yellowgreen;
$c-yellow: yellow;
$c-blue: aqua;
$c-purple: rebeccapurple;

Efekt końcowy, uproszczony · 11 min

$c-orange: orange;
$c-green: yellowgreen;
$c-yellow: yellow;
$c-blue: aqua;
$c-purple: rebeccapurple;
$c-white: white;

$c-orange-lighter: lighten($c-orange, 20%);
$c-purple-lighter: lighten($c-purple, 20%);


:root {
 --orange: #{$c-orange};
 --green: #{$c-green};
 --yellow: #{$c-yellow};
 --blue: #{$c-blue};
 --purple: #{$c-purple};
 
 
 --primary: var(--orange);
 --secondary: var(--green);
 --tertiary: var(--yellow);
 
 --primary-lighter: #{$c-orange-lighter};
 --secondary-lighter: #{$c-purple-lighter};
 --tertiary-lighter: var(--orange);
 
}

.item-1 {
  $custom-size: 5rem;
  width: $custom-size;
  height: $custom-size;
  background: var(--primary);
  &:hover {
   background: var(--primary-lighter);
  }
}


.item-2 {
  background: var(--green);
}

.item-3 {
  background: var(--yellow);
  color: black;
}

.item-4 {
  background: var(--purple);
}

.item-5 {
  background: var(--blue);
  color: black;
}