読者です 読者をやめる 読者になる 読者になる

tyoshikawa1106のブログ

- Force.com Developer Blog -

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

Sass

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

SublimeText × Sass

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


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

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

f:id:tyoshikawa1106:20160405130318p:plain


sassを選択
f:id:tyoshikawa1106:20160405130348p:plain


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

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の基本的な使い方はこんな感じです。