7 replies

Convert css variables into sass

Hi,
I'm learning sass and I was wondering how can I write this code in sass?

--item-color

--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);
}

.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);
}

KP-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

--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);
}

.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);
}

Convert css variables into sass

Similar Threads

Convert css variables into sass

Similar Threads

Similar Threads

Similar Threads