コマンドがわからない、ターミナルを使いたくないという人でも、Sassを使用できる方法に、Koalaという直感的に操作ができるアプリケーションソフトがあります。今回はその方法を紹介します。
KoalaでSassを使用する手順
手順は以下の通りです。
- Koalaをダウンロードします
- Koalaを起動します
- プロジェクトファイルを用意します
- 設定ファイルを作成します
- CSSに変換(コンパイル)します
Koalaをダウンロードします
Koalaの公式サイトからKoalaをダウンロードします。
Koalaを起動します
Koalaを起動します。まれにダブルクリックじゃ起動できない時があるので、その場合、右クリックで開くを選択しましょう。
このような画面が立ち上がります。
もし英語でわかりづらいようなら、左上の設定のアイコンから、日本語に変更しましょう。
プロジェクトファイルを用意します
左上のプラスのアイコンから、変換したいSCSSファイルを選択します。
このようにSCSSファイルが読み込めました。今回はFree CSSのテンプレートを使って実際に行ってみます。
設定ファイルを作成します
左側のメニューのプロジェクトを右クリックから設定ファイルを作成します(Sassの場合はSass、他の場合は他の項目を選択しましょう)。
OKを押します。そうすると、エディタにこのような設定ファイルが出てきます。
mappingsで出力先、入力先のパスを指定できます。
optionsで様々なオプションを設定できます。自分で色々カスタムしてみましょう。何もなければそのままで大丈夫で、変換したCSSファイルのディレクトリが一番上の階層に作られることになります。
CSSファイルに変換(コンパイル)します
SCSSファイルをクリックすると、右側にコンパイル用のオプションとボタンが出てきます。一つずつコンパイルボタンを押していきましょう。これでKoalaでSassファイルをCSSファイルに変更することができました。