Forums

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. :)

treehouse : what would you like to learn today?

Forums

[Solved] Sass variables in pseudo selectors