@import 'test';

.bad { color: $primary; background: green; }

.foo, .waldo {
  @extend %bar;
  $secondary:green;

  background: red,blue;
  color :red;
  font-size: 0.4em;
  box-shadow: .5em .5em black,
    0.1em .4em red; text-shadow: 1px 1px black;

  .bar {
    background:blue;
  }
}

.baz {
  @extend .foo%bar;
}

.qux {
  @extend .foo;
}

.bar span {
  content: 'Another ID';
}

.foo {
  content: 'bar';

  .baz {
    content: 'qux';

    .qux {
      content: 'waldo';
    }

    .waldo, div {
      content: 'where';

      .fail {
        content: 'blog';

        &:hover {
          content: 'hover';
        }
      }
    }
  }

  .nan {
    .boo {
      content: 'nan';

      .fail {
        content: 'blog';
      }
    }
  }
}