Sass

Sassの概要とインストール

2015年11月24日

Sass(Syntactically Awesome Style Sheets)はCSS3向けの拡張機能で、変数や関数など便利な機能が用意され、CSS のコーディング効率やソースコードの保守性を向上させることができます。

SassにはSASS記法とSCSS記法の2種類が用意されていますが、後から追加されたSCSS(Sassy CSS)がCSSの記述に近く、最近はSCSS記法が主流です。
どちらの記法でもブラウザは解釈できないので、コンパイルしてCSSファイルを出力する必要がありますが、アプリを使ってコンパイルを自動化することができます。

また、普通のCSSもそのままコンパイルできるため、最初は普通のCSSとして記述し、SCSSの便利な機能が使えるようになったら導入するといった使い方もできます。

特徴
  • CSS互換
  • 読みやすい
  • 変数、入れ子、ミックスインなどの言語拡張
  • 作業の効率化
  • 可読性重視や、読み込み速度重視などカスタマイズ可能な出力

Windows環境でのインストール

Rubyのインストール

  1. 下記からダウンロードしてください。
    http://rubyinstaller.org/
    ruby_installer
  2. インストールします。
    インストールの際、必ず「Rubyの実行ファイルへ環境PATHを設定する」にチェックをしてください。
    ruby_installer2
  3. コマンドプロンプトを開いてruby -v と入力し、 Rubyのバージョンが確認できたら成功です。

Sassのインストール

  1. コマンドプロンプトを起動します。
  2. 下記のように入力してEnterを押します。
    gem install sass
    
  3. インストールが終了したらコマンドプロンプトにて sass -v と入力し、Sassのバージョンが表示されたら成功です。

Compassのインストール

CompassはSassを利用したCSSフレームワークです。

  1. コマンドプロンプトを起動します。
  2. 下記のように入力してEnterを押します。
    gem install compass
    
  3. インストールが終了したらコマンドプロンプトにて compass version と入力し、Compassのバージョンが表示されたら成功です。

GUIソフトKoalaのインストール

KoalaはSassで書いたものを自動でコンパイルするためのアプリケーションです。
他にも代替ソフトウエアがありますが、無償でシンプルに使えるのがKoalaになります。

koala_cap1

下記からダウンロードしてインストールします。

http://koala-app.com/
koala

まずは言語を日本語に設定しておきましょう。
設定は下記のとおりです。

  1. 左上の歯車のアイコンをクリックし、環境設定を表示します。
  2. 左側メニューの[General] →[Language]から日本語モードにします。

KoalaでSassファイル関連を管理したい場合、左カラムの[+]ボタンを押して管理したいSassファイルがあるフォルダを選択するか、フォルダをKoalaの右カラムにドラッグアンドドロップして追加します。

フォルダを追加すると自動でSassファイルとCssファイルが右カラムに表示されます。

Sassの使い方

  1. 任意の場所に test というフォルダを作成します。
  2. test.scss というファイルを作成します。
  3. Koalaを起動します。
  4. testフォルダをKoalaにドラッグ&ドロップします。
  5. Koalaのパネルに test.scss が表示されます。
  6. 右カラムにオプションが表示されるので、任意で設定します。
    アウトプットスタイルの選択は、開発中は読みやすい expanded 、納品時は圧縮してくれる compressed がおすすめです。
    ※コンパイルするアプリ(今回の場合はKoala)は常に開いた状態にしておかないと、CSSが吐き出されないので注意。
  7. 試しに、以下のコードをtest.scssに記述してみてください。

    .box{
    padding: 0;
    h1{
    font-size: 12pt;
    }
    }
    
  8. ファイルを保存すると、scssファイルと同じディレクトリ内に test.cssが自動で作成されます。

関連記事

Comment

コメントを残す

メールアドレスが公開されることはありません。

リズムファクトリーはホームページの制作会社です。
ホームページ制作に関するご要望・ご相談はこちらからどうぞ。