Sassの導入 〜Sass(1)

HTML&CSS

Sass(Syntactically Awesome Stylesheets)はCSSを拡張したメタ言語です。
機能を拡張してより効率的にCSSを書けるようにするものです。
具体的には、変数や関数をはじめ、演算、条件分岐、ループなどスクリプト的な機能が加わります。また、インポートしたファイルをCSSでは結合するなど便利な使い方もできます。

スポンサーリンク

Sassの準備

Rubyのインストール

MacにはRubyがあらかじめ入っていますのでこの作業は不要です。
Windowsは次のページから最新のものをダウンロードしてインストールします。
インストールの時、「Rubyの実行ファイルへ環境PATHを設定する」にチェックを入れておくことを忘れないでください。ただし、環境PATHがわかる方はご自由にどうぞ。

RubyInstaller

Rubyインストール終了の際に、文字コードのデフォルトをUTF-8にするかどうか、チェックボックスが表示されますのでこれにチェックを入れます。Koalaを使う場合この設定をしておかないと、文字コードエラーで泣かされます。
また、インストール終了後にMSYS2をインストールするかどうかの選択画面になりますが、SassやKoalaを使う上で必要ありませんので、そのまま終了させます。

Sassのインストール

Mac

ターミナルから以下を入力して「return」します。
sudoでルートになります。パスワードを求められますのでMacのパスワードを入力して「return」これで終わりです。

sudo gem install sass

Windows

コマンドプロンプトから以下を入力して「ENTER」以上です。
注意:インストール終了まで少し時間がかかります(カップラーメンができるくらいの間、何も反応しない)。

gem install sass

インストールが修了したら以下の画面になります。
img1

*gemとはRubyのライブラリ形式です。gemコマンドにオプションを付けることでライブラリを探したり、インスト-ルしたりなどの命令を行います。

Koalaの導入

KoalaはSassで書いたファイルを簡単にコンパイルしてCSSに変換してくれます。本来はターミナルから操作するものですが、WebデザイナーさんにはGUIのアプリケーションが使いやすいと思います。

WinとMacどちらにも対応しています。
Koalaはこちらからダウンロード

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

アイコンはコアラというよりもウルトラマンのようでもあります。

Koalaの使い方

Koalaの使い方はコチラに別途説明しました。

環境設定

環境設定はKoalaの画面の左上にある歯車ボタンをクリックして行います。
koala2

左メニューの「一般」から言語を「日本語」にします。
koala3

左メニューの「SASS」からSASSの環境を設定できます。
koala4

通常は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内だけでコメントアウトしたいときに使用すると良いでしょう。

複数行コメントアウトは「/* コメント */」となります。

Sassの関連記事

  1. Sassの導入 〜Sass(1)
  2. Sassのネスト 〜Sass(2)
  3. Sassの変数 〜Sass(3)
  4. Sassの@import 〜Sass(4)
  5. Sassの演算と関数 〜Sass(5)
  6. Sassのミックスイン 〜Sass(6)
  7. CompassをインストールするMac OS X El Capitan編 〜Sass(7)
タイトルとURLをコピーしました