@-moz-viewport {
  color: red
}

@viewport {
  color: blue
}

@host {
  body {
    color: green
  }
}

@foo {
  @bar {
    color: #cc0
  }
}

@foo {
  // empty
}

@foo {
  /* empty */
}

@foo

@namespace svg "http://www.w3.org/2000/svg"
@namespace "foo" if true
@namespace foo   "http://example.com/foo";
@namespace xul url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace url("http://www.w3.org/1999/xhtml");

@region div.region:first-of-type
  p
    color: #fff

@media screen and (max-width:400px)
  @-ms-viewport
    width:320px;
    /* the viewport for small devices is set to 320px  */

  @-o-viewport
    width: device-width;

  @viewport
    width: device-width;

foo(i)
  a = 'bar'
  @foo {a}{i} {
    color: red
  }

for i in 1..5
  foo(i)

foo()
  width: 1000px

  for i in 1..2
    @font-face
      font-family: 'Arial-' + i

.foo
  foo()

@foo
  $bar
    color: red

@foo bar baz

.bar
  @extend $bar
