63

I have a :not css selector in SASS mixin but it doesn't do anything:

Code Snippet:

@mixin dropdown-pos($pos:right) {
  &:not(.notip) {
    @if $comp-tip == true{
      @if $pos == right {
        top:$dropdown-width * -0.6;
        @include tip($pos:$pos);
      }
    }
  }
  &.notip {
    @if $pos == right {
      top: 0;
      left:$dropdown-width * 0.8;
    }
  }
}

The .notip class is being generated but no CSS is being generated for :not(.notip).

the
  • 21,007
  • 11
  • 68
  • 101
user2667409
  • 1,169
  • 2
  • 9
  • 12
  • Make sure you're providing enough code that this will actually compile (missing variables, mixins, etc.). Also, the problem is not reproducible. – cimmanon Mar 26 '14 at 04:53

1 Answers1

88

I tried re-creating this, and .someclass.notip was being generated for me but .someclass:not(.notip) was not, for as long as I did not have the @mixin tip() defined. Once I had that, it all worked.

http://sassmeister.com/gist/9775949

$dropdown-width: 100px;
$comp-tip: true;

@mixin tip($pos:right) {

}

@mixin dropdown-pos($pos:right) {
  &:not(.notip) {
    @if $comp-tip == true{
      @if $pos == right {
        top:$dropdown-width * -0.6;
        background-color: #f00;
        @include tip($pos:$pos);
      }
    }
  }
  &.notip {
    @if $pos == right {
      top: 0;
      left:$dropdown-width * 0.8;
      background-color: #00f;
    }
  }
}

.someclass { @include dropdown-pos(); }

EDIT: http://sassmeister.com/ is a good place to debug your SASS because it gives you error messages. Undefined mixin 'tip'. it what I get when I remove @mixin tip($pos:right) { }

Ming
  • 4,468
  • 1
  • 21
  • 21