早速sassを使ってみよう

css sass scss

sassやcompassやKoalaのインストールが前回の説明で
完了したという前提で進めます。

さて、早速Sassを使ってみたいと思います。

  • まず、任意の場所に好きな名前のフォルダ名を作りその中に拡張子が"scss"のファイルを入れます。

今回は「CSS」フォルダに｢test.scss｣を入れてみます。

  • 続けて前回インストールしたKoalaを起動し、「CSS」フォルダをドラッグ＆ドロップ。

画面中央にフォルダ内の｢test.scss｣ファイルが表示されます。
Koalaはとりあえず、このまま放置。
それではいよいよscssが以下に使い勝手がいいかを紹介します。

変数を使い「値」を使い回しできる。

PHPやJavaScriptなどで定番の定数を使用できます。
変数って何？という説明は割愛します。

scss

$c_Red:#E93604;
$c_Blue:#0F55B5;
$c_Green:#23B90D;

$size_S:14px;
$size_M:18px;
$size_L:24px;
$size_LL:36px;

$area_S:200px;
$area_M:400px;
$area_L:600px;

.box{
  padding:$size_M;
  height:$area_M;
  width:$area_L;
  background-color:$c_Green;
}

まず、冒頭から3行目まで色指定。
5行目からはピクセル数値指定してあります。

そしてそれぞれの値を入れた$変数をプロパティの値として
代入しています。

このように、今までのCSSでは決まった値をいちいち入力するという手間を$変数で入力する事で、省略化と入力間違いのミスを防げる恩恵があります。

ただ、このScssをhtmlにリンクで繋げてもスタイルシートとして反映されません。

じゃあ、Scssでコーディングする意味ねえじゃねぇかというかもしれませんが、ここでCoalaの出番です。

Coalaでscssをコンパイルする。

先ほどCoalaにドラッグ＆ドロップしたフォルダのScssファイルをCSSファイルに変換（コンパイル）することが出来ます。


Coalaの右サイドバーの下にある"compile"ボタンを押せば
先ほど編集したScssファイルをCSSファイルに自動変換してくれます。

できあがったCSSファイル名は元のSCSSファイル名と同じで拡張子だけ違います。

そのCSSファイルの中身はこんな感じです。

/* line 14, Test.scss */
.box { padding: 18px; height: 400px; width: 600px; background-color: #23b90d; }

このように、変数に入れた値がそのままプロパティの値として
設定されていますので、このcssファイルをHTMLファイルに繋げて完成です。