CODEWITHSUNDEEP
csssass
AngryHacker
AngryHacker

Reputation: 61606

How to use a SASS variable to calculate a number?

I have the following CSS code, which hides rows 8 and on:

table tr:nth-child(n+8) {
  display: none;
}

However, I would like numbers 8 to be calculated, since it might change. Specifically, I'd like it be 6 + myOffset

So in SASS, I am trying the following:

$myOffset: 2;

/* try 1 */
table tr:nth-child(n+6+$myOffset) {
  display: none;
}

/* try 2 */
table tr:nth-child(n+6+{$myOffset}) {
  display: none;
}

/* try 3 */
table tr:nth-child(n+6+#{$myOffset}) {
  display: none;
}

None of these seem to work. Is this possible with SASS?

Upvotes: 0

Views: 85

Answers (1)

Jorjon
Jorjon

Reputation: 5434

Interpolation should work. Just add the +6 inside the interpolation.

See fiddle here.

$myOffset: 2;

table tr:nth-child(n+#{$myOffset+6}) {
  display: none;
}

Upvotes: 2

Related Questions