カテゴリー別アーカイブ: CSS

Sassを使ってみたよ!


ちょくちょく聞いていたSassちゃん、どうやらCSSを楽に書き出したり出来る便利なコンパイラらしい。
入れ子とかも簡単に出来ちゃうみたいで、Zen-codingさんと一緒に使ったら早くなりそう!(でも覚える事も多そう…)などと思いつつしばらく実験欲を寝かせていましたが、Wordpressのテンプレートいじりに行き詰ってしまったので、息抜きを兼ねて新しい知識を入れようと思い立った記録です。

最初にSassを知ったのはWebクリエイターボックスさんの記事。
環境はMacのようで、記事を見た当時は『便利そうな物があるんだなー』くらいにしか思っていませんでした。

どうやらRubyが必要なようで、主に

  • Windowsには能動的にならない限り入っていない
  • 『コマンドプロンプトなんか怖い!』

の2点が導入を遅らせていた原因でした。

が、実際にテストしてみたら思っていたより全然簡単!
これは次回からしっかり活用したいと思います。

どうでもいいことで躓いてしまったのでメモ。

何はなくともRuby

これが無いと始まらないのでインストールします。

Sassのダウンロードページ(Sass – Syntactically Awesome Stylesheets)にリンクがあるので、そこからインストーラーを利用してインストール。

バージョンについて調べたのだけれど、1.8から1.9への注意点はよく見つかるものの、1.9から2.0への注意点はあまり見当たらなかった、Rubyを他に使う予定もない、ということで最新版(2.0.0)をDL。(2013.07.02現在)
Downloads

ディレクトリの影響とかはわからないので、とりあえず表示されたところにそのままインストール。
バージョンの違いとか調べてる時に『環境変数で引っ掛かる』的な記述を見たので、インストール時にチェック。
sass03

環境変数なんちゃらってphpかなにかでもやった気がする。

インストールが完了したらコマンドプロンプトを起動してコマンドを入力

ruby –version エンター!!

バージョンが確認出来たらRudyのインストールは完了
1.9以前のバージョンを選択した場合、別途gemsをインストールする必要があるようです。
ライブラリ

関係ないけどRubyって宝石のRubyで、gemって宝石って意味で、イメージも宝石っぽくて色々くすぐられるわー///

Sass入れる

さて、Sassちゃん入れます。

gemが入ってるのでコマンドをたたくだけで終了
gem install sass エンター!!

Sass試す

とりあえず下記のようなコードを打ち、拡張子を『.scss』でお好みの場所に保存。

sass02

そいで、コマンドプロンプトに戻ります。
よくわからないので、とりあえずscssがあるディレクトリに移動してからコマンドをたたきました。
sass01-1

ばっちり間違ってます。

その1.記法がわかってない。
まずSassの記法を理解してなかった。
sass02-1
単に字下げだけっていう。

ちゃんと入れ子にしないと駄目。
sass02-4
sass02-2

その2.スペルミス駄目
最初なんで怒られてるのかな?って思ったよね。
sass01-3

ちゃんと入れ子にして、コマンドを吐きだす時のスペルもチェックしてコンパイルしたCSSがこちら↓
sass02-3
ちゃんとどこの子かわかりやすくインデントつきで記述されています。

これはかなり良いかも?
他にも便利な記法が色々あるようなので、これから勉強です。

とりあえずスペルミスなどのケアレスミスに気をつけたいと思います。

——————————-
参考にさせて頂きました。
SassとCompassを使って楽しくCSSコーディング! – Develo.org
効率良くCSSコーディングできるSassを使ってみよう!Mac+Codaなら設定も簡単! | Webクリエイターボックス
コーディングのスピードアップに最適なSassを使ってみた。環境構築から基礎的な記述までを紹介します。 – YATのBLOG
コマンドプロンプトで作業効率UP