でろぐ

でぐちのブログ略して「でろぐ」

トップ > Webまめちしき > 初心者向けSass導入手順

初心者向けSass導入手順

Webまめちしき

今日はちょっと真面目に初心者向けにSassの導入手順を紹介したいと思います。 なぜ初心者向けかというと僕自身が初心者でどうやってやったらいいものかを色々やってみて結構つまずいたので、 これからSassをやってみたいけど腰が引けてるって思ってる人に意外と詰まらなければ簡単に導入まではいけるという事を知ってもらえればと思った為です。 まずSassにする理由というのがMacで制作をしている人であれば意外と簡単に導入できるのでおすすめというのが理由です。 Sassの他にもLessやStylusなどCSSプリプロセッサは他にもありますが今のところ僕はSassのみしか使っていないのでSassを紹介します。 注）今回の導入方法はMacを使っての場合です。

今回の目次 ・Sassを使って何をしたいのかを考えよう ・Sass導入にあたって準備するもの ・Rubyのバージョンを調べてみよう ・Sassをインストール ・Sassファイルをコンパイルしてみよう ・Sassの記法を覚えよう ・便利なツールの紹介

Sassを使って何をしたいのかを考えよう Sassを使って何をしたいのかを考えよう まずは基本的な事ですが自分自身がSassを使って具体的に何をしたいのかを考えましょう。 目的があればそこに向かって進みやすいので具体的な目標を設定すると理解が早まると思います。 僕の場合はまず動かしてみてどういう動作を行っているのかを体感するという事が目的でした。 デザイナーというよりはディレクター目線でクライアントさんとお話しした事をコーダーさんに伝える時に仕組みが分かっていないと話ができないと思ったからです。 で、実際に動かしてみて実務レベルで自分の仕事内容にどこまで組み込む事ができるのかを考えるというのを2番目の目標として設定しました。

Sass導入にあたって準備するもの ターミナルに負けないで！ Sassを使用するにはまず以下の準備が必要です。 ・Rubyの使える環境か確認して最新版にアップデートする ・Sassをインストール 基本的にはこの2つがあれば大丈夫です。 ただし問題があってこの2つを実行する為にはいわゆる黒い画面（Macではターミナル）を使う必要があります。 黒い画面になじみのないデザイナーさんとかだとまずここでめんどくさい感じになると思います。 実際僕も黒い画面開かなあかんのかとめんどくさくなりました。 実際触ってみると上記の事をするくらいのレベルであればHTMLやCSSに慣れてる人ならどうってことないくらいの事なんですが先入観とは怖いもので非常にめんどくささを感じます。 ただ、ここの苦手意識があると今後大変になってくるのでまずは苦手でもやってみるという風にしましょう。 僕も実際に触る事で苦手意識は少なくなりました。

Rubyのバージョンを調べてみよう 知らぬ間にいたRubyちゃん では実際に黒い画面で色々行っていきましょう。 まずは自分のマシンにRubyの環境があるのかを確認します。 確認するにはターミナルを開いて以下を入力して力一杯Enterをクリックしましょう。

ruby -v

Macにはデフォルトで入っているようなので入っていない事はないはずです。 ここでRubyのバージョンが表示されたら成功です。 次にバージョンアップをしてみましょう。 入力するのは以下です。

sudo gem update --system

成功すると何やらこちょこちょ動いてインストールが行われている事が実感できます。 失敗したらErorがでるのですぐ分かります。

Sassをインストール 今回の記事は実はこの画像を使いたかっただけというのは内緒の話 Rubyの準備ができたら次はいよいよSassをインストールします。 Sassのインストールはまたしてもターミナルを開いて以下を入力して全身の力を込めてEnterをクリックしましょう。

sudo gem install haml

続いて以下を入力して魂の叫びを感じながらEnterをクリックしましょう。

sudo gem install sass

これでインストールは完了です。 やってみると意外に簡単にインストールが完了してあっけにとられます。 パッケージのソフトとかをインストールする感覚だと色々やるので実感はあるのですが、簡単すぎて本当にインストールできているのか実感がないくらいです。 でもErorがでてなければ成功しているのでご安心。

Sassファイルをコンパイルしてみよう コンパイル？ちがう、パブリッシュやそれは！ 無事インストールが完了したものの実際に動くのかはまだ不安だと思います。 僕も最初この時点でまだ半信半疑でした。ほんまに動くんかいなと。 そこでコンパイルしてcssを生成してみましょう。 とその前に見慣れない言葉コンパイルがでてきました。 デザイナーだとわかりにくい言葉ですね。何より聞き慣れない言葉です。 要はscssファイルからcssファイルを生成するんです。 Flashを使った人だとパブリッシュするのと同じ意味合いですのでイメージしやすいと思います。 Flashの場合がflaファイルをパブリッシュしてswfファイルを生成する Sassの場合がscssファイルをコンパイルしてcssファイルを生成する という感じです。やっぱり並べて書くと分かりやすいですね。

コンパイルをするのはこれまたターミナルを開いて以下のよう入力してry

sass test/test.scss test/test.css

今回の場合はユーザーディレクトリ直下にtest/test.scssファイルを作っておき、test/test.cssファイルを作るという場合です。 実際にファイルが生成されるとかなり実感がわきます！やったよ！Sass使えたよ！って僕もめっちゃテンションあがりました。

Sassの記法を覚えよう 覚える事がたくさん！でもがんばらないとね！ 実際に動く事が確認できたら次はどんな事ができるのかをとりあえずやってみるといいと思います。 僕の場合はtest.scssに以下のような記述でコンパイルしてみてこれは便利って実感しました。

// ベースフォント $base_font: "メイリオ", "Meiryo", verdana, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", Sans-Serif;

// カラー $main_color: #333; $sub_color: #000;

body { color: $main_color; font-family: $base_font; }

main {

a:link {
    color: $main_color;
}
a:hover {
    color: $sub_color;
}
h1{ margin-bottom: 20px }
p{ font-size:90% }
#test{ margin-bottom: 20px }

}

p{ color: $main_color }

どういう風に展開されたかは実際にコンパルしてみてご確認ください。

便利なツールの紹介 今回の記事で実はry 記法も覚えて効率アップした！って喜んでたんですが1点面倒だなと思った事があります。 それはコンパイルをCSSの変更が行われるたびにするめんどくささです。 毎回コンパイルの為にターミナル開いて入力するのは激しくめんどくさいですよね。 そこでその機能を行ってくれる神のようなツールがあります。 そのツールがLiveReloadです。 850円の有料アプリですがこのアプリは絶対に買いだと個人的に思います。 インストールして起動すると監視を行うディレクトリを設定する画面が出てきますので設定しましょう。 その際にオプションでCompile SASS,LESS,...ってのがあるのでそれにチェックを入れます。 するとその対象ディレクトリ下で変更のあったファイルを自動的にリロード＆コンパイルしてくれるという訳です。 ここで1点注目です。 リロードすると書いてますよね。そうなんです、自動でリロードしてくれるんです！

大事なところなので2度言います。 自動でリロードしてくれるんです！

このアプリの素晴らしいところは自動でコンパイルだけではなくてその他のファイル（htmlやjsなど）の変更があった場合などもブラウザで自動的にリロードしてくれるんです。 これまでの制作手順でファイルの変更後を考えると ファイルの変更→保存→ブラウザを選択→リロードする→確認→ファイルの変更 という手順だったと思います。僕の場合はそうでした。それがブラウザには常に修正しているファイルを開きっぱなしにするという前提付きで ファイルの変更→保存→確認→ファイルの変更 という手順に改善されます。作業変更後すぐに開いているブラウザを見ると先ほど自分が行った修正内容が即座に反映されているという素晴らしさ！！

ブラウザを選択→リロードするという手順が省略化された事によって業務効率の改善、作業スピードの上昇、時間コストのパフォーマンスアップ、処理案件数の増大、集中力の維持（リロードしたついでにソーシャル見たりして集中力切れちゃいますよねw）など様々なメリットが考えられます。

これは今回の記事とは関係ないかもしれないですがsassを導入する事でより作業効率が上がっていくという前提を考えると副次的に作業効率が上がるこのアプリを使わない手はないと思います。 実際僕もSassを本格導入するより先にこっちのアプリで手短な作業効率の改善を行ったところかなり作業効率と集中力の維持にいい効果を出してくれています。

ちょっとアツくなってしまって嬉しくて書きすぎたので本題からそれましたがSassは実際に導入するかどうかは後から考えるとしてまずはやってみて動く部分を体感する事をおすすめします。 これまで思ってた黒い画面への抵抗感が少しでもなくなりますし、新しいジャンルにチャレンジする事で今まで見えてこなかった発想にもつながるのではないでしょうか。 実際に僕もやってみてWebをはじめた頃にHTMLを書いてそれがブラウザに表示されたときのような懐かしくも新鮮な感じになりました。 という事でこのブログ記事を読んで少しでも多くの人がSassをとりあえずやってみたよと言ってくれたら幸せです。