SASS loop encountering issue when trying to adjust hsla lightness, error is due to $lightness value being treated as a string instead of a number for 'hsla'

Question

SASS loop encountering issue when trying to adjust hsla lightness, error is due to $lightness value being treated as a string instead of a number for 'hsla'

I'm attempting to create a loop that gradually decreases the lightness value of hsla over a set number of iterations. However, when I execute the loop, I encounter an error stating

$lightness: "96.77419" is not a number for

hsla'`. Can someone please help me identify where I've made a mistake and suggest improvements?

Code

$iterations: 31;
$base: 100;
$math: $base / $iterations;

li {
  background: #919190;
  height: 40px;
  line-height: 40px;
  color: #191919;
  text-align: center;
}

@for $i from 1 through $iterations {
 .options:nth-of-type(#{$i}) {
    background: hsla(60, 1, #{($base - $math)}, 1);
}

Codepen Example: http://codepen.io/styler/pen/BHwjc

Sassmeister Demo:

My goal is to create a gradual increase in color to generate a shade palette. I am looking to utilize this process multiple times with different parameters. Any additional advice on optimizing this would be greatly appreciated.

css sass

Answer 1

Answer №1

The issue with your code is that you are mistakenly using strings instead of numbers, which is causing errors in the output. Notice how the quotations indicate that a string is being used. This causes hsla() to receive a string instead of numerical arguments, resulting in the incorrect representation of colors.

To fix this, make sure to pass numbers instead of strings:

.bar {
    background: hsla(180, 0.5, ($base - $math), 1);
}

Answer 2

The issue with your code is that you are mistakenly using strings instead of numbers, which is causing errors in the output. Notice how the quotations indicate that a string is being used. This causes hsla() to receive a string instead of numerical arguments, resulting in the incorrect representation of colors.

To fix this, make sure to pass numbers instead of strings:

.bar {
    background: hsla(180, 0.5, ($base - $math), 1);
}

SASS loop encountering issue when trying to adjust hsla lightness, error is due to $lightness value being treated as a string instead of a number for 'hsla'

Answer №1

Similar questions

Trouble with the Width of Selection Box Options

Customizing the Style of Mat-Form-Field

Changing selections in jQuery may not work properly on certain mobile and IE browsers

Can you tell me where the templates store their icons?

Tips for accessing a DOM element's ::before content using JavaScript

Encountering issues with styling the search bar using CSS and unable to see any changes reflected

What is the most effective method for linking css and js files?

JavaScript does not function properly with dynamically loaded content

Why does pressing "enter" create a line break in HTML when typing?

How can I add an SVG tooltip that appears when I hover my

Utilizing Bootstrap 5 to showcase a variety of images that adapt to different screen sizes

Utilizing the background-clip property with a gradient overlay

Start fresh with your list styling in Sass/CSS

Unable to apply styling to border when clicking on radio button in React

Ways to center text horizontally in a line with the help of bootstrap styles?

JavaScript alert box

Customize Material UI components by incorporating SASS classes

I attempted to initiate a transition using JavaScript, but unfortunately it failed to execute

In the case that the parent contains a child class, consider using CSS or JQuery to conceal the second child class within the

Why is there white space/padding occurring within this div element?