Use CSS Variable with SCSS Darken and Ligthen Filter

use css variable with scss darken and ligthen filter

This can't really work because SASS is a preprocessor, and CSS custom properties can be dynamically changed at run-time. For SASS to be able to preprocess this with darken, it would have to replace the custom property with a static value, in which case the usefulness of the custom property is lost.

Using sass lighten functions with variable not working

You can't use SASS variables in CSS variables as those are compiled before CSS is running. To solve this you could move the CSS variable to be defined by SASS, like this

$text-color: #383143;
:root, [data-theme="default"] {
  --text-color: #{$text-color};
}

Sass darken function not compiling the output hex color

Interpolate the whole value like #{darken(...)} because otherwise the SCSS transpiler will think it is a CSS value, thus ignoring it.

At the same time, remove interpolation inside the darken function because it is not needed.

Also, remove the calc() too because SCSS will automatically calculate the value. Use calc only when you need CSS to calculate the value.

$colors: (
  primary: #e32249,
  secondary: #0969a2
);

:root,
#root {
  @each $name, $color in $colors {
    --color-#{$name}: #{$color};

    @for $i from 1 through 10 {
      --color-#{$name}-dark-#{$i}: #{darken($color, $i * 10%)};
      --color-#{$name}-light-#{$i}: #{lighten($color, $i * 10%)};
    }
  }
}

Lighten RGB with pure CSS

This isn't possible.

However

Lightening colors is very easy with hsl so if you store the hsl color along with the RGB like this:

:root {
  --redColor: 142,  49,  42;
  --redColor_h: 4;
  --redColor_s: 54%;
  --redColor_l: 36%;
}

Then you can lighten the color with this SASS mixin:

@function lighten($shadeCode, $amount) {
  @return hsl(var(--#{$shadeCode}_h), var(--#{$shadeCode}_s), calc(#{var(--#{$shadeCode}_l)} + #{$amount}));
}

And use it like this:

background-color: lighten('redColor', 25%);

And boom you got lighter colors.

Dynamically change color to lighter or darker by percentage CSS

All modern browsers have had 100% filter support since January 2020. Even UC Browser for Android (instead of Chrome, on the $80 phones) supports it.

a {
    /* a nice, modern blue for links */
    color: #118bee;
}
a:active {
    /* Darken on click by 15% (down to 85%) */
    filter: brightness(0.85);
}

Additionally, you can control this dynamically with CSS variables, which have been supported by most browsers since October 2017 (excluding QQ):

:root {
    --color: #118bee;
    --hover-brightness: 1.2;
}
a {
    color: var(--color);
}
a:active {
    /* Darken on click */
    filter: brightness(var(--hover-brightness));
}

Not my project, but one that's great to look at for a real-world example of how great modern CSS can be, check out: MVP.css

Original Answer

If you're using a stack which lets you use Sass or Less, you can use the lighten function:

$linkcolour: #0000FF;

a {
  color: $linkcolour;
}

a.lighter {
  color: lighten($linkcolour, 50%);
}

There's also darken which does the same, but in the opposite direction.

Darken function for css theming - Error: argument `$color` of `darken($color, $amount)` must be a color

var(--main-colour) is an CSS function that is interpolated at runtime (so it will be resolved AFTER the compilation of SCSS).
SCSS is compiled, therefore all its functions are calculated before and doesnt change run-time.

The problem in your code happens because darken function requires a valid color to perform calculations on, and during compilation time all it gets is var(--main-colour) and not the color itself. (darken is an SCSS function, and not a CSS function, so it cannot be changed runtime).

How do I apply opacity to a CSS color variable?

You can't take an existing color value and apply an alpha channel to it. Namely, you can't take an existing hex value such as #f0f0f0, give it an alpha component and use the resulting value with another property.

However, custom properties allow you to convert your hex value into an RGB triplet for use with rgba(), store that value in the custom property (including the commas!), substitute that value using var() into an rgba() function with your desired alpha value, and it'll just work:

:root {
  /* #f0f0f0 in decimal RGB */
  --color: 240, 240, 240;
}

body {
  color: #000;
  background-color: #000;
}

#element {
  background-color: rgba(var(--color), 0.8);
}

<p id="element">If you can see this, your browser supports custom properties.</p>

@mixin setBgColorAndHover($baseColor)
    background-color: $baseColor
    &:hover
          background-color: darken($baseColor, 5%)

.button
    +setBgColorAndHover($green) // as $green is a color variable I use.