よる接続が確立できません。-vsassのインストールrubyインストールしたのでgemで入れます。Steve)準備おっけ。基本的な流れは、sassファイルを作成し、sassコマンドでcssを出力するだけです。簡単なのでやってみます。*/気付きましたか?sassって変数使えるんですよ!!!これすごくないですか?例えば、こんな依頼があったとするじゃないですか。普通にCSSのred使ってるのでちょっと明るいかもしれませんね。全部さ、`#FF3399`に変えてよ。えっ・・(やべっここだけ別のスタイルシート使ってるの忘れてたー!)これ、sass使ってれば、置換なんてする必要なくて、$red:redを$red:#FF3399にするだけで修正完了ですよ。仕事爆速になりますよね!!ちょっと話脱線しましたが、とにかく世界が変わるって事です。このsassコマンド、色々便利なオプションがあるので紹介しておきますね。sassの便利なオプション--styleオプションで変換方法を変える変換方法は主に4つ。compressedこれから、下のsassファイルをそれぞれのオプションで出力して結果の違いを見てみます。すごく圧縮してくれる方法。*/--watchオプションで自動コンパイルする毎回ファイルを更新する度にコンパイルするのも面倒なので自動化しましょう。style:scss:style:cssこうしておくと、ファイルを更新すると下のように変更を検知して勝手にコンパイルしてくれます。style.css.mapディレクトリ毎に指定ちなみに、特定のディレクトリ配下をずっと監視することも可能です。[ディレクトリ名]の部分を.(ドット)にしておけばカレントディレクトリを監視対象に出来ます。[ディレクトリ名]他のオプションと併用また、先ほどのstyleオプション等他のオプションと一緒に指定することも可能です。普通は、sassディレクトリとcssディレクトリを作って、sassフォルダで作ったファイルをcssディレクトリに出力したいでしょう。sass:css出力ファイル名sassコマンドで、対象のscssファイルと出力するcssのファイル名を指定しなければ、自動的にscssのファイル名で出力されます。hoge.scssファイルを作るとこんな感じで、hoge.cssが出力されます。./hoge.css.mapSass記法とSCSS記法の違いすいません。これまでずっとCSCCで書いてしまっていたんですが、ここで一旦SASS記法も紹介しておきます。ちなみに、そんなに変わらないですが、私はCSSっぽく書けるSCSS記法の方が気に入ってます。.cssじゃあちょっと、ここで同じCSSをSASS記法とSCSS記法で書くとそれぞれどう変わるかを見てみましょう。}どちらも同じCSSが吐き出されているのがわかります。個人的には、癖で波括弧書いたり、セミコロンを書いたりしちゃうので、SCSS記法の方が好きです。さぁ、では基礎がわかった所でいよいよSASSのすごい所を色々と見ていきましょう。変数これはもう何度も出てますが、Sassでは変数が使えます。$blue;}便利ですよね。imgのようにセレクタを指定してました。これ面倒なのは、#mainとaとimgそれぞれにスタイルを当てたい時とか、セレクタをを合計で4つ書かないといけなかったんですよね。Sassを使えばこんな面倒な書き方はしなくて良いのです。同一の名前空間を持つプロパティの場合、この名前空間でネストが可能です。@importを使って別のファイルを読み込めるimportはCSSでも使えました。それをやるには、style.css、main.cssを2つ作って、style.cssでmain.cssをimport。やる必要がありました。これはパフォーマンス的な観点であまりよろしくありません。いうのも、HTTPのリクエストはstyle.cssとmain.cssの2つ分のリクエストが走りますので、リクエストが多くなればなるほど負荷高騰につながりやすいのです。Sassだと何がいいの?っていうと、Sassの場合は別のSassファイルをimportすることになりますので、いくらimportしてようが最終的に出力されるCSSファイルは1つになります。どんだけimportしてようがHTTPのリクエストは1回で済みます。(あまりimportしすぎればその分CSSのファイルが大きくなって負荷が上がってしまうと思いますが・・)実際にやってみます。}ちゃんと読みめてますね。ちなみに、importは、下のようにも書くことが出来ます。mixinを使ってスタイルの使い回しが可能これ、個人的にかなりアツいです。何がアツいって、まず共通で使うようなスタイルを色んな所で使えるという点。引数が渡せるのです!!!やってみましょう。四則演算が・・・できる!!やばくないっすか?よく、ボックスを横並びにする時なんかに、「え〜と・・・3等分だから、1/3で・・33.3333%。4等分だから・・25%か」とかってやってたのが考える必要なくなるんです。制御構文が使える!!!!!制御構文って言うと難しく聞こえますが、単純に条件分岐とか繰り返しですね。ifとかforがcssで使えるって事です。なんかforとかは使いみちがわかるんですが、ifを使う場面がよくわかってないです。@whileの4つは紹介しておきます。9月24日現在、まだSass(SCSS)部分までしか書いてないです。明日までにはLESSの方も追記します。時間が間に合えばもっとこれらのメタ言語を使って高速に開発が可能になるgulpとかについても書いてみます。upLoginユーザーは見つかりませんでした。