3.4.22SassはCSSと完全な互換性をもった拡張言語です。CSSにないさまざまな機能を使って、柔軟かつ効率的にスタイルが定められます。Rubyで実装されたオープンソースソフトウェアです。Sassで書いたファイルは、CSSに変換してHTMLドキュメントに用います。そのため、Sassを使えるようにするには少し準備が要ります。その手順をかいつまんでご説明しましょう。RubyのインストールSassはRubyで実装されていますので、Rubyがインストールされていなければなりません。XにはすでにRubyが入っていますので、インストールは要りません。WindowsWindowsは、RubyサイトのダウンロードページからRubyInstallerをダウンロードします。いくつかのバージョンがあり、64ビットかどうかも選ばなければなりません(図001)。DOWNLOAD?」参照)。図001■RubyInstallerのダウンロードページダウンロードしたRubyInstallerを起動したら、指示にしたがってインストールを進めます。このとき、「インストール先とオプションの指定」で「Rubyの実行ファイルへ環境PATHを設定する」にチェックしてください(インストールの手順は「WindowsにRubyとSassをインストールする方法」の「RubyをWindowsにインストール」に細かく紹介されています)。SassファイルからCSSを書き出すSassファイルからCSSを書き出す環境のつくり方はふたつあります。ひとつは、アプリケーションを使うことです。開発環境に慣れていない人には始めやすいでしょう。ひとつは、コマンドラインでSassをインストールして、CSSファイルに書き出します。Sass」のページにいくつかのアプリケーションが紹介されています(図002)。その中のKoalaの使い方を次項03でご紹介します。コマンドラインでインストールするコマンドラインでインストールするには、コマンドラインツールを起ち上げます。Xならターミナル、Windowsではコマンドプロンプトなどです。SassはRubyのgemコマンドでインストールします。Xでは管理者権限を求められるので、sudoコマンドを加えます(「ターミナルでのコマンドの使い方。(超初心者向け)」参照)。コマンドを使うには空ではない管理者パスワードが必要」参照)。sassインストールが済んだら、念のためつぎのコマンドでSassのバージョンを確かめましょう。Steve)」のようにバージョン情報が示されれば大丈夫です。-vSassのファイルをコンパイルするには、コマンドラインツールでファイルを納めたディレクトリに切り替えます。そのうえで、つぎのようにsassコマンドで、もとのSassファイルとコンパイルしたCSSファイル名を入力してください。後述04で簡単なSassのファイルをコンパイルしてみます。Koalaを使うKoalaは直感的なGUI操作で、SassをCSSに変換(コンパイル)できるアプリケーションです。XやWindowsおよびLinuxのクロスプラットフォームに対応し、無償で使えるオープンソースです。日本語のインターフェイスも備わっています。[Download]ボタンでダウンロードしてください。Sass」のページに紹介されているアプリケーションダウンロードしたKoalaのアプリケーションを起ち上げます。インターフェイスを日本語にするには、歯車のアイコンで[Settings](環境設定)を開いて、[Language]から選んでください(図001)。アプリケーションは一旦閉じて、改めて起動します。すべてのメニューや項目が日本語になるわけではありません。図004■[Settings]で[Language]を選ぶKoalaの使い方は、Sassのファイルが納められるプロジェクトのフォルダをアプリケーションのウィンドウにドロップするだけです(図005)。図005■プロジェクトのフォルダをアプリケーションにドロップするフォルダにSassのファイル(拡張子SCSS)をつくって保存すれば、自動的にCSSファイルが同じフォルダと名前(拡張子CSS)で書き出されます(図006)。CSSファイル名の左のアイコンをクリックすれば、ファイル名や保存先は変えられます。図006■フォルダ保存されたSassのファイルSassのファイルの保存を検知して自動コンパイルするには、Koalaは起動したままにしてください。あとから手動でコンパイルするには、Sassのファイルをクリックして右カラムに設定を開きます。[コンパイル]のボタンを押せばCSSファイルが書き出されます。簡単なSassのファイルをコンパイルしてみる簡単なSassのファイルをCSSにコンパイルしてみましょう。つぎのような、拡張子SCSSのファイルをつくります(拡張子SASSは別構文で古く、今はもっぱらSCSSが使われます)。基本の構文はCSSと同じです。入れ子(ネスト)にまとめて書くことができます。#00f;}}}KoalaでSassのファイルのフォルダを設定してあれば、保存するだけでコンパイルが済みます(手動のコンパイルは前掲図007参照)。コマンドラインでコンパイルするには、コマンドラインツールでSCSSファイルのディレクトリに切り替えたうえで、つぎのsassコマンドを打ち込みます。test.scss:test.cssつぎのようなCSSファイルが書き出されたでしょう。*/コマンドラインでもKoalaのようにフォルダをまとめて監視して、自動的にコンパイルすることもできます。そのためには、sassコマンドにwatchオプションを加えます。styleオプションで、コンパイルするCSSの形式が変えられます。Styles」参照)。すべてを1行にしてサイズを最小にするSCSSファイルがフォルダ「sass」に納められ、CSSファイルを「css」に書き出すとしましょう。SCSSファイルの保存を監視してコンパイルするには、sassコマンドをつぎのように入力します。CSSファイルの形式はexpandedを選びました。expandedsassフォルダに前掲SCSSファイル(test.scss)を保存すると、cssフォルダにはつぎのようなCSSファイル(test.css)が書き出されます。[C]を押してください。*/Koalaでは、[環境設定]で[Sass]を開いて、[アウトプットスタイル]で形式が選べます(図008)。同梱されているSassのバージョンも確かめられます。