7

Forgive me if this is simple question, but I am fighting with this on CodePen and have no clue what's going on.

I have in code:

:root {
  --ile: 10;
}
@for $i from 0 to (var(--ile)) { }

The problem is Codepen claims var(--ile) is not an integer (huh?) even if obviously it is (it has no unit and because it is not 10.0 it cannot be a float). What Am I missing? I tried to look in CSS specs and various examples on the web and using number as variable is legit so how to force conversion to integer if the 10 is not integer?

BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
Sebastian
  • 448
  • 4
  • 14
  • SCSS cannot possibly evaluate a CSS variable because it has no browser environment to interpret the expression *LIVE*. Theoretically it **can** parse **simple** variable, if SCSS authors choose to support it, but it is wrong to do as a parser. Makes sense because a CSS variable is considered ***dynamic***, and SCSS is ***static***. – vsync Oct 14 '20 at 13:50

2 Answers2

4

The spec allows using custom property values as numeric values.

But the context your var() expression appears isn't CSS at all. It's Sass. For obvious reasons, the spec doesn't cover non-standard syntax, or preprocessors. It's unreasonable to assume that a var() expression is going to work in that context.

In fact, custom properties only work in property declarations. They don't work anywhere else. The spec states this here:

The var() function can be used in place of any part of a value in any property on an element. The var() function can not be used as property names, selectors, or anything else besides property values. (Doing so usually produces invalid syntax, or else a value whose meaning has no connection to the variable.)

Since this is a Sass loop, I don't see any reason not to use Sass variables:

$ile: 10;

@for $i from 0 to $ile { }
BoltClock
  • 700,868
  • 160
  • 1,392
  • 1,356
  • You are right. I should be more specific about what I wanted to achieve, and I was looking for some way to passing values from Javascript to CSS and while it's possible with CSS variables I am not sure how with SASS. – Sebastian Jun 13 '17 at 14:56
  • 4
    this does not answer's the question's title.. I came here from google and am disappointed for the lack of answer. XY answers are flooding stackoverflow – vsync Oct 14 '20 at 13:47
  • @vsync: Sure it does. You just can't accept the fact that custom properties don't work in Sass statements. If they did, I wouldn't have had to provide an XY answer. – BoltClock Oct 30 '20 at 14:39
  • The real question is not about SASS, it's about forcing to an integer. The SASS part was just the specific situation OP has with it. I also was deeply in need for this. Anyway, soon new Houdini will allow awesome new manipulations – vsync Oct 30 '20 at 17:51
  • @vsync: This is a Sass question. I'll make sure the title reflects the actual question to save future searchers headaches. If you have a question pertaining to native CSS, ask it separately. You can even reclaim this original title if you want. – BoltClock Oct 30 '20 at 18:06
  • @vsync: But if you're asking how to use var() in a property-value expression that expects an , it should just work, provided the custom property value is indeed one. And if you're asking how to use var() in a selector, [I answered that](https://stackoverflow.com/questions/17951877/is-it-possible-to-use-css-vars-in-css3-selectors/17951962#17951962). – BoltClock Oct 30 '20 at 18:09
  • It depends on how you look at it. The person was asking specifically how to cast a CSS variable to an integer. I have been asking the same thing for years... it's on discussion for years in CSS-Drafts GitHub. It's a **common** problem CSS authors are facing. The real question for the OP is if the variable ever changes in real-time or is it static. if static, then it's quite easy to solve – vsync Oct 31 '20 at 10:06
2

I wish there was a way to cast a CSS variable to an integer, but sadly there isn't. but, even if there was, this will probably not work, due to a compilation decision implemented by SASS developers.

If, your CSS variable is indeed meant to work as a static variable, and you know it will never change, or if so, it wouldn't matter to that particular use-case, then I suggest doing this:

$ile: 10;

:root {
  --ile: #{ile};
}
@for $i from 0 to $ile { }
vsync
  • 118,978
  • 58
  • 307
  • 400