Koalaを使ってSassを使用する方法

コマンドがわからない、ターミナルを使いたくないという人でも、Sassを使用できる方法に、Koalaという直感的に操作ができるアプリケーションソフトがあります。今回はその方法を紹介します。

KoalaでSassを使用する手順

手順は以下の通りです。

  1. Koalaをダウンロードします
  2. Koalaを起動します
  3. プロジェクトファイルを用意します
  4. 設定ファイルを作成します
  5. CSSに変換(コンパイル)します

Koalaをダウンロードします

スクリーンショット 2016-06-14 14.39.26

Koalaの公式サイトからKoalaをダウンロードします。

Koalaを起動します

Koalaを起動します。まれにダブルクリックじゃ起動できない時があるので、その場合、右クリックで開くを選択しましょう。

スクリーンショット 2016-06-14 14.44.48

このような画面が立ち上がります。

スクリーンショット 2016-06-14 15.18.38

もし英語でわかりづらいようなら、左上の設定のアイコンから、日本語に変更しましょう。

スクリーンショット 2016-06-14 15.25.02

プロジェクトファイルを用意します

左上のプラスのアイコンから、変換したいSCSSファイルを選択します。

スクリーンショット 2016-06-14 14.56.48

このようにSCSSファイルが読み込めました。今回はFree CSSのテンプレートを使って実際に行ってみます。

設定ファイルを作成します

スクリーンショット 2016-06-14 15.00.03

左側のメニューのプロジェクトを右クリックから設定ファイルを作成します(Sassの場合はSass、他の場合は他の項目を選択しましょう)。

スクリーンショット 2016-06-14 15.05.32

OKを押します。そうすると、エディタにこのような設定ファイルが出てきます。

スクリーンショット 2016-06-14 15.05.54

mappingsで出力先、入力先のパスを指定できます。

optionsで様々なオプションを設定できます。自分で色々カスタムしてみましょう。何もなければそのままで大丈夫で、変換したCSSファイルのディレクトリが一番上の階層に作られることになります。

CSSファイルに変換(コンパイル)します

スクリーンショット 2016-06-14 15.18.38

SCSSファイルをクリックすると、右側にコンパイル用のオプションとボタンが出てきます。一つずつコンパイルボタンを押していきましょう。これでKoalaでSassファイルをCSSファイルに変更することができました。


イベント

2017/12/05(火)
Design Thinking Square