Node：Sassをつかった開発について

Sassをつかった開発についてです。SassはNode.jsとGulpをつかって利用することができます。

SublimeText × Sass

SassをCSSのSyntaxで利用しようとするとやはり色がうまく合わないところがでてきます。

この問題を回避するには、SublimeTextにSass用のSyntaxを追加してあげます。package controllから追加可能です。

package controll (Ctrl + cmd + p) からpackage installを選択

sassを選択

sassのプラグインを追加するとファイル種別のところでSassを選べるようになります。

Sassと変数

Sassには変数を用意する機能があります。画像フォルダのパスなど共通の値は変数にセットして利用するのが便利です。

変数の宣言

$images_path: '../../images/';

変数の利用

a#icon_tel {
  background: url($images_path + '/icon_tel.png') no-repeat 14px center;
}

a#icon_blog {
  background: url($images_path + '/icon_blog.png') no-repeat 14px center;
}

a#icon_voice {
  background: url($images_path + '/icon_voice.png') no-repeat 14px center;
}

これでファイル構成が変わった場合でも一箇所変更すれば対応できるようになります。

入れ子宣言

CSSは通常次のように書くようになっています。

div#left ul li {

}

div#left ul li a {

}

Sassの場合次のように入れ子にして宣言することが可能です。

div#left {
  width: 280px;
  height: auto;
  float: left;
  margin-right: 30px;

  ul li {
    (略)
  }

  ul li a {
    (略)
  }
}

Sassの基本的な使い方はこんな感じです。