話題のCSSのSassとは?使ったら構築スピード激的アップ!

jQuery・css

1〜2年前から話題のSassなるものを簡単に使用できるように、解説しようと思います。と言っても、今回はじめて触ったので、使えるようになるまでに起こったエラーや改善方法も合せて記載していきます。

Sassとは何ぞ?

Sassとはホームページを作成(構築)する際のコーディングの「スピードが格段と上がる」だとか、「大手会社も使用している」とかよく聞きます。
前から気になっていたので、重い腰を上げて使ってみました。

1.パソコンに Sass をインストール

Sassをインストールするには、Rudyを使用する為、アプリケーションを普通にインストールするのとは訳が違います。方法は簡単なのですが、コマンドを叩いてインストールする為、かっこ良く見えます!

Windowsの場合

1.スタート→アクセサリ→コマンドプロンプトを起動
2.「gem install sass」と入力してEnter
3.インストール完了するまで5分程待ちます。→完了!

Macの場合

1.アプリケーション→ユーティリティ→ターミナルを起動
2.「sudo gem install sass」と入力してreturn
3.ユーザーのパスワードを入力してreturn
4.インストール完了するまで5分程待ちます。→完了!

2.GUIソフトの「Koala」をダウンロード&インストール

sass koala

GUIソフトの「Koala」をインストールします。なぜソフトを通さないといけないのか。テキストエディタだけでも構築できるじゃないか!と思いますが、Sassで書いたものはcssとしてブラウザが読めないので「コンパイル(変換)」する必要があります。そのために、簡単にコンパイルできるGUIソフトのインストールをする必要があるのですね。

ダウンロード:「Koala」 このサイトから「Download」ボタンをクリックしダウンロードします。
ダウンロードが完了したら、任意の場所に本体を保存しましょう。

3.初期化

起動したら、左上にある「歯車アイコン」をクリックして、
General→Language:日本語に設定します。
Sassインストール

ソフトを再起動しないと日本語が適用されないので、再起動しましょう。

続いて「Sass → compass Mode」にもチェックを入れます。
Sass インストール

4.実際にSassを使用してみる

準備が整ったのでSassを使ってみます。テストとして下記の手順で行います。

1.デスクトップに「TEST」というフォルダを作ります
2.その中にtest.scssというファイルを作ります。内容は下記の様に書いてみましょう。

.box{
    padding0 10px;

    h1{
        font-size18px;
    }
}
3.TESTフォルダごと、Koalaにドラッグ&ドロップ
4.するとKoala内に、TEST >> test.sassという感じで表示されます。
5.実際にコンパイルしてみましょう。
sassコンパイル
自動コンパイル・Line comments にチェックを付けたら、コンパイルボタンを押しましょう。

エラーが!!!

sass エラー
なんと、エラーが出てしまいました!もしかしたら、Windowsだとエラーが出ない?のかもしれません。MacでのテストなのでWindowsは試していません。^^;

ディレクトリの定義(設定)

調べてみると、どうやら、コンパイルしたcssを保存する場所・sassを読み込む場所などを前もって定義する必要があるとのことです。
sass ディレクトリの定義
Koala内のTESTディレクトリで右クリックし、
「プロジェクト設定」→「設定ファイルを作成」→「For Compass」をクリックします。
下記の様にテキストエディタが立ち上がるので、赤枠部分の「http_pathとsass_dir」を空に書き換えて保存します。
sass 定義

今度こそ、コンパイル!

sass コンパイル
「Success」と出ていればコンパイル成功です!
この時点で、デスクトップに作成したTESTディレクトを見ると、新しく「config.rb」と「stylesheets」というディレクトリが新しく作成されているのが分かります。
「stylesheets」の中にある、test.cssを開いてみましょう。
sass コンパイルcss
sassで記述したものをコンパイルしたものになります。
入れ子で作ったh1が、cssの構造としてきっちり生成されていますね。
使い方としては、例の様な入れ子状態のものであったり、変数を用意して、その値をどこでも使用することが出来ます。
例えば…

$red:#990000;

.box{
    color:$red;
}
の様に、定義しておけば、下記の様に生成されます。$redはどこでも何回でも使用できるので、色を変えたいという場合でも、$red:#990000を変えるだけで全ての$redが変わりますね!すごく簡単!!
/*css*/
.box {
  color#990000;
}

あとは、出力方法も4つの方法を選べます。
コンパイルボタンの上にある「アウトプットスタイル」を選択することで下記の様にそれぞれの形で出力されます。

sass コンパイル方法

まとめ

いかがでしたか?これで、cssに限らずhtmlやjavascriptなど、ホームページの制作スピードがいっきに上がると思います!
最後に紹介したコンパイルスタイルは、使いやすいものを使ってくださいね。大手のメディアサイトになると読み込みスピードを考慮して「compressed」を使うところが多いようです。

レイアウト調整はfloatじゃなくてこれからはCSS3のFlexboxを使って時短化!」も良く読まれています。