dot-files/vim/bundle/scss-syntax/example.scss

// Nested Rules

#main p {
  color: #00ff00;
  width: 97%;

  #hello {
    background-color: blue;
  }

  .redbox {
    background-color: #ff0000;
    color: #000000;
  }
}

#main {
  width: 97%;

  p, div {
    font-size: 2em;
    a { font-weight: bold; }
  }

  pre { font-size: 3em; }
}

// Referencing Parent Selectors: &

a {
  font-weight: bold;
  text-decoration: none;
  &:hover { text-decoration: underline; }
  body.firefox & { font-weight: normal; }
}

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

// Nested Properties

.funky {
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

.funky {
  font: 2px/3px {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

// Comments: /* */ and //

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output */
body { color: black; }

// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

a {
  color: green; // a comment after an assignment
}

.foo {
  color: green; // issue #3: a comment ending with {}
}

// Variables: $

$width: 5em; // another comment

#main {
  width: $width;
}

// Data Types: Strings

@mixin firefox-message($selector) {
  body.firefox #{$selector}:before {
    content: "Hi, Firefox users!";
  }
}

@include firefox-message(".header");

// Number Operations

p {
  width: 1in + 8pt;
}

p {
  font: 10px/8px;
  $width: 1000px;
  width: $width/2;
  height: (500px/2);
  margin-left: 5px + 8px/2px;
}

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

// Color Operations

p {
  color: #010203 + #040506;
}

p {
  color: #010203 * 2;
}

p {
  color: rgba(255, 0, 0, 0.75) + rgba(0, 255, 0, 0.75);
}

$translucent-red: rgba(255, 0, 0, 0.5);
p {
  color: opacify($translucent-red, 0.3);
  background-color: transparentize($translucent-red, 0.25);
}

// String Operations

p {
  cursor: e + -resize;
}

p:before {
  content: "Foo " + Bar;
  font-family: sans- + "serif";
}

p {
  margin: 3px + 4px auto;
}

p:before {
  content: "I ate #{5 + 10} pies!";
}

$value: null;
p:before {
  content: "I ate #{$value} pies!";
}

// Parentheses

p {
  width: 1em + (2em * 3);
}

// Functions

p {
  color: hsl(0, 100%, 50%);
}

// Keyword Arguments

p {
  color: hsl($hue: 0, $saturation: 100%, $lightness: 50%);
}

// Interpolation: #{}

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

p {
  $font-size: 12px;
  $line-height: 30px;
  font: #{$font-size}/#{$line-height};
}

// Variable Defaults: !default

$content: "First content";
$content: "Second content?" !default;
$new_content: "First time reference" !default;

#main {
  content: $content;
  new-content: $new_content;
}

$content: null;
$content: "Non-null content" !default;

#main {
  content: $content;
}

// @import

@import "foo.scss";
@import "foo";

@import "foo.css";
@import "foo" screen;
@import "http://foo.com/bar";
@import url(foo);

@import "rounded-corners", "text-shadow";

$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");

// Partials

@import "colors";

// Nested @import

.example {
  color: red;
}

#main {
  @import "example";
}

// @media

.sidebar {
  width: 300px;
  @media screen and (orientation: landscape) {
    width: 500px;
  }
}

@media screen {
  .sidebar {
    @media (orientation: landscape) {
      width: 500px;
    }
  }
}

$media: screen;
$feature: -webkit-min-device-pixel-ratio;
$value: 1.5;

@media #{$media} and ($feature: $value) {
  .sidebar {
    width: 500px;
  }
}

// @extend

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.error.intrusion {
  background-image: url("/image/hacked.png");
}
.seriousError {
  @extend .error;
  border-width: 3px;
}

// Extending Complex Selectors

.hoverlink {
  @extend a:hover;
}
a:hover {
  text-decoration: underline;
}

.hoverlink {
  @extend a:hover;
}
.comment a.user:hover {
  font-weight: bold;
}

// Multiple Extends

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.attention {
  font-size: 3em;
  background-color: #ff0;
}
.seriousError {
  @extend .error;
  @extend .attention;
  border-width: 3px;
}

// Chaining Extends

.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
.criticalError {
  @extend .seriousError;
  position: fixed;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
}

// Selector Sequences

#fake-links .link {
  @extend a;
}

a {
  color: blue;
  &:hover {
    text-decoration: underline;
  }
}

// Merging Selector Sequences

#admin .tabbar a {
  font-weight: bold;
}
#demo .overview .fakelink {
  @extend a;
}

#admin .tabbar a {
  font-weight: bold;
}
#admin .overview .fakelink {
  @extend a;
}

// @extend-Only Selectors

#context a%extreme {
  color: blue;
  font-weight: bold;
  font-size: 2em;
}

.notice {
  @extend %extreme;
}

// The !optional Flag

a.important {
  @extend .notice !optional;
}

// @extend in Directives

@media print {
  .error {
    border: 1px #f00;
    background-color: #fdd;
  }
  .seriousError {
    @extend .error;
    border-width: 3px;
  }
}

// @debug

@debug 10em + 12em;

// @warn

@mixin adjust-location($x, $y) {
  @if unitless($x) {
    @warn "Assuming #{$x} to be in pixels";
    $x: 1px * $x;
  }
  @if unitless($y) {
    @warn "Assuming #{$y} to be in pixels";
    $y: 1px * $y;
  }
  position: relative; left: $x; top: $y;
}

// @if

p {
  @if 1 + 1 == 2 { border: 1px solid;  }
  @if 5 < 3      { border: 2px dotted; }
  @if null       { border: 3px double; }
}

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

// @for

@for $i from 1 through 3 {
  .item-#{$1} { width: 2em * $i; }
}

@for $i from 1 to 3 {
  .item-#{$1} { width: 2em * $i; }
}

// @each

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

// @while

$i: 6;
@while $1 > 0 {
  .item-#{$i} { width: 2em * $i; }
  $i: $1 - 2;
}

// Defining a Mixin: @mixin

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

// Including a Mixin: @include

.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

@mixin silly-links {
  a {
    color: blue;
    background-color: red;
  }
}

@include silly-links;

@mixin compound {
  @include highlighted-background;
  @include header-text;
}

@mixin highlighted-background { background-color: #fc0; }
@mixin header-text { font-size: 20px; }

// Arguments

@mixin sexy-border($color, $width) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}

p { @include sexy-border(blue, 1in); }

@mixin sexy-border($color, $width: 1in) {
  border: {
    color: $color;
    width: $width;
    style: dashed;
  }
}
p { @include sexy-border(blue); }
h1 { @include sexy-border(blue, 2in); }

// Keyword Arguments

p { @include sexy-border($color: blue); }
h1 { @include sexy-border($color: blue, $width: 2in); }

// Variable Arguments

@mixin box-shadows($shadows...) {
  -moz-box-shadow: $shadows;
  -webkit-box-shadow: $shadows;
  box-shadow: $shadows;
}

.shadows {
  @include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}

@mixin colors($text, $background, $border) {
  color: $text;
  background-color: $background;
  border-color: $border;
}

$values: #ff0000, #00ff00, #0000ff;
.primary {
  @include colors($values...);
}

@mixin wrapped-stylish-mixin($args...) {
  font-weight: bold;
  @include stylish-mixin($args...);
}

.stylish {
  // The $width argument will get passed on to "stylish-mixin" as a keyword
  @include wrapped-stylish-mixin(#00ff00, $width: 100px);
}

// Passing Content Blocks to a Mixin

@mixin apply-to-ie6-only {
  * html {
    @content;
  }
}
@include apply-to-ie6-only {
  #logo {
    background-image: url(/logo.gif);
  }
}

// Variable Scope and Content Blocks

$color: white;
@mixin colors($color: blue) {
  background-color: $color;
  @content;
  border-color: $color;
}
.colors {
  @include colors { color: $color; }
}

#sidebar {
  $sidebar-width: 300px;
  width: $sidebar-width;
  @include smartphone {
    width: $sidebar-width / 3;
  }
}

// Function Directives

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width + ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }
#sidebar { width: grid-width($n: 5); }

// TODO: todo should be highlighted, ticket #21
/* TODO: same here */

@import url(http://fonts.googleapis.com/css?family=Vollkorn);  // the // in the url shouldn't be highlighted as comment, ticket #24

// Styles which were not highlighted correctly in the past

// Attribute selectors should get highlighted for parent references.
input {
    &[type="text"] { } // <-- This should look the same as...
}
input[type="text"] { } // <-- this.

$a: $b + $c; // issue #4: variables should be displayed with the same color

@include text-shadow; // issue #23, @include content block

@include breakpoint( $bp-default ) {
  display: inline-block;
}

.app-header { // issue #31, functions with hyphens not properly highlighted
  @include linear-gradient(gray-with-lightness(0.94), #FFF 90%);
  border-bottom: 1px solid gray-with-lightness(0.95);
}

.breadcrumb:before { // issue #20, string escaping rendering incorrectly for "\\"
  content: "\\";
}

@import "icons/*.png"; // issue #14, don't treat "/*" as the start of a comment

.foo { // issue #5, lines without {} colored incorrectly
  label.due input[type=text]
  {
    padding-right: 25px;
  }
}

.funky { // comments after nested properties should be recognized
  font: {
    family: fantasy; // a comment
    size: 30em;      /* another comment */
    weight: bold;
  }
}

.container { // issue #33, multiline comments are not recognized as comments
  /*height: auto !important;
  min-height: 100%;*/
  background: #fff;
}

.button { // issue #34, functions as params should be recognized as functions
  background-image: -webkit-linear-gradient(top, bottom, from(#933), to(#944));
}

.class { // issue #35 a) media block is not recognized
  @media screen and (min-width: em(480)) {
    a {
      @extend .clearfix;
    }
  }
}

.class {
  div {
    a {
      @extend .clearfix;
    }
  }
}

@media screen and (min-width: em(480)) {
  a {
    @extend .clearfix;
  }
}

.class { // issue #35 b) @extend & @include are not recognized inside media block
  @media screen and (min-width: em(480)) {
    @extend .clearfix;
    @include header-text;
  }
}

div {
  height: 10px;
}

div {
  a: 10px;
}

div {
  foo: 10px;
}