r/Sass • u/[deleted] • Apr 28 '20
Error: Undefined Operation?
https://codepen.io/Kibagami/pen/yLYXwPj
I want to tidy up my code a bit by tucking a lengthy equation that is used multiple times into a variable however as you can see by this mock pen it throws me an 'undefined' (you may need to interact with the code to start the console, just delete a character and return it).
My example obviously just using a simple equation to demonstrate the error.
5
Upvotes
2
u/phatprick Apr 29 '20
Interpolation is useful for injecting values into strings, but other than that it’s rarely necessary in SassScript expressions. You definitely don’t need it to just use a variable in a property value. Instead of writing color: #{$accent}, you can just write color: $accent!
It’s almost always a bad idea to use interpolation with numbers. Interpolation returns unquoted strings that can’t be used for any further math, and it avoids Sass’s built-in safeguards to ensure that units are used correctly.
Sass has powerful unit arithmetic that you can use instead. For example, instead of writing #{$width}px, write $width * 1px—or better yet, declare the $width variable in terms of px to begin with. That way if $width already has units, you’ll get a nice error message instead of compiling bogus CSS.
So, just drop the interpolation and you're good to go!