SCSS #scss - Qiita

[Variables 変数]
変数を一元管理して使用すればスタイルに一貫性があり修正に強いサイトができる

 <scss側>
 $hensu: #ffffff;
 body {
      color: $hensu;
 }

 ↓　コンパイルする

 <css側>
 body {
      color: #ffffff;
 }

＊コーポレートカラーを変数に代入しておくとカラー変更などの時にすぐに対応が出来る

[Nesting ネスト]
モジュール単位でCSSを管理する

.oya {
color: #000;
.kodomo {
color: #111;
.mago {
color: #222;
}
}
}

 ↓　コンパイルする

 <css側>
 .oya {
      color: #000;
 }
 .oya .kodomo {
      color: 111;
 }
 .oya .kodomo .mago {
      color: #111;
 }

[Mixins ミックスイン]

@mixin marumi($hankei) {
-moz-border-radius: $hankei;
-webkit-border-radius: $henkei;
border-radius: $hankei;
}
.box {
border: 1px #000 solid;
@include marumi(4px);
}

 ↓　コンパイルする

 <css側>

.box {
border: 1px #000 solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}

これをCompassで記述してみると…

.marumi {
@include border-radius(4px);
}

 ↓　コンパイルする

 <css側>
 .marui {
      -webkit-border-radius: 4px;
      -mozt-border-radius: 4px;
      -ms-border-radius: 4px;
      -o-border-radius: 4px;
      border-radius: 4px;
 }

＊最初からMixinsを作るよりもCompassのMixinsを使う方が良い
http://compass-style.org/search/?q=mixins

[Selector Inheritance 継承]

.message-box {
padding: 5px 10px;
border: 1px black solid;
font-size: 14px;
font-weight: bold;
}

 .alert-box {
      @extend .message-box;
      border: 1px red solid;
      color: red;
 }

 ↓　コンパイルする

 <css側>
 .message-box, .alert-box {
      padding: 5px 10px;
      border: 1px black solid;
      font-size: 14px;
      font-weight: bold;
 }
 .alert-box {
      border: 1px red solid;
      color: red;
 }

＊モジュール単位でうまく継承できればコードを格段に削減することが出来る

最後に…近い将来CSSでも変数を定義できる日がくるみたい