1. とにかくSassは覚えとくとcssで書くよりもいいらしい

1.1 やっと重い腰をあげたものの。。。

皆さん前々からSassやらLessの存在には気づいていて、見て見ぬ振りをしてたんじゃないですか?

かくいう私がそうでした。ちょっとやってみたもののよくわからず、時間の性にしてほっておいたら数年がたってました。。

で、いい加減重い腰をあげ覚えてみようと思ったんですが…..

ググってもなんだか専門用語が既に色々わかりません。ウェブをやってる人間としては致命的ですね。
でもわかんない。もっとわかりやすく簡潔に説明して!!

ということで今回の記事を書くことにしました。

 

1.2 Sassのいいところは、結局ここ!

Sassはcssのすごいやつ。つまりスーパーcssってこと。単純な書き方のcssをちょっと利口にしてプログラム的要素を取り入れたものってことです。何度も似たようなcssを書く手間も省けてコスパもいいんです。


#main {
 .site {
 margin: 0 0 15px;
 .site-title {
 font-size:26px;
 font-weight: bold;
line-height:38px;
 }
 }
 .content {
 border: 3px solid #ddd;
padding:10px;
 }
}

コードの親要素/子要素を明確にして見た目もすっごいわかりやすいですね。

 

2. Sassを使えるようにしよう!

ということで、早速Sassを触ってみようと思うのですが、動作環境を整えなきゃみたいです。

 

2.1 Rubyをインストール

でました「Ruby」。なんですかそれは…という方はこちらをご参考にどうぞ。

Rubyとは | TECHSCORE(テックスコア)

sassをインストールする上で必要な言語のようです。

Macユーザーは標準で入ってるようなので、省略しましょう。

Windowsユーザーは、RubyInstallerからダウンロードをしてインストールしちゃいましょう。

インストール時、「Rubyの実行ファイルへ環境PATHを設定する」にチェックを忘れずに。

 

3. Sassをインストール

Macの場合

  1. アプリ→ユーティリティフォルダ→ターミナルを起動します。
  2. 「sudo gem install sass」と入力してreturn
  3. Mac OSのユーザーパスワードを入力してreturn
  4. しばし待つ
  5. インストール完了!

Windowsの場合

  1. スタート→アクセサリ → コマンドプロンプトを起動
  2. 「gem install sass」と入力してEnter
  3. しばし待つ
  4. インストール完了!

4.  GUIソフトをダウンロード

自分が使用しているのはAdobeにて提供されている、ScoutというGUIソフト。

Scout_-_Compass_and_Sass_without_all_the_hassle

http://mhs.github.io/scout-app/

こちらのソフトを使えば、先に説明したターミナルでSassをインストールとか面倒な作業をしなくても簡単にSassのコンパイルができるようになっちゃうってすぐれもの。

Sassを検索するとよく出てくるCompassってものも提供されているので、ようはこいつをインストールしちゃえばいいわけですね。

まぁ色々機能はなくてお粗末ですが、とりあえずSassを理解したいって人にはいいんじゃないですかね。

詳細の使い方はweb帳を参照してください。

 

その他にもLIGさんなんかでおすすめしているのはCodeKitっていうGUIソフト。

CodeKit__THE_Mac_App_For_Web_Developers

http://incident57.com/codekit/

有料のGUIソフトですが、Sass以外にも多くの言語をコンパイルできたり独自の優れた機能を持っていて使いこなせばかなりいい!!買う価値はあるんじゃないですかね。

 

まとめ

Sassは複雑になるであろうCSSをプログラム化してより効率的に編集管理ができるようにしてくれる言語です。スーパーCSSってな感じ。

そしてそのSassを実際のHTMLなどに読み込ませるCSSファイルにするために必要なのすが、GUIソフトというコンパイルするもの。

簡単なサイトではそこまで使用しなくてもとは思いましたが、そこそこボリュームがあるサイトなんかには非常に有効ですね。