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?

Improve this question
1
  • 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. Commented Oct 14, 2020 at 13:50

2 Answers 2

Reset to default
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 { }
Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

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.
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: 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.
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: 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.
|
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 { }
Improve this answer

1 Comment

thanks. for my use case I needed to stick a dollar there ` --ile: #{$ile};`

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.