CODEWITHSUNDEEP
if-statementsassmixins
joshmoto
joshmoto

Reputation: 1760

Using @if statement inside a sass mixing outside the css selector brackets?

I'm having trouble getting an @if statement too work inside a @mixin.

This mixin is basically emulating an 'if less than or equal too' ie statement, as I'm using php to populate the body class.

// less than or equal too mixin
@mixin lte-ie($ver:'9') {
  @if $ver >= '9' { .ie-9 &, }
  @if $ver >= '8' { .ie-8 &, }
  @if $ver >= '7' { .ie-7 &, }
  .ie-6 &
  {
    @content;
  }
}

But the mixin fails and I get this error when I try and run it.

Invalid CSS after "...f $ver >= '9' {": expected "}", was ".ie-9 &, }" on line 9 at column 20

I've made a sassmeister but i've had to comment out the @mixin as you cannot save a broken gist.. but you can uncomment to test the above code :)

http://www.sassmeister.com/gist/7bbd084be7e12845866311a6ddbf0cdf

Any help would be much appreciated.

Upvotes: 0

Views: 319

Answers (1)

iamarek
iamarek

Reputation: 86

How about little extension for now, while you think of more efficient solution (on the other hand as it's a part of preprocessor, so you don't need to have it PERFECTLY optimized)

@mixin lte-ie($ver:9) {
  @if $ver >= 9 { 
    .ie-9 &, .ie-6 & {
      @content;
    }
  }
  @if $ver >= 8 { 
    .ie-8 &, .ie-6 & {
      @content;
    }
  }
  @if $ver >= 7 { 
    .ie-7 &, .ie-6 & {
      @content;
    }
  }
  @if $ver > 7 {
    .ie-6 & {
        @content;
      }
  }
}

HEADER {
  overflow: hidden;

  @include lte-ie(9) {
    position: relative;
  }
}

Upvotes: 1

Related Questions