Why aren't CSS variables "calculating" the color?

Question

Why aren't CSS variables "calculating" the color?

Can anyone help me understand why I am having trouble assigning block-level CSS variables using values from SASS? Specifically, the line

color: hsl(3, 75%, var(--main-color-l));

is not producing any output. My setup involves a static site generator with SCSS pipes.

.reveal .palette1 {
    --main-color-h: $red-h;
    --main-color-s: $red-s;
    --main-color-l: $red-l;
    --main-color-o: $red-o;
    h2 {
        /**/color: hsl(3, 75%, var(--main-color-l));/**/
    }
    h4 {
        color: hsla($red-h, $red-s, $red-l * 1.3, $red-o);
    }
}

css sass

Answer 1

Answer №1

Here is a solution that has been effective for me:

$blue-h: 200;
$blue-s: 80%;
$blue-l: 70%;
$blue-o: .8;

:root {
--main-color-h: #{$blue-h};
--main-color-s: #{$blue-s};
--main-color-l: #{$blue-l};
--main-color-o: #{$blue-o};
}

h2 {
    color: hsl(3, 75%, var(--main-color-l));
}

h4 {
    color: hsla($blue-h, $blue-s, $blue-l, $blue-o);
}

Answer 2

Here is a solution that has been effective for me:

$blue-h: 200;
$blue-s: 80%;
$blue-l: 70%;
$blue-o: .8;

:root {
--main-color-h: #{$blue-h};
--main-color-s: #{$blue-s};
--main-color-l: #{$blue-l};
--main-color-o: #{$blue-o};
}

h2 {
    color: hsl(3, 75%, var(--main-color-l));
}

h4 {
    color: hsla($blue-h, $blue-s, $blue-l, $blue-o);
}

Why aren't CSS variables "calculating" the color?

Answer №1

Similar questions

Is there a way to prevent cards in a carousel slide from wrapping onto two lines?

What is the best way to choose all elements except for <body>? Alternatively, how can <body> be styled to its default appearance?

The Alert Component fails to display when the same Error is triggered for the second time

"When setting up a window.EventListener, the Div element fails to be hidden when setting its display property to 'none

The div element should stretch to occupy the entire height of the screen

What about CSS block elements that have a width relative to their parent container

Seeking a solution for resizing the Facebook plugin comments (fb-comments) using Angular when the window is resized

Display toolbar title on small screens in separate lines

Troubleshooting the malfunctioning of the Bootstrap slide animation

Automatically adjusting the height of a Bootstrap carousel as the token-input list grows in size

Conceal the scrollbar track while displaying the scrollbar thumb

Using jQuery UI to create sortable lists that are connected and have hidden overflow features

Learn how to incorporate a HTML page into a DIV by selecting an Li element within a menu using the command 'include('menu.html')'

Display the HTML element prior to initiating the synchronous AJAX request

Tips for creating a full-screen background image using HTML and CSS

AngularJS feature that enables resizing modal popup dimensions through a modal service

Have you ever wondered how to disable a tooltip in React Material UI after clicking on it? Let

Laravel application faces issues with URL rewriting generating incorrect URLs in compiled CSS files

To add a code snippet to the right side of a paragraph using CSS, place it at the end of the

Enable a button or class to dynamically alter its color