Sass variables in pseudo selectors

[i3iorn]

Hi

I have a variable in my .scss file that I’d like to use in a pseudo selector, :nth-child(), I tried it and it didn’t go so well. I recieved the error

error stylesheets/scss/index.scss (Line 19: Invalid CSS after "...l>li:nth-child(": expected expression (e.g. fr, 2n+1), was "$child) {border...")

Here’s roughly what I want to do.

$tertiaryColor:  white;

$navitems:  11;

@mixin mleftborder {

@if $navitems > 7 {

@if $navitems % 2 == 0 {

$child: ($navitems / 2) + 1;

#site>ul>li:nth-child($child) {border-left: 1px solid $tertiaryColor;}

}

}

}

Is this at all possible or do I have to find another way?

[i3iorn]

Nothing?

[Senff]

I’m not really sure about the reasoning behind it, but for this you’ll have to use #{$child}:

#site>ul>li:nth-child(#{$child})

[i3iorn]

Thank you precisely what I needed and the reason behind it is, I’m just beginning to use sass and I want to see what it can do. That and it will save me about 5 keystrokes everytime I want to make a certain type of updates to my test site.

[Senff]

I actually meant the reason behind the format (#{$child}) instead of just ($child). ;)

[i3iorn]

Ah… oops, well now you know that anyway. :)

[Author]

Posts