Kevin Powell - Community•11mo ago

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

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

6 Replies

croganm•11mo ago

Well, if you don't mind me asking, any reason you would want to? I love SCSS and use it all the time, but CSS variables are native and work well

Kevin Powell•11mo ago

Something like this?

@for $i from 1 through 4 {
    .summary-item[data-item-type="accent-#{$i}"] {
      --item-color: var(--clr-accent-#{$i})   
    }
}

@for $i from 1 through 4 {
    .summary-item[data-item-type="accent-#{$i}"] {
      --item-color: var(--clr-accent-#{$i})   
    }
}

Like croganm said, I'd keep them as custom props, though you could have them as sass variables if you really wanted to

croganm•11mo ago

That's a good middle ground and how SASS should be used. That way you can use the functionality of SASS but keep the CSS Variables

C4rlos•11mo ago

Just finished this project from frontend mentor, then watched video from Kevin. Just wondered how I could do it in sass. Another lesson learned that I could mix both. Btw really nice vid @kevinpowell so much to learn from this project made by you. Please don't stop doing this series 😉 @croganm I'm learning and trying different approaches to css, sass etc.

C4rlos•11mo ago

I made sth like this:

$clr-accent-1: hsl(0, 100%, 67%);
.summary-stat {
    background-color: var(--item-color);
}
.summary-stat[data-stat-bg="1"] {
    --item-color: $clr-accent-1;
}

$clr-accent-1: hsl(0, 100%, 67%);
.summary-stat {
    background-color: var(--item-color);
}
.summary-stat[data-stat-bg="1"] {
    --item-color: $clr-accent-1;
}

but does not work 😦 How can I make it work having my colors in separate _colors.scss file, not in :root?

C4rlos•11mo ago

Think I get it slowly:

$clr-accent-1: hsl(0, 100%, 67%);

:root {
    --clr-accent-1: #{$clr-accent-1};
}
.summary-stat[data-stat-bg="1"] {
    --item-color: var(--clr-accent-1);
}
.summary-stat {
    background-color: var(--item-color);
}

$clr-accent-1: hsl(0, 100%, 67%);

:root {
    --clr-accent-1: #{$clr-accent-1};
}
.summary-stat[data-stat-bg="1"] {
    --item-color: var(--clr-accent-1);
}
.summary-stat {
    background-color: var(--item-color);
}

Bit overhelming atm 🙂

Gaming

Programming

Convert css variables into sass