@import "foo.css";
@import 'foo.css';
@import url("foo.css");
@import url('foo.css');
@import url(foo.css);
@import "foo.css" screen;
@import "foo.css" screen, print;
/* Foo
   * Bar */
/* Baz
   * Bang */
@charset "UTF-8";
[foo~=bar] {
  a: b; }

[foo^=bar] {
  a: b; }

[foo$=bar] {
  a: b; }

[foo*=bar] {
  a: b; }

[foo|=en] {
  a: b; }

foo {
  a: 2;
  b: 2.3em;
  c: 50%;
  d: "fraz bran";
  e: flanny-blanny-blan;
  f: url(http://sass-lang.com);
  h: #abc; }

selector {
  property: value;
  property2: value; }

sel {
  p: v; }

.foo {
  a: b; }

.foo {
  a: b; }

.foo {
  a: b; }

.foo {
  a: b; }

@foo {
  a: b;
  rule {
    a: b; } }

@foo {
  a: b; }

@bar {
  a: b; }

@foo "bar"

foo {
  a: 12px calc(100%/3 - 2*1em - 2*1px);
  b: 12px -moz-calc(100%/3 - 2*1em - 2*1px);
  b: 12px -webkit-calc(100%/3 - 2*1em - 2*1px);
  b: 12px -foobar-calc(100%/3 - 2*1em - 2*1px); }

foo {
  bar: baz; }

bar {
  bar: baz; }

baz {
  bar: baz;
  /*
 * foo
 */ }

bar {
  baz: bang; }

E, F {
  a: b; }

E F, G H {
  a: b; }

E > F, G > H {
  a: b;
  /* This is a CSS comment. */ }

.one {
  color: green;
  /* Another comment */
  /* The following should not be used:
.two {color: red;} */ }

.three {
  /* color: red; */
  color: green;
  /**
.four {color: red;} */ }

.five {
  color: green;
  /**/ }

.six {
  color: green;
  /*********/ }

.seven {
  color: green;
  /* a comment **/ }

.eight {
  color: green; }

foo {
  a: \foo bar;
  b: foo\ bar;
  c: \2022 \0020;
  d: foo\\bar;
  e: foo\"\'bar; }

foo {
  a: "\foo bar";
  b: "foo\ bar";
  c: "\2022 \0020";
  d: "foo\\bar";
  e: "foo\"'bar"; }

foo {
  _name: val;
  *name: val;
  :name: val;
  .name: val;
  #name: val;
  name/**/: val;
  name/*\**/: val;
  name: val; }

@foo "bar"  ;

foo {
  a: -moz-element(#foo);
  b: -webkit-element(#foo);
  b: -foobar-element(#foo); }

@foo ;

foo {
  bar: baz; }

0% {
  a: b; }

60% {
  a: b; }

100% {
  a: b; }

12px {
  a: b; }

"foo" {
  a: b; }

foo {
  a: 12px expression(1 + (3 / Foo.bar("baz" + "bang") + function() {return 12;}) % 12); }

:foo("bar") {
  a: b; }

:foo(bar) {
  a: b; }

:foo(12px) {
  a: b; }

:foo(+) {
  a: b; }

:foo(-) {
  a: b; }

:foo(+"bar") {
  a: b; }

:foo(-++--baz-"bar"12px) {
  a: b; }

foo {
  a: foo-bar(12);
  b: -foo-bar-baz(13, 14 15); }

@import "foo.css" screen, print and (foo: 0);

@import "foo.css" screen, only print, screen and (foo: 0);

foo {
  a: foo !important;
  b: foo bar !important;
  b: foo, bar !important; }

foo {
  a: -moz-bar-baz;
  b: foo -o-bar-baz; }

foo {
  /* b; c: */
  a: d; }

foo {
  /*: b; c */
  a : d;
  /* Foo
 * Bar */ }

[foo] {
  a: b; }

[foo="bar"] {
  a: b; }

[foo~="bar"] {
  a: b; }

[foo^="bar"] {
  a: b; }

[foo$="bar"] {
  a: b; }

[foo*="bar"] {
  a: b; }

[foo|="en"] {
  a: b; }

:root {
  a: b; }

:nth-child(n) {
  a: b; }

:nth-last-child(n) {
  a: b; }

:nth-of-type(n) {
  a: b; }

:nth-last-of-type(n) {
  a: b; }

:first-child {
  a: b; }

:last-child {
  a: b; }

:first-of-type {
  a: b; }

:last-of-type {
  a: b; }

:only-child {
  a: b; }

:only-of-type {
  a: b; }

:empty {
  a: b; }

:link {
  a: b; }

:visited {
  a: b; }

:active {
  a: b; }

:hover {
  a: b; }

:focus {
  a: b; }

:target {
  a: b; }

:lang(fr) {
  a: b; }

:enabled {
  a: b; }

:disabled {
  a: b; }

:checked {
  a: b; }

::first-line {
  a: b; }

::first-letter {
  a: b; }

::before {
  a: b; }

::after {
  a: b; }

.warning {
  a: b; }

#myid {
  a: b; }

:not(s) {
  a: b; }

@media all {
  rule1 {
    prop: val; }

  rule2 {
    prop: val; } }

@media screen, print {
  rule1 {
    prop: val; }

  rule2 {
    prop: val; } }

@media screen and (-webkit-min-device-pixel-ratio: 0) {
  a: b; }

@media only screen, print and (foo: 0px) and (bar: flam(12px solid)) {
  a: b; }

:-moz-any(h1, h2, h3) {
  a: b; }

:-moz-any(.foo) {
  a: b; }

:-moz-any(foo bar, .baz > .bang) {
  a: b; }

@-moz-document url(http://www.w3.org/),
               url-prefix(http://www.w3.org/Style/),
               domain(mozilla.org),
               regexp("^https:.*") {
  .foo {
    a: b; } }

foo {
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#c0ff3300, endColorstr=#ff000000);
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=1, startColorstr=#c0ff3300, endColorstr=#ff000000); }

foo {
  filter: alpha(opacity=20);
  filter: alpha(opacity=20, enabled=true);
  filter: blaznicate(foo=bar, baz=bang bip, bart=#fa4600); }

@foo bar {
  a: b; }

@bar baz {
  c: d; }

@namespace "http://www.w3.org/Profiles/xhtml1-strict";

@namespace url(http://www.w3.org/Profiles/xhtml1-strict);

@namespace html url("http://www.w3.org/Profiles/xhtml1-strict");

[foo|bar=baz] {
  a: b; }

[*|bar=baz] {
  a: b; }

[foo|bar|=baz] {
  a: b; }

foo|E {
  a: b; }

*|E {
  a: b; }

foo|* {
  a: b; }

*|* {
  a: b; }

:not(foo|bar) {
  a: b; }

:not(*|bar) {
  a: b; }

:not(foo|*) {
  a: b; }

:not(*|*) {
  a: b; }

:not(#blah) {
  a: b; }

:not(.blah) {
  a: b; }

:not([foo]) {
  a: b; }

:not([foo^="bar"]) {
  a: b; }

:not([baz|foo~="bar"]) {
  a: b; }

:not(:hover) {
  a: b; }

:not(:nth-child(2n + 3)) {
  a: b; }

:not(:not(#foo)) {
  a: b; }

:not(a#foo.bar) {
  a: b; }

:not(#foo .bar > baz) {
  a: b; }

:not(h1, h2, h3) {
  a: b; }

foo {
  a: "bang 1 bar  bip"; }

:nth-child(-n) {
  a: b; }

:nth-child(+n) {
  a: b; }

:nth-child(even) {
  a: b; }

:nth-child(odd) {
  a: b; }

:nth-child(50) {
  a: b; }

:nth-child(-50) {
  a: b; }

:nth-child(+50) {
  a: b; }

:nth-child(2n+3) {
  a: b; }

:nth-child(2n-3) {
  a: b; }

:nth-child(+2n-3) {
  a: b; }

:nth-child(-2n+3) {
  a: b; }

:nth-child(-2n+ 3) {
  a: b; }

:nth-child( 2n + 3) {
  a: b; }

foo {
  a: foo bar baz;
  b: foo, #abc, -12;
  c: 1px/2px/-3px;
  d: foo bar, baz/bang; }

@page {
  prop1: val;
  prop2: val; }

@page flap {
  prop1: val;
  prop2: val; }

@page :first {
  prop1: val;
  prop2: val; }

@page flap:first {
  prop1: val;
  prop2: val; }

.foo {
  a: b; }

.foo {
  a: b;
  /* Foo */ }

.foo {
  a: b;
  /* Foo
 * Bar */ }

.foo {
  a: b; }

.foo #bar:baz(/* bang )*/ bip) {
  a: b; }

> E {
  a: b; }

+ E {
  a: b; }

~ E {
  a: b; }

> > E {
  a: b; }

>> E {
  a: b; }

E* {
  a: b; }

E*.foo {
  a: b; }

E*:hover {
  a: b; }

E, F {
  a: b; }

E F {
  a: b; }

E, F G, H {
  a: b; }

E > F {
  a: b; }

E ~ F {
  a: b; }

E + F {
  a: b; }

* {
  a: b; }

E {
  a: b; }

E[foo] {
  a: b; }

E[foo="bar"] {
  a: b; }

E[foo~="bar"] {
  a: b; }

E[foo^="bar"] {
  a: b; }

E[foo$="bar"] {
  a: b; }

E[foo*="bar"] {
  a: b; }

E[foo|="en"] {
  a: b; }

E:root {
  a: b; }

E:nth-child(n) {
  a: b; }

E:nth-last-child(n) {
  a: b; }

E:nth-of-type(n) {
  a: b; }

E:nth-last-of-type(n) {
  a: b; }

E:first-child {
  a: b; }

E:last-child {
  a: b; }

E:first-of-type {
  a: b; }

E:last-of-type {
  a: b; }

E:only-child {
  a: b; }

E:only-of-type {
  a: b; }

E:empty {
  a: b; }

E:link {
  a: b; }

E:visited {
  a: b; }

E:active {
  a: b; }

E:hover {
  a: b; }

E:focus {
  a: b; }

E:target {
  a: b; }

E:lang(fr) {
  a: b; }

E:enabled {
  a: b; }

E:disabled {
  a: b; }

E:checked {
  a: b; }

E::first-line {
  a: b; }

E::first-letter {
  a: b; }

E::before {
  a: b; }

E::after {
  a: b; }

E.warning {
  a: b; }

E#myid {
  a: b; }

E:not(s) {
  a: b; }

E F {
  a: b; }

E > F {
  a: b; }

E + F {
  a: b; }

E ~ F {
  a: b; }

@supports (a: b) and (c: d) or (not (d: e)) and ((not (f: g)) or (not ((h: i) and (j: k)))) {
  .foo {
    a: b; } }

@-prefix-supports (a: b) and (c: d) or (not (d: e)) and ((not (f: g)) or (not ((h: i) and (j: k)))) {
  .foo {
    a: b; } }

foo {
  foo: bar;
  #baz: bang;
  #bip: bop; }

foo {
  a: -2;
  b: -2.3em;
  c: -50%;
  d: -foo(bar baz); }

foo {
  a: -0.5em;
  b: 0.5em;
  c: -foo(12px);
  d: +foo(12px); }

foo {
  -moz-foo-bar: blat;
  -o-flat-blang: wibble; }

foo {
  a: foo();
  b: bar baz-bang() bip; }