element+element {
    margin: 0.5em 0;
    padding: 0px;;;
    border: none;
    background-color: rgb(0,0,0);
    color: #ffffff; ;;

}
selector {
; // 空の宣言ブロック
}

element + element{margin:0.5em 0;padding:0px;border:none;background-color:black;color:#ffffff}

selector-1 {
    margin: 0;
}
/*
 * 複数行CSSコメント
 * 複数行CSSコメント
 */
selector-2 {
    /* 1行CSSコメント */
    // Sassコメント
    padding: 0;
}
/*!
 * !付きの複数行CSSコメント
 * !付きの複数行CSSコメント
 */
selector-3 {
    /*! !付きの1行CSSコメント */
    color: red;
}
body /*! */ element {
    width: 100px;
}

selector-1{margin:0}selector-2{padding:0}/*
 * !付きの複数行CSSコメント
 * !付きの複数行CSSコメント
 */selector-3{/* !付きの1行CSSコメント */;color:red}body element{width:100px}

* html element { // IE6
    color: red;
}

* html element{color:red}

selector {
    _color: red; // IE6
}

selector{_color:red}

*:first-child + html element { // IE7
    color: red;
}

*:first-child + html element{color:red}

selector {
    *color: red; // IE6,7
}

selector{*color:red}

selector {
    /color: red; // IE6,7
}

$slash: "/";

selector {
    #{$slash}color: red; // IE6,7
}

selector{/color:red}

selector {
    color: red\9; // IE6,7,8,9 (10も??)
}

selector{color:red\9}

selector {
    font-family: Meiryo, sans-serif\0/; // IE6,7,8,9 (10も??)
}

$hack-ie6to9: "\0/";

selector {
    font-family: Meiryo, sans-serif#{$hack-ie6to9}; // IE6,7,8,9 (10も??)
}

selector{font-family:Meiryo,sans-serif\0/}

html > body element { // IE7と他のモダンブラウザ
    color: red;
}

html > body element{color:red}

html + body element { // IE7と他のモダンブラウザ
    color: red;
}

html + body element{color:red}

element, x:-moz-any-link {
    color: red;
}

element,x:-moz-any-link{color:red}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    selector {
      color: red;
    }
}

@media screen and (-webkit-min-device-pixel-ratio: 0){selector{color:red}}

@mixin clearfix {
    *zoom: 1;
    //
    &:after {
        content: "";
        display: block;
        clear: both;
    }
}

.clearfix {
    @include clearfix;
}

.clearfix {
  *zoom: 1;
}
.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

.clearfix {
    @include clearfix;
}
.header {
    @extend .clearfix;
}

.clearfix, .header {
  *zoom: 1;
}
.clearfix:after, .header:after {
  content: "";
  display: block;
  clear: both;
}

@mixin sample-mixin($var1, $var2: margin, $var3: false) {
    width: $var1;
    #{$var2}: 0;
    @if $var3 {
        overflow: hidden;
    }
}

.selectorA {
    @extend div;
    @extend #id;
    @extend .class;
    @extend div.class; // 要素も指定しているので、p.classがあっても継承しません
    @extend #id.class;
    @extend .class-1.class-2;
    @extend .selector:hover;
    @extend .selector[attr];
    @extend *; // これは使うことなさそうだけど...

    // ここから下はエラーになります
    @extend div .class; // E F
    @extend div > .class; // E > F
    @extend div + .class; // E + F
    @extend div ~ .class; // E ~ F
}

.selectorA {
    padding: 20px;
    border: 1px solid #333;
    //
    h2 {
        font-weight: bold;
        font-size: 20px;
    }
    p {
        color: #666;
    }
}
body.firefox .selectorA {
    padding: 10px;
}
.selectorB {
    @extend .selectorA; // ここで.selectorAを継承指定
    background: #eee;
    //
    h2 {
        font-size: 14px;
    }
}

.selectorA, .selectorB {
  padding: 20px;
  border: 1px solid #333;
}
.selectorA h2, .selectorB h2 { /* ここにも追加されました */
  font-size: 20px;
}
.selectorA p, .selectorB p { /* ここにも追加されました */
  color: #666;
}

body.firefox .selectorA, body.firefox .selectorB { /* ここにも追加されました */
  color: #666;
}

.selectorB {
  background: #eee;
}

.selectorB h2 {
  font-size: 14px;
}

.selectorA {
    text-decoration: none;
}
a.selectorA {
    text-decoration: underline;
}
.selectorB {
    @extend .selectorA; // ここで.selectorAを継承指定
}

.selectorA, .selectorB {
  text-decoration: none;
}

a.selectorA, a.selectorB { /* こちらにも追加されている */
  text-decoration: underline;
}

a.selectorA {
    text-decoration: none;
    //
    &[href] {
        text-decoration: underline;
    }
}
.selectorB {
    @extend .selectorA;
}

a.selectorA, a.selectorB {
  text-decoration: none;
}

a.selectorA[href], a.selectorB[href] {
  text-decoration: underline;
}

a.selectorA, a.selectorB {
  text-decoration: none;
}

a.selectorA[href], a[href].selectorB { /* これはどういうことですか... */
  text-decoration: underline;
}

$class: title;
$property: top;
h1.#{$class} {
    margin-#{$property}: 2em 0;
}

h1.title {
  margin-top: 2em 0;
}

@mixin color-red($selector) {
    #{$selector} {
        color: red;
    }
}
@include color-red(".title");  // 引用符で囲む。

.title {  /* 引用符が削除されました。 */
  color: red;
}

$font-size: 24px;
$line-height: 1.2;
h1 {
    font: $font-size/$line-height;  // ふつうに記述。
    font: #{$font-size}/#{$line-height};  // インターポレーションをつかう。
}

$img-path: "/shared/img";
.header {
    background-image: url(#{$img-path}/bg_header.png);  // 画像のパスに使うときにも。
}

$var1: foo;
$var2: bar;
.test {
    content: $var1 + $var2;
    content: #{$var1} + #{$var2};

    content: $var1 - $var2;
    content: #{$var1} - #{$var2};
}

h1 {
  font: 20px;  /* 計算されてしまいました。 */
  font: 24px/1.2;
}

.header {
  background-image: url(/shared/img/bg_header.png);
}

.test {
  content: foobar;     /* +とスペースがなくなり連結された。 */
  content: foo + bar;  /* +とスペースはそのまま。 */
  content: foo-bar;    /* -はそのままで、スペースがなくなった。 */
  content: foo - bar;  /* -とスペースはそのまま。 */
}

$var1: foo;
$var1: bar !default;
.test {
    content: $var1;  // 通常なら後で代入した bar が出力されるが、、
}

$var2: bar !default;
.test {
    content: $var2;  // 先に値が代入されていなければ、、
}

.test {
  content: foo;  /* foo が出力されました。 */
}

.test {
  content: bar;  /* bar が出力されました。 */
}