scss_css.scss

[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);
  // g: U+ffa?;
  h: #aabbcc; }


selector {
  property: value;
  property2: value; }


sel{p:v}

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


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


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


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


@foo {
  rule {
    a: b; }

  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: green; /* color: red; */}
/**
.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 {
}


@foo;

foo {;;;;
  bar: baz;;;;
  ;;}


#foo .bar {}

#foo .bar {
}


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";

@import 'foo.css';

@import url("foo.css");

@import url('foo.css');

@import url(foo.css);

@import "foo.css" screen;

@import "foo.css" screen, print;

@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 {a: /* b; c: */ d}


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


/* Foo
 * Bar */


.foo {
  /* 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; }


@foo bar;
@bar baz;


/* Foo
 * Bar */
/* Baz
 * Bang */


.foo {
  /* Foo
   * Bar */
  /* Baz
   * Bang */ }


.foo {
  /* Foo Bar *//* Baz Bang */ }


@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; }


@mixin foo {
  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, #aabbcc, -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 {
  /* Foo */
  a: b; }


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


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


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


.foo /* .a #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; }


body {
  /*
  //comment here
  */
}


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);
  }


@charset "UTF-8";

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


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