これからSassを始めたい人へ！導入手順をまとめてみた(Dreamweaver対応)

セイト

2013.10.16

こんにちは。LIGフィリピン支社代表のせいとです。
全く関係ない話ですが、ポケットモンスター X・Yが発売されたそうですね。「金・銀、ブラック・ホワイトときたら、次はパステルカラー辺りが来るはずや！間違いない！」と思っていた僕の予想はまんまと外れました。まあそれはいいとして、

今回はSassについてちょっと語らせていただきます。Sassというと、「効率、コーディングスピードが超上がるらしい」とか、「LINE株式会社、株式会社DeNAとかも採用してるらしい」という話を聞きます。僕もSassについては勉強しているんですが、当初はわかりにくい部分もありました。

それは「そもそもSassが何なのかよくわからない。プログラミング言語？？」ってことと、「インストールが上手くいかない！コマンドプロンプト使い方わからない！Dreamweaver（以下DW）動かない！GUIソフトってなに！？」ってことです。

そこで今回は、初心者の方向けにSassをざっくり理解しつつ、短時間で使えるようにする方法を解説していきたいと思います。
ざっくりです。ざっくりなので、厳密にいうと間違ったことも言ってると思います。でもまあ、最初はとにかく触れるようになりましょう！

Sassの導入手順まとめ（Dreamweaver対応）

そもそもSassってなんでしょう。ざっくりいうと、すげえCSSです。CSSが孫悟空なら、Sassは孫悟空スーパーサイヤ人3みたいなもんです。
（※ちなみに、正確にはメタ言語っていいます。）

CSSの良いところは簡単かつ明確な点ですが、簡単ゆえにあまり複雑なことができません。プログラミング言語なら、変数とか演算を使って柔軟な命令ができますけど、CSSにはそれができない。そこで、CSSをもうちょっと便利にしようぜ！という発想からSassが生まれたようです。

今の段階ではまだよくわからないかもしれませんが、こんなことができるよってことだけ知っていただければと思います。

/*sass*/
.box{
	padding: 0 10px;
	h1{
		font-size: 18px;
	}
}

/*css*/
.box {
  padding: 0 10px;
}
.box h1 {
  font-size: 18px;
}

セレクタの入れ子ができれば超便利！記述が簡潔になり、後々メンテナンスがしやすくなります。

/*sass*/
$blue:#23599b;

.box{
	color:$blue;
}

/*css*/
.box {
  color: #23599b;
}

カラーコードを変数で設定しておけば、「コーディングの際にいちいちカラーコードを覚えずに済む」「色を変えたい時に一括で変更できる」というメリットがあります。この他にも、Sassにはたくさんの便利な機能があります。

それらを駆使すれば、CSSを書くのが今よりも格段に効率よくなります！

Sassを使えるようにするために、まずRubyをインストールしましょう。SassはRubyがないと動かないのです。Macの人は標準で搭載されているはずなので、このステップを飛ばしてOKです。

↑のページから「上の方にあるでかいDownloadボタン → RubyInstallers内にある最新版（一番上、ないし上から二番目のリンク）をクリック」でインストールできます。
PCが64bitの方は(x64)と表記のあるリンクをクリックしてください。

このとき、「Rubyの実行ファイルへ環境PATHを設定する」にチェックをしてください！

sass_ruby_window

次にSassをインストールします。SassのインストールにはRubyを使って行うため、アプリケーションをインストールするのとはちょっと勝手が違います。といってもやり方はすごく簡単！以下の通りに実行してみてください。

sass_command

LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。

この記事のシェア数

セイト Ex-President & VPoE at LIG Philippines. / 堀口セイト

現在はミネルバ大学院に在籍しつつ、SNS総フォロワー数11万人を誇るエンジニアコンサルタントとして活躍中。初代ポケモンで最初に選ぶならゼニガメ。でも本当に好きなのはフシギダネ。