CODEWITHSUNDEEP
csssassmixins
magicspon
magicspon

Reputation: 926

A reverse look up sass mixin, is this possible?

Does anyone know if the following is possible with SASS

I have an ie mixin:

@mixin ie($version) {
    @if $version == 8 {
        html.lt-ie9 {
            @content;
        }
    }
    @if $version == 7 {
        html.lt-ie8 {
            @content;
        }
    }
}

usage: 

@include ie(8){
    body {
        header {
            color: beige;
        }
    }
}

renders:

html.lt-ie9 body header {
  color: beige;
}

Now what would be awesome is if I could do something like this:

header {
    > nav {
        color: beige;
        @include ie(8) {
            color: green;
        }
    }
}

which would render 

header > nav {
    color: beige;
}

html.lt-ie9 header > nav {
    color: green;
}

This might be wishful thinking, but has anyone got any ideas if something like this is possible

[EDIT]

So it's possible! super.

I've update my mixin to:

@mixin ie($version,$depth:false) {
    @if $depth == false {
        @if $version == 8 {
            html.lt-ie9 {
                @content;
            }
        }
        @if $version == 7 {
            html.lt-ie8 {
                @content;
            }
        }
    } @else {
        @if $version == 8 {
            html.lt-ie9 & {
                @content;
            }
        }
        @if $version == 7 {
            html.lt-ie8 & {
                @content;
            }
        }
    }
}

thanks Dave

Upvotes: 0

Views: 644

Answers (1)

Srdjan Dejanovic
Srdjan Dejanovic

Reputation: 1409

You don't need mixin. Just use:

header {
    > nav {
        color: beige;
        html.lt-ie9 & {
            color: green;
        }
   }
}

Upvotes: 2

Related Questions