Koalaの使い方〜Sass

HTML&CSS

KoalaはSassをGUI環境で使うことができるコンパイラです。デザイナーさんはコマンド操作よりも、こちらの方が使いやすいかもしれません。
ここではKoalaの使い方を学習します。

スポンサーリンク

Koalaのインストール(Windows)

KoalaはWinとMacどちらにも対応しています。
Koalaはこちらからダウンロード
img2
ダウンロードのページに行きOSにあったものをダウンロードします。
Macは圧縮ファイルをそのままダブルクリックでKoalaが出てきたら、アプリケーションフォルダなどに入れておきましょう。

以下はWindowsでのKoalaのインストール方法です。
img3

img4

img5

img6

img7

img8

Koalaの環境設定

環境設定は上部にある歯車のボタンです。
sass001

左にあるメニューから「一般」を選択してから言語を「日本語」にしておきます。
sass002

左にあるメニューから「Sass」を選択してからSassのオプションを選びます。
「Compass Mode」はCompassを使用するときだけチェックを入れます。
「Source Map」にチェックを入れるとSource Mapが作成されます。あると都合が良いのでチェックを入れておくとよいでしょう。

Source Mapとは、これがあるとブラウザにソースの関連を教えてくれます。例えばChrome「検証」機能でSourceタブを選択するとHTMLとCSSのソースが表示されますが、Source Mapがあるとscssファイルも表示されるようになります。
以下の図がその例です。Source Mapが存在しないと「style.scss」は表示されません。
sass004

「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
空白など全て取り圧縮します

ファイルの準備とコンパイル

  1. 任意の場所に任意の名前で新規フォルダを作成します。
    今回は”sample_ss2”という名前でフォルダを作成しました。
  2. テキストエディタで、”style.scss”というファイルを作成して先程作成した「sample_ss2」フォルダに保存します。
  3. Koalaを起動します。
  4. 「sample_ss2」フォルダをそのまま「Koala」にドラッグ&ドロップします。
  5. 左のメニューに「sample_ss2」フォルダが表示されて、中央にSCSSのアイコンが表示されます。
  6. 中央のSCSSのアイコンをクリックすると、右側にメニューが表示されますので必要事項を設定します。
  7. まずは「自動コンパイル」にチェックを入れて、output styleは「expendet」を選択します。
  8. 「コンパイル」ボタンをクリックするとコンパイルされてCSSファイルが作成されます。

*「自動コンパイル」にチェックが入っていると次回からはSCSSファイルを保存すると自動でCSSにコンパイルされます。

sass005

タイトルとURLをコピーしました