KoalaはSassをGUI環境で使うことができるコンパイラです。デザイナーさんはコマンド操作よりも、こちらの方が使いやすいかもしれません。
ここではKoalaの使い方を学習します。
Koalaのインストール（Windows)
KoalaはWinとMacどちらにも対応しています。
Koalaはこちらからダウンロード
ダウンロードのページに行きOSにあったものをダウンロードします。
Macは圧縮ファイルをそのままダブルクリックでKoalaが出てきたら、アプリケーションフォルダなどに入れておきましょう。
以下はWindowsでのKoalaのインストール方法です。
Koalaの環境設定
環境設定は上部にある歯車のボタンです。
左にあるメニューから「一般」を選択してから言語を「日本語」にしておきます。
左にあるメニューから「Sass」を選択してからSassのオプションを選びます。
「Compass Mode」はCompassを使用するときだけチェックを入れます。
「Source Map」にチェックを入れるとSource Mapが作成されます。あると都合が良いのでチェックを入れておくとよいでしょう。
Source Mapとは、これがあるとブラウザにソースの関連を教えてくれます。例えばChrome「検証」機能でSourceタブを選択するとHTMLとCSSのソースが表示されますが、Source Mapがあるとscssファイルも表示されるようになります。
以下の図がその例です。Source Mapが存在しないと「style.scss」は表示されません。
「Autoprefix」これはベンダープリフィックスを自動で付与してくれるものです。また現在では不要なベンダープリフィックスは削除してくれる優れものです。こちらはチェックを入れておいた方が良いでしょう。
Sassの例
[Sass]
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
[/Sass]
上のようなSassの記述が以下のようなCSSで書き出されます。
CSSの例
-o-border-radius: 4px; border-radius: 4px;
以下の設定は通常は必要ないでしょう。
「line comments」とは、CSSに/* line 2, style.scss */のような行数コメントを記述します。
「debug info」とは、 @media -sass-debug-info のデバッグタグをいれるかどうか。
「unix newline」とはunix改行コードにするかどうか
以下のアウトプットスタイルはExpendentだけチェックします。
アウトプットスタイル
- Nested
- Sassのネストのインデントを使用
- Expendent
- 通常のCSSの記述にする
- Compact
- セレクタとプロパティをシングルラインにする
- Compressed
- 空白など全て取り圧縮します
ファイルの準備とコンパイル
- 任意の場所に任意の名前で新規フォルダを作成します。
今回は”sample_ss2”という名前でフォルダを作成しました。 - テキストエディタで、”style.scss”というファイルを作成して先程作成した「sample_ss2」フォルダに保存します。
- Koalaを起動します。
- 「sample_ss2」フォルダをそのまま「Koala」にドラッグ＆ドロップします。
- 左のメニューに「sample_ss2」フォルダが表示されて、中央にSCSSのアイコンが表示されます。
- 中央のSCSSのアイコンをクリックすると、右側にメニューが表示されますので必要事項を設定します。
- まずは「自動コンパイル」にチェックを入れて、output styleは「expendet」を選択します。
- 「コンパイル」ボタンをクリックするとコンパイルされてCSSファイルが作成されます。
＊「自動コンパイル」にチェックが入っていると次回からはSCSSファイルを保存すると自動でCSSにコンパイルされます。
コメントを投稿するにはログインしてください。