【CSS】Sassの備忘録 | カタチップ

コーディングの速度を上げるためにSassを使い始めて2年が経過しました。今では新規案件のコーディングを行う際には必ずと言っていいほど使用しています。
今回はよく使う機能をメモ代わりにまとめておきたいと思いますので、何かの参考になれば幸いです。

1 使用している機能
2 使用しているツール

使用している機能

ネスト

基本中の基本。まずは、ネストを使用することでSassに慣れるのが良いと思われます。

&（アンパサンド）

疑似クラスなどを記述する際に必ずといってよいほど使用するようになりました。また、BEMをベースにして設計した場合は特に役に立つのではないでしょうか？

/* -- コンパイル前（SCSS）--*/
a {
    color: red;
    &.current {
        color: blue;
    }
    &:hover {
        text-decoration: underline;
    }
}

/* -- コンパイル後（css）--*/
a {
    color: red;
}
a.current {
    color: blue;
}
a:hover {
    text-decoration: underline;
}

/* -- BEMを意識した場合の記述方法の例--*/

.sns-area {
    display: table;
    width: 100%;
    &_head {
        display: table-cell;
        vertical-align: middle;
        width: 120px;
        font-size: 14px;
    }
    &_body {
        display: table-cell;
        vertical-align: middle;
    }
}

/* -- コンパイル後（css）--*/
.sns-area {
    display: table;
    width: 100%;
}

.sns-area_head {
    display: table-cell;
    vertical-align: middle;
    width: 120px;
    font-size: 14px;
}

.sns-area_body {
    display: table-cell;
    vertical-align: middle;
}

演算

演算機能は四則演算をSassがやってくれるので、いちいいち電卓を使用する必要性がなくなります。

padding: 10px + 10px;
padding: 10px - 10px;
padding: 10px * 10;
padding: (10px / 10);

※注意点
padding: (10px * 10px);
のような単位通しの乗算はNGとなります。

変数

javascriptでおなじみの変数。Sassの場合だと変数化した箇所を一括で数値の更新がでるので便利です。

/* -- $common_widthという変数を作成する--*/
$common_width: 650px;

/* -- $common_widthは650pxなので下記のwidthは630pxとなる--*/
#contents {
   width: $common_width - 20;
}

Mixin

同じ処理をまとめて記述できます。引数を使用することで、さらに便利な使いかたができます。下記の例だとborderの色とfont-sizeの数値を引数としています。

@mixin box($color:#666,$fz:12px) {
  border-bottom: 1px solid $color;
  font-size: $fz;
}

#wrap {
  @include box(#999);

  .inner {
    overflow: hidden;
    @include box($fz:16px);
  }
}

/* -- コンパイル後（css）--*/
#wrap {
  border-bottom: 1px solid #999;
  font-size: 12px;
}

#wrap .inner {
  overflow: hidden;
  border-bottom: 1px solid #666;
  font-size: 16px;
}

for文

一定パターンの記述を行い時に便利です。下記のサンプルではmarginとpaddingが5ずつ増えていく処理が5回行われる指示を与えています。$iをクラス名にも使用することでクラス名が5ずつ増える仕組みにもなっています。


@for $i from 0 through 5 {
  .box-#{$i * 5} {
    margin:#{$i * 5}px;
  }
  .block-#{$i * 5} {
    padding:#{$i * 5}px;
  }
}
/* -- コンパイル後（css）--*/
.box-0 {
  margin: 0px;
}

.block-0 {
  padding: 0px;
}

.box-5 {
  margin: 5px;
}

.block-5 {
  padding: 5px;
}

.box-10 {
  margin: 10px;
}

.block-10 {
  padding: 10px;
}

.box-15 {
  margin: 15px;
}

.block-15 {
  padding: 15px;
}

.box-20 {
  margin: 20px;
}

.block-20 {
  padding: 20px;
}

.box-25 {
  margin: 25px;
}

.block-25 {
  padding: 25px;
}

使用しているツール

Gulp: 定番。しかし、簡単な修正案件などへ導入するには腰が重くなることも。コマンドプロンプトを使用する必要があるので慣れるまで少し時間がかかる。
Sublime Text2: gulpがインストールされていればパッケージのインストールをするくだけで手軽にスタートできる。
文字コードが原因でコンパイルができなくなる時がある
Prepros: GUIのコンパイラ。非常に優秀で手っ取り早くSassを使用する際には便利。しかし、現在は有料となっている。
Koala: GUIのコンパイラ。最近使用することが多い。標準設定でChromeのデベロッパーツールにてスタイルのデバッグ時にSassのファイルの場所を表示してくれます。他のツールだとコンパイル後のCSSファイルを表示してしまうのでKoalaは便利だと感じます。ただ、コンパイル後の記述が汚い・・・文字コードにも強い印象