Sassとは？

SassでCSSコーディングをより便利に

ホームページのレイアウトやデザインを整えるCSS。そのCSSの機能を拡張し、効率的に便利に書けるようにしたメタ言語がSassです。

Sassは「Syntactically Awesome Stylesheets」の略で「構文的に　素晴らしい　スタイルシート」という意味で、cssをより便利にしようというという発想から生まれました。

Sassを利用すればプログラミング言語のように変数・演算を利用してCSSを組むことができます。具体的に言うとSassで制作したプログラム要素を入れたCSSファイルを「.sass」または「.scss」拡張子で保存し、そのSassファイルをコンパイル（変換）してCSSファイルを制作できます。

Sassの概要

Sassを利用するとCSSに以下のプログラム要素を加えたSassファイルを制作できます。

1.セレクタのネスト（入れ子）

セレクタを入れ子で設定できます。階層がわかりやすく記述量も少なくなります。

#main {
 .site {
  margin: 0 0 10px;
  .site-title {
   font-size:120%;
   font-weight: bold;
  }
 }
 .content {
  border: 3px solid #ddd;
 }
}

 2.親セレクターの参照

親セレクターを呼び出すことができます。

a{
 color: #0000ff;
 &:hover{
  color: #ff0000;
  text-decoration: underline;
 }
}

 3.変数

使いまわすカラーコードや数値を変数に変えることで同じ色や数値が変わるとき変数の値を変更することで変数を使っているところを一気に変化させることができます。

$link_color: #00938D;
 
a {
 color: $link_color;
}
.entry-title {
 color: $link_color;
}

 4.演算

計算式が使えます。paddingなどの調整に便利です。

#box {
 width: 960px - 16px;
 padding: 8px;
}

 5.ミックスイン

スタイルを変数のように扱うことができます。

@mixin whitebox {
 background: #fff00;
 padding: 10px;
}
#content article {
 @include whitebox;
}

以上の機能を使ってCSSを組むことができます。

さらにCompassを使うことでCSSスプライトを自動生成することができます。

Sassの導入方法

Sassのデメリットは導入がコマンドを触るなど少しインストールが大変なところでしょうか。導入方法をご紹介します。

 Step1. Rubyをインストール

RubyをインストールしないとSassは動きません。Macは始めから入っていますのでWindowsの方はインストールしましょう。

→Ruby

Step2.Sassをインストール

次にSassのインストールです！WindowsとMacで少し違います。

Windowsの場合

1. スタート→アクセサリ　→　コマンドプロンプトを起動
2. 「gem install sass」と入力してEnter
3. 動くまでちょっと待って文字が出てきたら完了

Macの場合

1. アプリケーション”フォルダ　→　”ユーティリティ”フォルダ　→　ターミナルを起動
2. 「sudo gem install sass」と入力してreturn
3. Mac OSのユーザーパスワードを入力してreturn
4. 動くまでちょっと待って文字が出てきたら完了

これでSassはインストール完了しましたがまだインストールしないといけないソフトがあります。

Step3. SassをCSSに変換させるソフトをインストールする

次にSassファイルをCSSに変換（コンパイル）させるソフトが必要です。ブラウザはCSSファイルは読み込めるけどSassファイルは読み込めないからです。

フリーソフトの”Koala”がお勧めです！

→Koala

以上でSassを使う準備ができました！

後はテキストエディタで作った拡張子を.scssのファイルをKoalaなどのコンパイルするソフトに入れて編集すればOKです！

番外. Dreamweaverで編集できるようにする

※Dreamweaverは本来Sassに対応していません。これを実行するのは自己責任でお願いします。編集前にバックアップをとるなど、いつでも再インストールできる準備をしておくことをオススメします。

DreamweaverにSassを対応させるにはSassの拡張子.scssを読みこめるようにしないといけません。以下の手順でできます。

1. メニュー　→　編集　→　環境設定　→　ファイルタイプ/エディターを開く
2. 「コードビューで開く」に拡張子”.scss”を追記

そしてSassファイルにコードヒントを利用するにはDreamweaverの設定ファイル「MMDocumentTypes.xml」をいじる必要があります。（Dreamweaver以外のソフトで編集してください）

<documenttype id="CSS" internaltype="Text" winfileextension="css" macfileextension="css" file="Default.css" writebyteordermark="false" mimetype="text/css" >

の文を下記に変えてください↓

<documenttype id="CSS" internaltype="Text" winfileextension="css,scss" macfileextension="css,scss" file="Default.css" writebyteordermark="false" mimetype="text/css" >

まとめ

Sassの概要のみご紹介いたしました！

インストールに少し時間がかかりますが、変数や演算などプログラミング要素のいいところをCSSで使えるのはとても便利です！

Sassを使うことでCSSコーディングの時間が大分短くなるのではないでしょうか。