Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
7 replies
C4rlos

Convert css variables into sass

Hi,
I'm learning sass and I was wondering how can I write this code in sass?
--item-color is what gives me most trouble to write in sass.

Taken from Kevin gh (https://github.com/kevin-powell/results-summary-component-main)

.summary-item {
  ...
  background-color: hsl(var(--item-color), .1);
}

.summary-item svg {
  stroke: hsl(var(--item-color));
}

.summary-item-title {
  color: hsl(var(--item-color));
} 

.summary-item[data-item-type="accent-1"] {
  --item-color: var(--clr-accent-1);
}
.summary-item[data-item-type="accent-2"] {
  --item-color: var(--clr-accent-2);
}
.summary-item[data-item-type="accent-3"] {
  --item-color: var(--clr-accent-3);
}
.summary-item[data-item-type="accent-4"] {
  --item-color: var(--clr-accent-4);
}
Was this page helpful?