WEBデザインの勉強

初心者が1からWEBデザインを勉強するブログ。

Koalaを使用してSassのコンパイルをする

Koalaとは

GUIコンパイラ

事前準備

Rubyをインストール

Sassを使用するにはRubyをインストールしなくてはならない。(MACは標準で搭載)
RubyInstaller for Windows

Sassをインストール

sass-lang.com

コマンドプロンプト

gem install sass

と打つとインストールされる。

Koalaをインストール

koala-app.com
公式サイトからダウンロードし、インストールする。

f:id:mmmmofu:20170110174137p:plain

プロジェクト登録

左のバーから「+」かファイルをそのままドラッグ&ドロップすると登録できる。
該当SASSをクリックするとオプションなどが設定できる。

オプション

CompassMode フレームワークcompassを使用するか。
Source Map コンパイル前とコンパイル後の対応関係を記したJSON形式のファイルを作成するか
Line Comments 書き出す際にSassの行数コメントをいれるか。
Debug Info デバッグ用タグ@media -sass-debug-infoをいれるか。
Unix New Lines unixの改行コードにするか。
Autoprefix ベンダープレフィックスを自動でつけるか

アウトプットスタイル

nested インデントを入れ子のようにするスタイル
expanded 通常CSSを書くときのように読みやすいスタイル
compact ひとつのCSS毎に一行にしたスタイル
compressed minify(改行などをなくし軽量化)したスタイル。