sassで出来る事

1、セレクタの入れ子の書き方

.container {
  background-color: red;
}
.container .span5 {
  background-color: pink;
}
.container .span7 {
  background-color: orange;
}

と書きたい場合は

.container{
    background-color: red;
    .span5{
        background-color: pink;
    }
    .span7{
        background-color: orange;
    }
}

と書けば良い。
プロパティでも

p {
  background-color: pink;
  background-image: url("lig.png");
  background-repeat: repeat-y;
}

としたかったら

p{
    background: {
        color: pink;
        image: url('lig.png');
        repeat: repeat-y;
    }
}

とすれば良い。

※「&」セレクタ
ブロック内で「＆」というセレクタが使える。
「＆」は親セレクタと言い、ブロック内の親セレクタを参照することが出来る。
例えば

a.btn {
  border-radius: 5px;
  background-color: pink;
}
a.btn:hover {
  background-color: orange;
}

というcssを書きたい場合、

a.btn{
    border-radius: 5px;
    background-color: pink;
    &:hover{
        background-color: orange;
    }
}

と書けば良い。

☆関連のcssを一カ所にまとめて記述出来るので、何度も同じ親セレクタを書かなくても良く、親セレクタを変更したい場合でも、一カ所でまとめているので、最初の親セレクタの変更のみで済んでしまう。以下参照。

/******  scss  ******/
.a{
    .b{
        font-size: 12px;
    }
 
    .c{
        font-size: 13px;
    }
 
    .d{
        font-size: 13px;
    }
 
    .e{
        font-size: 13px;
    }
}
 
/****** 通常のcss ******/
.a .b {
  font-size: 12px;
}
.a .c {
  font-size: 13px;
}
.a .d {
  font-size: 13px;
}
.a .e {
  font-size: 13px;
}

※sassなら最初の行の.aを変更するだけで済む。

2、セレクタの継承
アルセレクタの内容をそのまま他のセレクタに適応することが出来る。

.p1, .p2 {
  background-color: gray;
  color: red;
}
 
.p2 {
  border: 1px solid white;
}

このようなcssを書きたい場合に

.p1{
    background-color: gray;
    color: red;
}
 
.p2{
    @extend .p1; /* .p1のスタイルをそのまま引っ張ってきて */
    border: 1px solid white; /* その上で独自のスタイルを書く */
}

のように記載すれば良い。

3、変数が使える。書き方は
　$変数名: 値;
値にはcssで使える単位を使用する。

$foo-width : 10px;
$foo-width : 10%;
$foo-line-height : 10;
$foo-color : red;
$red-shadow : 0 0 3px red;

$my-red:#a82f34;
$aw:400px;
a{
    color: $my-red;
    width: $aw + 300px; /* 四則演算もできる */
}

と書くと

a {
  color: #a82f34;
  width: 700px;
}

というcssになる。
とにかくメンテが非常にやり易くなる。

4、Mixin
ちょっとしたテンプレートとして使えるので、コード量削減に効果大。
以下参照。

@mixin round-btn{
    border: 1px solid #b8b8b8;
    border-radius: 5px;
    background-color: #c9c9c9;
}
 
@mixin auto-color($color){
    @include round-btn;
    color:$color;
}
 
.btn-blue{
    /* mixinブロック内の中身を全て持ってくる */
    @include round-btn;
    color: blue;
}
 
.btn-red{
    /* こっちは引数を渡してるパターン */
    @include auto-color(red);
}

と記載すると

.btn-blue {
  border: 1px solid #b8b8b8;
  border-radius: 5px;
  background-color: #c9c9c9;
  color: blue;
}
 
.btn-red {
  border: 1px solid #b8b8b8;
  border-radius: 5px;
  background-color: #c9c9c9;
  color: red;
}

のように、@includeを使ってMixinの中身を挿入出来る。
以下も参照。

@mixin transition($duration:3s){
    -webkit-transition:$duration ease-out;
    -moz-transition:$duration ease-out;
    -ms-transition:$duration ease-out;
    -o-transition:$duration ease-out;
    transition:$duration ease-out;
}
 
.move{
    @include transition(0.5s);
}
 
.move-b{
    @include transition(); /* 引数渡してないのでデフォルト値の3sが使われる */
}

と記入すると

.move {
  -webkit-transition: 0.5s ease-out;
  -moz-transition: 0.5s ease-out;
  -ms-transition: 0.5s ease-out;
  -o-transition: 0.5s ease-out;
  transition: 0.5s ease-out;
}
 
.move-b {
  -webkit-transition: 3s ease-out;
  -moz-transition: 3s ease-out;
  -ms-transition: 3s ease-out;
  -o-transition: 3s ease-out;
  transition: 3s ease-out;
}