0

I was having some weird problems with the omega() function of Bourbon Neat, and so I looked into the source code, where I saw the use of the nth() function.

After trying out nth in SassMeister I see that all Sass engines produce the same weird output:

input.scss

.foo {
  content: nth(5n + 3, 1 );
}

will produce

output.css

.foo {
  content: 8n;
}

As you can see, it does some strange "math" with my expression. It seems as if Sass is trying to combine the two elements, although it mathematically does not make sense.

This has some bad consequences for mixins using this function, as I would expect @include omega(4n+4) to create a pseudo-selector of 4n+4 (skip the first 4, then apply to every 4,8,12...), but it creates 8n instead (applying to every 8th element).

Is there a logical reason for why this should be so or is this just an early bug that became the spec? And can it be avoided?

oligofren
  • 20,744
  • 16
  • 93
  • 180
  • What are you expecting to occur? the `nth` method is supposed to return a particular item from a list. – Evan Trimboli May 31 '16 at 21:34
  • Yes, it should return `5n + 3` as the first element. – oligofren May 31 '16 at 21:37
  • For instance, `nth(1 2n + 1 3, 2 );` is asking to return the second element of the list, which is `2n+1`. And it does that, but it transforms it to `3n` in the process. – oligofren May 31 '16 at 21:39
  • @EvanTrimboli is there perhaps an alternative to `nth` that will keep the list elements unaltered? It is a big problem that Sass is trying to add the numbers before returning the list element. – oligofren May 31 '16 at 21:43

1 Answers1

0

There are two questions in my original post, and this is the answer for the second (how to avoid Sass computing the expression). Feel free to post an additional answer for the first (why Sass does the computation as it does).

What I basically would like to achieve is make Sass treat the expression as a string that is passed unaltered on to plain CSS. Quoting the expression is not a solution, but Sass has two kinds of strings: unquoted and quoted strings.

A co-worker showed me how to create an unquoted string of 3n + 2:

#{3n} + #{2}

This creates three strings: 3n, + and 2, that are then concatenated into one. So the final solution for the code in the question is:

.foo {
  content: nth(#{5n} + #{3}, 1 );
}
oligofren
  • 20,744
  • 16
  • 93
  • 180