#What am I doing wrong! 🤦 SCSS troubles

7 messages · Page 1 of 1 (latest)

fluid scroll
#

@copper beacon

I am getting the error $channels must be a space-separated list.

How do I correct this? I have two lines in _variables.scss like so.

$accent: 124, 58, 237;
$accent-gradient: linear-gradient(45deg, rgb($accent), #da62c4 30%, white 60%);

I'm trying to use these variables in Card.astro like so:

---
import '../styles/_variables.scss';
---
<!--html -->
<style lang="scss">
    @use '../styles/_variables.scss' as v; 
  body {
    color: $v.accent-gradient;
  }
</style>
crystal eagleBOT
#
Still waiting for an answer?

It looks like no-one has responded to your question yet. People might not be available right now or don’t know how to answer your question. Want an answer while you wait? Try asking our experimental bot in #1095492539085230272.

tender oak
#

Alright, looks like a couple issues. Remove the commas in $accent. You can’t set text color (or any color for that matter) to a gradient because in css a gradient is basically an image. If you want to set the body background, swap color for background. You can set text to a gradient, but it’s a little complicated. When I get to my computer, I’ll send you the fixed code

#

Disclaimer: I don’t actually know scss, I know css, googled, and played around on codepen 😆

tender oak
#

_variables.scss

$accent: 124 58 237;
$accent-gradient: linear-gradient(45deg, rgb($accent), #da62c4 30%, white 60%);

Card.astro

---
import '../styles/_variables.scss';
---
<!--html -->
<style lang="scss">
    @use '../styles/_variables.scss' as v; 
  body {
    background: $v.accent-gradient;
  }
</style>
#

If you want text gradients (I don't recommend doing this for the whole body) This looks like a good way to do it