Sass

Sassの概要とインストールSassの概要とインストール

2015年11月24日

Sass(Syntactically Awesome Style Sheets)はCSS3向けの拡張機能で、変数や関数などCSSにはない便利な機能が用意されています。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ソフトPreprosのインストール

PreprosはSassで書いたものを自動でコンパイルするためのアプリケーションです。
無償で使えますが、有料のライセンスを購入するまでポップアップが表示されます。
他にも無料の代替ソフトウエアがありますが、使いやすさや機能を考えるとPreprosがおすすめです。

インストールと使い方は下記を参考にしてください。
SassのGUIコンパイラ Prepros 【インストール&使い方】

Preprosのインストールが済んだら、Preprosを起動してください。PreprosでSassファイル関連を管理したい場合、アプリ左下の[+]ボタンを押して管理したいSassファイルがあるフォルダを選択するか、フォルダをPreprosにドラッグアンドドロップして追加します。

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

Sassの使い方

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

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

Comment

コメントを残す

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

関連記事

CONTACT US

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