Sass(Syntactically Awesome Stylesheets)はCSSを拡張したメタ言語です。
機能を拡張してより効率的にCSSを書けるようにするものです。
具体的には、変数や関数をはじめ、演算、条件分岐、ループなどスクリプト的な機能が加わります。また、インポートしたファイルをCSSでは結合するなど便利な使い方もできます。
Sassの準備
Rubyのインストール
MacにはRubyがあらかじめ入っていますのでこの作業は不要です。
Windowsは次のページから最新のものをダウンロードしてインストールします。
インストールの時、「Rubyの実行ファイルへ環境PATHを設定する」にチェックを入れておくことを忘れないでください。ただし、環境PATHがわかる方はご自由にどうぞ。
Rubyインストール終了の際に、文字コードのデフォルトをUTF-8にするかどうか、チェックボックスが表示されますのでこれにチェックを入れます。Koalaを使う場合この設定をしておかないと、文字コードエラーで泣かされます。
また、インストール終了後にMSYS2をインストールするかどうかの選択画面になりますが、SassやKoalaを使う上で必要ありませんので、そのまま終了させます。
Sassのインストール
Mac
ターミナルから以下を入力して「return」します。
sudoでルートになります。パスワードを求められますのでMacのパスワードを入力して「return」これで終わりです。
sudo gem install sass
Windows
コマンドプロンプトから以下を入力して「ENTER」以上です。
注意：インストール終了まで少し時間がかかります（カップラーメンができるくらいの間、何も反応しない）。
gem install sass
インストールが修了したら以下の画面になります。
＊gemとはRubyのライブラリ形式です。gemコマンドにオプションを付けることでライブラリを探したり、インスト-ルしたりなどの命令を行います。
Koalaの導入
KoalaはSassで書いたファイルを簡単にコンパイルしてCSSに変換してくれます。本来はターミナルから操作するものですが、WebデザイナーさんにはGUIのアプリケーションが使いやすいと思います。
WinとMacどちらにも対応しています。
Koalaはこちらからダウンロード
ダウンロードのページに行きOSにあったものをダウンロード
WindowsはSetupファイルからインストールします。
Macは圧縮ファイルをそのままダブルクリックでKoalaが出てきたら、アプリケーションフォルダなどに入れておきましょう。
アイコンはコアラというよりもウルトラマンのようでもあります。
Koalaの使い方
環境設定
環境設定はKoalaの画面の左上にある歯車ボタンをクリックして行います。
左メニューの「一般」から言語を「日本語」にします。
左メニューの「SASS」からSASSの環境を設定できます。
通常はDefault Optionsは必要に応じてチェックを入れます。まずは何もチェックを入れないまま使用すると良いでしょう。
- compass
- Compassを使用する場合にチェックを入れる
- line comments
- CSSに行数コメントを記述
- debug info
- デバッグタグをいれるかどうか
- unix newline
- unix改行コードにするかどうか
以下のアウトプットスタイルはExpendentだけチェックします。
アウトプットスタイル
- Nested
- Sassのネストのインデントを使用
- Expendent
- 通常のCSSの記述にする
- Compact
- セレクタとプロパティをシングルラインにする
- Compressed
- 空白など全て取り圧縮します
プロジェクトフォルダの準備
Sassファイルやcssファイルを保存するプロジェクトフォルダを準備します。
Sassファイルはscss拡張子を使用します。
プロジェクトフォルダをKoalaの中にドラッグ&ドロップします。
これでKoalaにプロジェクトが登録されました。
Sassのコメントアウト
Sassでコメントアウトする場合の注意点として、必ず一番最初に「@charset “utf-8”;」などの文字コードの指定を記述することです。これがないと日本語のコメントアウトを記述するとコンパイル時にエラーがでます。
コメントアウトは1行コメントアウトが「//」スラッシュ2本です。1行コメントアウトはCSSにコンパイルすると削除されます。
Sass内だけでコメントアウトしたいときに使用すると良いでしょう。
複数行コメントアウトは「/* コメント */」となります。
コメントを投稿するにはログインしてください。