Windows環境でSCSS(Sass)とCompassをインストールしてNetbeansから触ってみる

LESS書いてて一番面倒なのがvendor prefixですね。-webkit-, -moz-, -ms-, -o-,と書いても良いのですがとにかく面倒(それでもCSS書くより遥かに良いですが)。「LESS Prefixer使えばいいじゃない」と言われそうな気もしますが、折角の機会なのでWindows環境にSCSS(Sass)とCompassをインストールして、Netbeansからサササッとコンパイルできる環境を整えていこうと思います。

両方使える環境があって困ることはないでしょうし、何よりLESS Prefixerで良いやーってなると永遠にSCSS触ることがなさそうなので..重たい腰を上げるとしましょう。条件分岐とか繰り返し出来るとかすごいですよね(´・ω・`)

1.Rubyのインストール

こちらからRubyのインストーラをダウンロードし、インストールします。
ポチポチでインストールできるので、特に難しいことは無いかと思いますが、インストール時に環境変数PATHを通しておいてください。
インストール完了後、コマンドプロンプトから「ruby -v」でパスが通っているか確認しておきましょう。

2.gemのアップデート

Debianで言うところのapt-getをアップデートしていきます。特に考えると無く最新バージョンに上げていきましょう。

gem update --system

バージョン確認は「gem -v」で確認可能です。
※Ruby 2.2.3インストーラではインストール直後はv2.4.5.1でしたが、updateで2.4.8になりました。

3.Compassのインストール

apt-getのようにgemでcompassをインストールしていきます。特にオプションは必要無さそうです。

gem install compass

バージョン確認は「compass -v」で確認可能です。

4.NetbeansのCSSプリプロセッサ設定

LESSの時と同様にプリプロセッサ設定を行います。
設定するバッチファイルは[Rubyインストールディレクトリ]/bin/scss.batになります。

後はプロジェクトプロパティで個別に設定すればLESSと同じように自動でコンパイルしてくれます。

ただ、NetbeansさんはSassファイルの新規作成をすると.scssを作り出すんですね。

.sassを作る場合は空ファイルから作らなきゃダメなんでしょうか…少し調べが必要そうですね。

よしだはLESSから移行するのでインデントよりブロックの方が慣れてるので問題ありませんが、純粋に他のIDEからNetbeansに移ってきた人は違和感を覚えるのかもしれません。

とりあえずSCSSの作成、コンパイルはできるので、後はCompassのメリットを享受していくだけです…頑張って覚えていきます(´・ω・`)

で、話は終わりません。

Compassインストールしたし@import “Compass”;してメリット享受するぜぇぇぇぇぇええイヤッフゥーーーーー!!!と@importを書いたらエラーですよ(´・ω・`)

「そう簡単に便利ツール使えると思うな」と言われた気がします。

Error: File to import not found or unreadable: compass.
        on line 1 of C:\Apache24\htdocs\scss\public_html\scss\test2.scss

「compassって何だよwwwm9(^Д^)プギャーwwww(超訳)」って言われてます。

少し調べたらコンパイルオプションに「–compass」を付与してcompass使うよーと明記してあげないといけないんですね。

とりあえず、ここまででSCSS+Compassで使えるようになりました。

後は本人の努力次第ですかね(震え声

よろしければSNSでシェアしてください!

コメントを残す

*
*