NetBeansではじめるSCSS

Posted on 2011/12/25 by deg84

Less & Sass Advent calendar 2011の最終日25日目の記事です！

NetBeansでSCSSをはじめるには、

  • scss-editorプラグイン
  • sass本体

が必要になります。用意するのはこの2つだけ。

SCSSとはなんぞや

SCSSとは、CSS拡張メタ言語の1つであるSassの別記法です。
CSS拡張メタ言語は、現行バージョンのCSSに不満を持ったみんなでCSSをより良くしようと考えだしたもの。そのままでは使わず、CSSにコンパイルして使います。

CSS拡張メタ言語では、SassとLESSの二つが有名。
導入はLESSの方がJSでコンパイル出来る分、楽だと言われていますが、私はSCSSを選択しました。

Sassの詳しい説明は、Less & Sass Advent calendar 2011の一日目Sassで行こう！が参考になると思います！

で、そのSCSSのコンパイルをNetBeansでしましょ。ってのが今回のお話しです。

scss-editorプラグイン

NetBeansでSCSSをCSSにコンパイルするのに必要なプラグインに「scss-editor」プラグインがあります。
これは、NetBeans上でSCSSを使いやすくしてくれるもの。まんまです。

SCSSファイル編集時のハイライト表示や、NetBeans上でSCSSをCSSにコンパイル（CSSをSCSSにコンパイルも可）出来るようになる。
しかも、設定さえすれば、SCSSを保存するだけで、自動的にCSSファイルを生成してくれる素晴らしい機能付きです。

反面、CSSのプロパティ名の補完などが出来ません。
CSSの記述をマスターする前だとちょっと厳しいかもしれませんが、SCSSにチャレンジするレベルの人であればそのあたりは、問題にならないと思います！

scss-editorプラグインのダウンロード

scss-editorプラグインをダウンロードします。
使っているNetBeansのバージョンに合わせて、最新のものをダウンロードすればOK。
本記事の執筆時点では、0.3 BETA for netbeans 7.0が最新で、これを使いました。

scss-editorプラグインのインストール

ダウンロードしたnbmファイルをNetBeansにインストールして、NetBeansを再起動します。

Sass

Sassを実行するには、Rubyをインストールして、「gem install sass」で、Sassをインストールするのが普通の流れのようですが、NetBeansでscss-editorプラグインを使うだけであれば、rubyは必要ありません。
scss-editorにjRubyが同梱されているので、それが利用されます。

Sassのダウンロード

ということで、Sass本体だけダウンロードします。
公式ページではgemでインストールを促されるだけなので、githubからダウンロードします。
最新バージョンで良いでしょう。
本記事の執筆時点では、3.1.11が最新で、これを使いました。

Sassのインストール

ダウンロードした圧縮ファイルを解凍して、任意の場所に設置します。

NetBeansに設定


設定画面のその他の項目にScssという項目が増えているので、そこのSASS/HAML homeに、先ほどSassを設置したパスを入力します。
入力欄の下に、（Version: 3.1.11）と出ていればOKです。

設定は以上です。早速使ってみましょう！

使ってみる

既存CSSをSCSSにコンパイル

とりあえず、手元にあるCSSファイルをSCSSにコンパイルしてみます。

CSSファイルを右クリックで選択。
「Convert to scss」がメニューにあるので、それを選択。

そうすると、同じファイル名のSCSSファイルが生成されます！素晴らしい！

SCSSをコンパイル

本題のSCSSをコンパイルしましょう！


新規ファイルでSCSSファイルを作りましょう！

すると以下のような内容でファイルが生成されます

/*
Document   : test
Created on : 2011/12/08, 21:02:55
Author     : deg84
Description:
Purpose of the stylesheet follows.
*/

/*
TODO customize this sample style
Syntax recommendation http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html
*/

root {
	display: block;
}

あとはできたファイルにSCSS記法で記述していくだけ。

_（アンダーバー）から始まるファイル名で作ると、インポート用のSCSSファイルが作れます。
共通部分をSCSS側でインポートすると、共通の処理を一元管理出来て、しかも使用ファイルが減らせる2つのメリットを得ることが出来るのでオススメです！

例えばこんな感じ

@charset "utf-8";

html {
	font-size: 62.5%;
}
body {
	background-color:#000;
	line-height:1.4;
	font-family: 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif;
	font-size:1.4rem;
}
a {
	color:#fff;
	&:hover {
		color:#c00;
		text-decoration:none;
	}
}

SCSSが書けたらいよいよCSSへのコンパイルです。

既存のCSSファイルをSCSSに変換するように、ファイルを右クリックして「Compile to scss file」で、CSSファイルにコンパイルができます。

自動でSCSSをコンパイルする設定

でも、編集してコンパイルして。って毎回やるの面倒ですよね…

なのでSCSSファイルを保存したら自動的にCSSファイルにコンパイルしてくれるようにしましょう！

NetBeansの設定画面で、「Compile on save」にチェックを入れる。
それだけで、SCSSファイルを保存する度にCSSファイルにコンパイルを行なってくれます。

CSSを圧縮して出力する

SCSSで記述して、コンパイルするCSSファイル。どうせなら圧縮しましょう！

CSSで記述していたあの頃、それを圧縮するのは凄く手間で、嫌な作業でした…でもscss-editorプラグインでSCSSを記述するならそれが簡単に出来ます！

これも設定画面から、「Output Style」を「compressed」を選択します。
あとはSCSSをCSSにコンパイルするだけ。

各Output Styleはこんな感じ
compact
各セレクタのスタイルを1行にまとめて出力するスタイル

@charset "utf-8";
html { font-size: 62.5%; }

body { background-color: #000; line-height: 1.4; font-family: 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif; font-size: 1.4rem; }

a { color: #fff; }
a:hover { color: #c00; text-decoration: none; }

compressed
全スタイルを1行にまとめて出力するスタイル。読みにくくなるものの、一番の圧縮率。

@charset "utf-8";html{font-size:62.5%}body{background-color:#000;line-height:1.4;font-family:'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif;font-size:1.4rem}a{color:#fff}a:hover{color:#c00;text-decoration:none}

expanded
ノーマルなCSSの記述で出力するスタイル

@charset "utf-8";
html {
  font-size: 62.5%;
}

body {
  background-color: #000;
  line-height: 1.4;
  font-family: 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif;
  font-size: 1.4rem;
}

a {
  color: #fff;
}
a:hover {
  color: #c00;
  text-decoration: none;
}

nested
ネストした部分をインデントして出力するスタイル。SCSSに一番近い形での出力。

@charset "utf-8";
html {
  font-size: 62.5%; }

body {
  background-color: #000;
  line-height: 1.4;
  font-family: 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif;
  font-size: 1.4rem; }

a {
  color: #fff; }
  a:hover {
    color: #c00;
    text-decoration: none; }

トラブルシューティング

トラブルシューティングという大層なものでもないんですが、私が出会った問題。

ちゃんと設定しているのになぜかコンパイルが出来ない

NetBeansを一度再起動してみましょう。
もしかしたら、これでコンパイル出来るようになるかもしれません。

理由は分からないまま、再起動すれば動くようになりました。何だったのか…

まとめ

以上で、NetBeansからSCSSをコンパイル出来るようになります！
現行のCSSに満足できないそこのあなた！是非SCSSをはじめてみましょう！
あなたに素晴らしい体験を与えれくれるはずです！

それでは、メリークリスマス！！！
そして、良いお年を！！！

コメントは停止中です。