CygwinでSass＋Compassをインストール
何でいまさら！って思ったんですが、
最近色々勉強していて、Cygwinでrbevnなどを入れて、Rubyの管理を行うようになりました。
って事は、いままでプロンプトでやってたsassなどもCygwinで出来るって事だよな？って思い
Sassだけ入れてもあまり面白く無いので、Sass+Compassを入れて、フロント開発環境を整えてみようと思います！
実は、意外とハマってますｗ
Cygwinにrbenvをインストールに関しては下記のページで解説していますので、
確認してみてください！
windowsでrbenv - Program LOG
Sassのインストール
今更なので、Sassの解説はしませんが・・・。
Sassはgemでインストールするので、以下のコマンドを一発流せばいけます。
$ gem install sass DL is deprecated, please use Fiddle Fetching: sass-3.3.8.gem (100%) Successfully installed sass-3.3.8 Parsing documentation for sass-3.3.8 Installing ri documentation for sass-3.3.8 Done installing documentation for sass after 6 seconds 1 gem installed
これでインストールは完了しました！
正常に入っているか、バージョンの確認を一応やっておきます。
$ sass -v Sass 3.3.8 (Maptastic Maple)
はい！問題なく入っておりました！
一応watchして、動作確認！
$ sass --watch sass:css >>> Sass is watching for changes. Press Ctrl-C to stop. write css/style.css [Listen warning]: Listen will be polling for changes. Learn more at https://github.com/guard/listen#polling-fallback. >>> Change detected to: sass/style.sass write css/style.css
ん？Warningが出てますなｗ
正常にコンパイルは出来てるけども、listenってのが足らないらしいです。
一応入れておきました。
$ gem install listen DL is deprecated, please use Fiddle Fetching: rb-fsevent-0.9.4.gem (100%) Successfully installed rb-fsevent-0.9.4 Fetching: rb-inotify-0.9.5.gem (100%) ・・・中略・・・ Installing ri documentation for rb-fsevent-0.9.4 Parsing documentation for rb-inotify-0.9.5 Installing ri documentation for rb-inotify-0.9.5 Done installing documentation for listen, rb-fsevent, rb-inotify after 1 seconds 3 gems installed
再度watchを実行します。
$ sass --watch sass:css >>> Sass is watching for changes. Press Ctrl-C to stop. NoMethodError: undefined method `_log' for Listen::Adapter::Windows:Class Use --trace for backtrace.
ん？ｗ今度は、Listenでこけた？ｗ
なんだよー！って事で一応調べてみる。
$ listen --trace ERROR: listen start was called with arguments ["--trace"] Usage: "listen start".
なんだこれ？ｗ色々調べたが、ちょっと分からんかったので、
未解決ですが、一旦listenとはおさらばしちゃいましたｗ
まぁ、取り合えずコンパイルは通ったしね・・・ｗ
Compassのインストール
さて、気を取り直して、compassのインストールをやっちぇしまいたいと思います。
$ gem i compass DL is deprecated, please use Fiddle Fetching: sass-3.2.19.gem (100%) Successfully installed sass-3.2.19 Fetching: chunky_png-1.3.1.gem (100%) ・・・中略・・・ Parsing documentation for fssm-0.2.10 Installing ri documentation for fssm-0.2.10 Parsing documentation for sass-3.2.19 Installing ri documentation for sass-3.2.19 Done installing documentation for chunky_png, compass, fssm, sass after 9 seconds 4 gems installed
次はバージョンの確認を行っておきます。
$ compass -v Compass 0.12.6 (Alnilam) Copyright (c) 2008-2014 Chris Eppstein Released under the MIT License. Compass is charityware. Please make a tax deductable donation for a worthy cause: http://umdf.org/compass
さて、お次は、プロジェクトを作ってみたいと思います。
$ compass create compass directory compass/ directory compass/sass/ directory compass/stylesheets/ create compass/config.rb create compass/sass/screen.scss create compass/sass/print.scss create compass/sass/ie.scss create compass/stylesheets/ie.css create compass/stylesheets/print.css create compass/stylesheets/screen.css ＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊＊ Congratulations! Your compass project has been created. You may now add and edit sass stylesheets in the sass subdirectory of your project. Sass files beginning with an underscore are called partials and won't be compiled to CSS, but they can be imported into other sass stylesheets. You can configure your project by editing the config.rb configuration file. You must compile your sass stylesheets into CSS when they change. This can be done in one of the following ways: 1. To compile on demand: compass compile [path/to/project] 2. To monitor your project for changes and automatically recompile: compass watch [path/to/project] More Resources: ＊ Website: http://compass-style.org/ ＊ Sass: http://sass-lang.com ＊ Community: http://groups.google.com/group/compass-users/ To import your new stylesheets add the following lines of HTML (or equivalent) to your webpage:
さくっと作成されました！
ちょっといじってみたいと思います。
$ compass compile unchanged sass/ie.scss unchanged sass/print.scss overwrite stylesheets/screen.css
正常にいきました！
先ほどエラーが出てしまったWatchもやってみたいと思います。
$ compass watch >>> Change detected at 19:43:55 to: screen.scss overwrite stylesheets/screen.css >>> Compass is polling for changes. Press Ctrl-C to Stop.
おおお？こっちだと出ないんだｗいいかもｗ
ちょっと修正してみます。
$ compass watch >>> Change detected at 19:43:55 to: screen.scss overwrite stylesheets/screen.css >>> Compass is polling for changes. Press Ctrl-C to Stop. ArgumentError on line ["500"] of /cygdrive/c/pik/.rbenv/versions/2.1.2/lib/ruby/2.1.0/pathname.rb: different prefix: "//cygdrivecUserstakumi-mainDesktopdevgruntcompasssassscreen.scss" and "/cygdrive/c/Users/takumi-main/Desktop/dev/grunt/compass/sass" Run with --trace to see the full backtrace
うぉｗ何かまたエラーｗ調査開始・・・
どうやら、ちょっとファイルをいじる必要があるみたいです。
「/lib/fssm/pathname.rb」を探して、修正する必要があるみたいです。
多分WindowsとLinuxの違いですねこれ・・・よくあるセパレーター問題ってやつｗ
rbenvで入れているので、自分の場合は以下にありました。
「/cygdrive/c/pik/.rbenv/versions/2.1.2/lib/ruby/gems/2.1.0/gems/fssm-0.2.10/lib/fssm/」
26行目に以下のようなコードがあります。
array[0] += File::SEPARATOR if path[0, 3] =~ SEPARATOR_PAT
それを以下のように修正します。
array[0] += File::SEPARATOR if path[0, 3] =~ SEPARATOR_PAT unless path [0, 1] == File::SEPARATOR
その後、再度、compass watchを実行し、screen.scssを修正してみます。。。
$ compass watch >>> Change detected at 19:53:27 to: screen.scss overwrite stylesheets/screen.css >>> Compass is polling for changes. Press Ctrl-C to Stop. >>> Change detected at 19:53:34 to: screen.scss overwrite stylesheets/screen.css
おー！うまくいった！ｗ
ってか、さっきのエラーもセパレーター問題じゃないのか？って思うｗ
まぁCompassで実行できればいいさっ・・・ｗ
さて、今回はCompass＋Sassのインストールを行いました。
実は、さくっと入れてお遊びでもって思ってたんですが、意外にハマってしまったｗ
なので、今回はこのへんで終わり！ｗ
次回はGrunt.jsを使ってみようって思ってます。
最近のフロント開発現場で良く耳にするので、さすがに知っておかなければと思います。。。
