NetBeans8にSASS/SCSSとcompassを導入

プログラムを作るのは大好きですが、CSSはちょっと苦手です (^_^;) 今回は、そんなCSS嫌いを少しでも克服しようとお気に入りの NetBeans にSASS/SCSSというCSSプリプロセッサーを導入して、SASSを使うべく環境を構築してみました

 SASSとは

SASS とは、CSSを構造的に効率よく記述するための言語で、2つの記法(SASS/SCSS)があります

変数や演算、関数等のコードの再利用や構造的な記述をサポートしていて、SASSの拡張された記法をコンパイルすることで CSSに変換して使用します

まさにプログラマ向きのCSSといったところです (^^)

現在の主流は、CSSと互換性のあるSCSS記法です

互換性があるってことは、既存のCSSファイルの拡張子を SCSS とするだけでも、SCSSファイルとなり、CSSへコンパイルできるってことです

必要な部分だけをSCSS記法で置き換えられるので、導入するにあたってのハードルがとても低くなっています

今はまだ SASS ってよくわかっていないのですが..

慣れてきたら、SASSで楽に効率的な記述がバンバン出来るってことです (^^)

さらに compass というSASSをより便利にしてくれるフレームワークがあり、よく使われる定番のコードやクロスブラウザで使用できるコード等が沢山使用できるようになっているそうです

※SASS/SCSSと2つの記法があるので紛らわしいのですが、以降SASSと記述した場合も、基本的にはSCSS記法での記述を表していると思って下さい (^^)

導入

NetBeans8では簡単に使用できるようにサポートされているのですが、導入時にちょっと注意したほうがよい点がありますので、その辺りを含めて紹介します

ちなみに環境は Windows7(64bit) です

手順

  1. Rubyインストール
  2. SASSインストール
  3. compassインストール
  4. NetBeans の設定

 参考:NetBeans7.4でSass(SCSS)を使う [Windows]

 

Rubyインストール

SASSは Ruby で作られているプログラムなので、使用するためには Ruby をインストールする必要があります

http://rubyinstaller.org/downloads/

ruby-installer

最新版の Windows 64bit 用のインストーラ Ruby 2.0.0-p481(x64) をダウンロードしてインストールしました

インストール途中にオプション設定ダイアログが表示されるので、PATH 設定と Ruby への関連づけをチェックします

ruby-install-option

インストールが終了したらコマンドプロンプトを実行して、ruby -v と入力すれば、正常にインストールできていればバージョンが表示されます

ruby-install

SASSインストール

次に Ruby の Gem コマンドで SASS インストールを行います

コマンドプロンプト画面から gem install sass と入力します

sass-install

sass のバージョン 3.3.13 がインストールされました

このバージョン3.3 が重要な意味があることがのちのちわかってきます (^_^;)

compassインストール

次に compass も続けてインストールです。gem install compass と入力します

compass-install

ここで あれ と思ったのですが..  自動的に SASS3.2 もインストールされています

この後、NetBeansの設定を行い SCSS をコンパイルすると Can not load compass エラーが発生してしまいました

これは、現在の compass の安定バージョンの動作には SASS 3.2 が必要なためで、SASS 3.3 がインストールされていると 3.3 のほうが使われてしまいエラーが発生するようです

ここでの選択肢は2つです

  1. SASS 3.3 をアンインストールして、SASS 3.2 と compass の安定バージョンを使用
  2. SASS 3.3 を使い、compass 開発版をインストールして使用

※2014/8 現在はまだ compass 安定版で SASS 3.3 がサポートされていないのでどちらかを選ぶ必要があります。お好みに合わせて環境を構築すれば良いのですが、私は、SASS 3.3 からサポートされたソースマップという機能を使いたかったので、compass 開発版をインストールしてみました

SASS 3.3 を使う場合

コマンドプロンプトから gem install compass –pre と入力して開発版をインストール

compass-pre-install

 これで必要なインストール作業は終了です

NetBeans の設定

NetBeans8を起動して、メニューの ツール→オプション を選択します
表示されたウィンドウの その他タブ を選択

CSSプリプロセッサーのSassパス設定欄に Ruby のインストールフォルダー下の bin/sass.bat を設定します

netbeans-sass-option

追加削除の生成

これは、chrome 等のブラウザの開発ツールで sass ファイルの該当位置が表示されるようにするためのデバッグ用情報の生成を行うかどうかの設定です

ここをチェックすると、SCSSコンパイル時にオプションとして自動的に下記設定が行われます

  • Sass 3.2 だと –debug-info
  • Sass 3.3 だと –sourcemap

ちなみに、–debug-info オプションをつけるとデバッグ用の情報がコンパイルした css ファイル内に多数追加されますが、–sourcemap オプションはデバッグ情報が css ファイルとは別の map ファイルに生成されるので、css ファイルはスッキリです

この違いがあるので、私は sass 3.3 のほうを選択しました。ブラウザでのソースマップの使い方はここでは触れませんので各自調べて下さい(別途記事を書くかもしれません (^^))

作成中の WordPress テーマで試す

ここで SCSSファイルがあれば良いのですが、これから学んでいく段階なので肝心のSCSSファイルがまだありません (^_^;)

ですが、拡張子を SCSS にするだけでも動作確認はできます

テーマの下に scss のサブフォルダーを作成します 
既存の style.css を scss サブフォルダーにコピーして拡張子を scss に変更します

netbeans-scss-folder

これでSCSSファイルは準備OKです (^^)

CSSプリプロセッサ設定

次に wordpress プロジェクトのプロパティを表示させて、カテゴリ内のCSSプリプロセッサの設定を行います

netbeans-sass-project-setting

SCSSファイル監視&コンパイル設定

SCSSファイル保存監視 SCSSファイルを保存すると自動的にコンパイルしてCSSを生成します
入力 SCSSファイルのフォルダーを設定します
出力 CSSファイルの保存先 (テーマフォルダーと同じフォルダーとします)
コンパイラオプション SASSのコマンドオプションを指定することが出来ます

compass用設定

compass を使用する時には style.scss に @import “compass” を記述して、コンパイラオプションに –compass を指定します

CSS出力スタイル設定

出力スタイルは、nested/expanded/compact/compressed 等があり、デバッグやリリース時等の目的に応じて設定します

今回は –style expanded を指定してみます

他にも様々なオプション指定が使えるようです

実行

それでは、SCSS ファイルを保存してみます

Syntax error: Invalid Windows-31J character “\xE6”

じぇじぇ シンタックスエラーが発生 (^_^;)

環境変数LANGとキャラクタセット設定

日本語が含まれていると Windows の環境変数LANGの設定が必要ということです

コマンドプロンプトから下記を設定します

set LANG=ja_JP.utf8

さらに style.scss ファイルの先頭に下記を記述

@charset “utf-8”;

もう一度保存すると style.css と style.css.map が作成されました

 

これで SCSS から CSS の生成はOKのようです

意外と簡単に出来ました (^^)

環境が出来たので、少しずつSASS と compass を覚えて試してみようと思います

 

 


まとめ記事紹介

search star user home refresh tag chevron-left chevron-right exclamation-triangle calendar comment folder thumb-tack navicon angle-double-up angle-double-down angle-up angle-down quote-left googleplus facebook instagram twitter rss