1.Sass(Scss)とは？

サイト制作する際に、HTMLが複雑になってきてcssのコードがちらばったり
同じスタイルコードを使いまわすのに別のコードをコピペするなどあるとおもいます。

このようなCSSを使う上で面倒になりがちな部分を、プログラム的に置き換えて無駄を排除しようと考えられたのがSassです。

今回はこのSassについて紹介したいと思います。

2.環境構築

Sassを使えるようにするために、まずRubyをインストールします。

ダウンロード先：RubyInstaller

↑のページからインストーラをダウンロードして、
「Rubyの実行ファイルへ環境PATHを設定する」にチェックをしてインストールを行います。

Rubyのインストールが完了したら、次にSassをインストールします。
↓　Sassのインストール手順は以下になります。

Sassインストール手順

1.コマンドプロンプトを起動
2.gem install sassと入力する
3.しばらく待機するとインストール完了

続いて
ダウンロード先:Koala
↑のページからSassで書いたファイルをCSSにコンパイルするソフトをダウンロードし
インストールを行います。以上で環境構築は終了なので次は実際にソフトをつかって

3.Sass(Scss)を書いてみる

KoalaでSass(Scss)を書く手順を説明します。

1.テキストエディタで、任意のフォルダに.scssファイルを作成します。
2.　作成した.scssファイルにScss形式でcssを記述します。
3. .scssファイルを含んだフォルダをKoalaにドラッグ＆ドロップすると.cssファイルにコンパイルされます。

.scssの緑のファイルアイコンをクリックすると画面右にオプションメニューが現れ
書き出し方法を指定することも可能です。

各オプションの説明

・dynamic compilation：動的コンパイルを行う
・compass ・・・ フレームワークcompassを使用するか
・line comments ・・・書き出す際にSassの行数コメントをいれるか
・debug info ・・・　デバッグ用タグ@media -sass-debug-infoをいれる
・unix newlines ・・・unixの改行コードにするか
・output style ・・・書き出しスタイルが指定

各書き出しスタイルの表示サンプル

①　nestedを使った場合

#main {
  color: #fff;
  background-color: #000; }
  #main p {
    width: 10em; }
.content{
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline; }

②　expandedを使った場合

#main {
  color: #fff;
  background-color: #000;
}
#main p {
  width: 10em;
}
.content{
  font-size: 10em;
  font-weight: bold;
  text-decoration: underline;
}

③　compactを使った場合

#main { color: #fff; background-color: #000; }
#main p { width: 10em; }
.huge { font-size: 10em; font-weight: bold; text-decoration: underline; }

④　compressedを使った場合

#main{color:#fff;background-color:#000}#main p{width:10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}

環境が整ったので.Sassの構文を少し紹介

①Sassでは変数が利用可能

Sassでは変数を利用できる。よく利用する値をあらかじめ変数化しておき、それを自由に呼び出して利用できる。
変数は、「$」の後に定義できます

変数の例

$width:500px;
$color:#aa443f;
#maincontainer{
    width:$width;
    color:$color;
}

②SassではCSSの継承はネストを用いて簡潔に記述できる。

ネストの例

#main{
    background-color:#000;
    .content{
        background-color:#aaa;
        color:#000;
        .sidebar{
            padding:10px;
        }
    }
}

↓（コンパイル結果）

#main {
  background-color: black;
}
#main .content {
  background-color: #aaaaaa;
  color: black;
}
#main .content .sidebar {
  padding: 10px;
}

その他のSassの書き方は色々なサイトに載っているのでぜひ使ってみてはどうでしょう！
だいぶcssがすっきりして見やすくなりますしおすすめです。

Sass(Scss)でCSSを書いてみよう

1.Sass(Scss)とは？

2.環境構築

3.Sass(Scss)を書いてみる