SASS for loop updating hsla lightness returns error $lightness: “96.77419” is not a number for `hsla’

by

Sass gave you the answer: you’re using strings when you shouldn’t be (note the quotations in the error, that’s a sure sign of a string). Interpolation gives you a string all the time no matter what. Because hsla() expects all arguments to be numbers, passing it a string results in getting the string hsla() instead of the Sass color representation for hsla(), and the lighten() function can only accept colors.

So just stop giving it a string:

.foo {
    background: hsla(60, 1, ($base - $math), 1);
}

More Related Contents:

  1. CSS for button with right triangle at lower right [closed]
  2. Import regular CSS file in SCSS file?
  3. How do I use /deep/ or >>> or ::v-deep in Vue.js?
  4. Angular-cli from css to scss
  5. Sass Variable in CSS calc() function
  6. How to dynamically generate a list of classes with commas separating them?
  7. SASS: randomly pick background-image from a list
  8. Sass Invalid CSS Error: “expected expression”
  9. Can I use variables for selectors?
  10. Extending selectors from within media queries with Sass
  11. What does an “&” before a pseudo element in CSS mean?
  12. @import in @if statement in Sass
  13. How can one import only variables and mixins from Sass stylesheets?
  14. Proper SCSS Asset Structure in Rails
  15. What does ‘&.’ in ‘&.sub-title’ indicates in scss?
  16. CSS-Only Sticky Table Headers In Chrome
  17. Sass negative variable value?
  18. Sass @each with multiple variables
  19. Rails 4: how do I use Sass Mappings?
  20. SASS – use variables across multiple files
  21. Sass @each variable interpolation [duplicate]
  22. Merging selectors from mixins
  23. Does LESS have an “extend” feature?
  24. how to change bootstrap version 4 button color
  25. Pass function or mixin by reference in SASS
  26. Creating CSS3 Circles connected by lines
  27. How to properly introduce a light/dark mode in Bootstrap?
  28. How to combine and use multiple Next.js plugins
  29. how to watch changes in whole directory/folder containing many sass files
  30. SASS CSS: Target Parent Class from Child

Leave a Comment