最近、よく見るようになった「SCSS(Sass)」なるものに挑戦してみました。LESSと言うのもあるらしい。
ちなみに私、「コマンド」何それ? 「ターミナル」美味しいの? っていうぐらいの初心者です。初めに Ruby と聞いて関係ないわっ! とか思ってたぐらいです。だって黒い画面とか恐くないですか? でも、それでも、何とかなりました!
と言うより、黒画面が恐いので、黒い画面を使わずに済む方法を探しました。そんな感じのメモになります。
■Sass についての参考URL
Sass(公式:英語)
Sassで行こう!
Sass、そしてSassy CSS (SCSS)
SassやLESSを導入するメリット
Less & Sass Advent calendar 2011
CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較
さて、まずは作業環境の構築です。
一応、win と mac 両方で試してみました。まずは win から。
■作業環境
Windows7 Professional 64bit
■scss を作成・編集、css を出力に使うソフト
Dreamweaver CS5.5(有償)
Scout(無償)
■参考URL
Sassを覚えよう
SassとDreamweaverのコードヒントでCSSをさらに効率的に
win の環境構築はとても簡単でした。とりあえず、「
Scout」をダウンロードするだけ。これで scss が使えるようになりました。
インストール方法の詳しくは、「
【Sassを覚えよう!Vol.3】一番カンタンな環境構築(Scout編)」をご覧下さい。スクリーンショット付きで、とても丁寧に解説されています。
また、scss ファイルを作成・編集するにあたって「Dreamweaver CS5.5」を使いました。
Dreamweaver の設定ファイルを書き変えて、コードヒントなどを使えるようにすると更に編集が楽になります。その方法については「
SassとDreamweaverのコードヒントでCSSをさらに効率的に」を参考にしました。
ただ、どこの「MMDocumentTypes.xml」ファイルを上書きすればいいのかで七転八倒。そこで、ググりました。そしたら四ヶ所も出てきました。
・
C:\Program Files\Adobe\Adobe Dreamweaver CS5.5\configuration\DocumentTypes\MMDocumentTypes.xml
・
C:\Program Files (x86)\Adobe\Adobe Dreamweaver CS5.5\configuration\DocumentTypes\MMDocumentTypes.xml
・
\Users\ユーザ名\Library\Application Support\Adobe\Dreamweaver CS5.5\ja_JP\Configuration\DocumentTypes\MMDocumentTypes.xml
・
C:\Users\ユーザ名\AppData\Roaming\Adobe\Dreamweaver CS5.5\ja_JP\DocumentTypes\MMDocumentTypes.xml
試した結果、私の環境では「
C:\Users\ユーザ名\AppData\Roaming\Adobe\Dreamweaver CS5.5\ja_JP\DocumentTypes\MMDocumentTypes.xml」にあるファイルを上書きして、Dreamweaver を再起動させたところ、コードヒントが使えるようになりました。
AppData フォルダは隠しファイルとなっているので、フォルダオプションで隠しファイルを表示させておくと探しやすかったです。
とりあえず、win の作業環境の構築は完了しました。
お次は mac です。
「
Scout」は mac でも使えるので、scss を編集できるソフトがあれば、win と同じく「
Scout」をインストールして終わりです。けれど、私の mac の環境に scss を編集できるソフトがありませんでした。
そこで、グーグル先生に訊ねた結果、「
NetBeans」を使う事にしました。「
NetBeans」は、プラグインを追加する事で、scss の編集からコンパイルまで、対応してくれるようです。
■作業環境
MacBook Ari / Mac OS X Lion 10.7.2
■scss を作成・編集、css を出力に使うソフト・プラグイン
NetBeans(無償)
scss-editor(プラグイン・無償)
github(Sass 本体・無償)
■参考URL
Mac OS X LionでのJava環境インストール(勘違いかも?
NetBeansではじめるSCSS
NetBeansでSCSS
まずは、mac に「
NetBeans」をインストールします。
dmg ファイルをダウロードして展開。
インストーラーを起動して、特に変更を加える事なく進めていきます。
インストール先を選択するところで、躓きました。「Java 6 が入ったディスクを選択して下さい」的な事を言われ、インストールが止まってしまった。
早速、「Java」のサイトにアクセスしたのですが、「
アップルコンピュータは、独自のバージョンの Java を提供しています。お使いの Mac に最新バージョンの Java がインストールされていることを確認するには、アップルメニューのソフトウェアアップデート機能を使用します。」と言われるだけで、Java がダウンロードできない……。
ソフトウェア・アップデートをやってみても、全て最新です、と言われるだけ……。
ヘルプ! グーグル先生!
行き当たった「
Mac OS X LionでのJava環境インストール(勘違いかも?」を参考にしました。
結局、「ターミナル」を使うはめに……。そもそも、「ターミナル」はどこに存在しているの? 探しました。でも見つからなくて、Finder の検索ボックスに「ターミナル」と入れました。
後で気付きましたが、アプリケーションのユーティリティの中にあるんですね……orz
早速、「ターミナル」を起動。真っ黒画面の予想を裏切り、白い画面にまず驚きました。そして、恐る恐る「java -v」と入力し、「return キー」をポチっとな。
うおぉ! 何か、よくわからないけど、ソフトウェア・アップデートが立ち上がり、何かが完了しました。
それから、もう一度「
NetBeans」のインストーラーを立ち上げ直したところ、今度はうまくいきました。
やった! インストールができたよ!
これでようやく、次の行程に移れます。
次の行程は「
NetBeans」に Sass をコンパイルできるようにする為のプラグインを追加します。詳しくは「
NetBeansではじめるSCSS」をご覧下さい。スクリーンショット付きで丁寧に解説されています。
さて、まずは下準備として、「
scss-editor -プラグイン」と「
github -Sass 本体」をダウンロードしてきます。
それぞれ、最新バージョンをダウンロードしました。
これを随筆している時点では、「
scss-editor -プラグイン」が「scss-editor 0.3 BETA for netbeans 7.0」で、「
github -Sass 本体」が「Version: 3.2.0 alpha.0」が最新バージョンでした。
下準備が整ったところで、「
NetBeans」を起動します。
先ほど、ダウンロードしたプラグインを「
NetBeans」にインストールします。
ここで、私は再び躓きました。プラグインって、どうやってインストールするの?
……グーグルせんせぇー!
「
NetBeansでSCSS」を参考に、何とかインストールする事ができました。
無事、プラグインがインストールできたところで、「NetBeans > 環境設定...」もしくは「command + ,」でオプションを開きます。
その他のタブから、Scss を選択します。
先ほど、ダウンロードした Sass 本体の圧縮ファイルを任意の場所で展開します。
「Browsw...」ボタンをクリックして、任意の場所に展開した Sass ファイルを選択します。
「了解」ボタンをクリックすれば、mac の作業環境の構築が完了となります。
******
こんな感じで作業環境の構築を行い、一応、Scss を使えるようになりました。
とりあえず、動作とか、Scss の構文? とかも書きたいと思っています。主に自分用の備忘録。