需要が有るのか無いのかも分からず、半分以上は勢いで書いてたSassを覚えようシリーズですが、少しでも利用する人が増えるきっかけになれば幸いです。

カテゴリ一覧から全部見れますけど、一応【Sassを覚えよう！】の全記事一覧です。

1. 【Sassを覚えよう！Vol.1】はじめに
2. 【Sassを覚えよう！Vol.2】何がすごいの？プログラムが出来なくても使える？効率がホントに上がるの？
3. 【Sassを覚えよう！Vol.3】一番カンタンな環境構築（Scout編）
4. 【Sassを覚えよう！Vol.4】Sassの基本的な記述方法
5. 【Sassを覚えよう！Vol.5】環境構築（黒い画面編）
6. 【Sassを覚えよう！Vol.6】黒い画面での実際の運用に関して
   • 【Sassを覚えよう！Vol.6.5】バッチファイルを使ってカンタンに黒い画面でSassを利用する
7. 【Sassを覚えよう！Vol.7】ファイルを分割して管理を楽に（partialについて）
8. 【Sassを覚えよう！Vol.8】ネストをもうちょい使いこなす
9. 【Sassを覚えよう！Vol.9】変数と演算で効率的に
10. 【Sassを覚えよう！Vol.10】mixin とか色々活用してスマホ案件で楽をする
11. 【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1

新規セットのは、ちょっと遊び心で動画とか使ってるんで、実際の動きがちょこっとでも感じられるので、観てもらうとグッと興味が出るかも！？

シリーズっぽくやってたSassを覚えようですが、今回は今までご紹介したSassに関する知識が有れば、直ぐにでも使えそうな一式をご用意しました。

まぁ、HTMLとかは過去の新規でサイトを作るのに使えそうなの一式。とそんなに変わってないので、SCSSファイルだけ有れば良いと思いますがHTMLとかあった方が確認もそのまま出来るので良いかなーと。

• 【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1をDL（zip：約50kb）
• 実際のページを見る

ページを見ても、あんまり意味が無いっすね。えぇ。

いつもの新規セットに比べると、ボク自身がSassはまだ全然使いこなせて無いですし、開発中と言うかベータな感じが否めないので、コレをベースにSassを色々試したりするのに良いかなと思います。
なので、一つの参考までにって感じでしょうか。

んでは、続きにて中身の説明なんぞをしていきます。

気付けば、Vol.10！
ずいぶん長編になってまいりました。

何気に、既に去年1年分のエントリー数を超えてるだなんて！
今年が頑張ってるのか去年がひどすぎたのかは、ボクには分かりません。

・・・はい、後者です。

さてさて、Vol.4のSassの基本的な記述方法で書いた「ミックスイン」に関して、もうちょい書いてみたいと思いますが、ミックスインは奥が深くてこれから触れる内容も、触り程度って感じだと思いますが、それでも、タイトルに有るように、スマホ案件なんかではかなり活躍しちゃいます！

ミックスインついでに、@if 、@each 辺りもカンタンにですが触れていきます。
ここまで来ればだいぶSassを使いこなしてる様な気がしますよ！たぶん。

や、日本初の Sass エヴァンジェリストである @kotarok さんみたいな超上級者な方々からしたら、鼻をほじほじしながら ( ´_ゝ｀)フーン 程度なんでしょうけど！

ちゃっかりデザインを変更しました。
デザイン以外にも、メインエリアの横幅が変わったりしてます。
かなり突貫工事なので、色々アレな部分があるかと思いますが、、、

さて、Vol.4のSassの基本的な記述方法で書いた「変数」と「演算」に関して、もうちょい突っ込んだ部分を書いていこうかと思っちょります。

Vol.4のSassの基本的な記述方法で書いた「ルールのネスト」ですが、もうちょっと詳しい使い方なんぞを書こうかなと思ってる次第です。

ちょっと間が開いてしまいましたが、今回はSCSSファイルの分割に関してです。

通常のCSSの場合は、分割した複数のファイルを読み込み用の「import.css」みたいなファイルを用意して管理することが多いかと思います。
もしくは、head要素内に各CSSファイルを読み込んだりしますよね。
ただ、これだと分割するファイルが多くなればなるほど、読み込むごとにHTTPリクエストとその読み込みがブラウザで行われるため、Webサイトの読み込みが遅くなってしまうって問題があります。
まぁ体感速度的にどの程度影響があるかはアレですが。

それでも、CSSファイルを1つにすることで、ちょっとでも表示が早くなるかも知れないならやって損は無い訳ですが、それで管理面で問題が生じてしまうのも困ったちゃんなので、分割するCSSは必要最低限にしていることが多いかと思います。

そう言った問題も、Sassなら分割したSCSSファイルを一つのCSSファイルとして吐き出してくれるので解決します。

前回の記事を書いたら、バッチファイルを使えばもっと楽ですよ！と言うのをTwitterで@grfxdsgnさんから教わりました。

バッチファイルとか全くわかってなかったんですが、軽く調べたり教わったりしてたらボクが理想とする感じの運営が出来そうだったので、当初は予定してなかったエントリーですが、これで黒い画面からの利用がScoutより楽な感じになると思うので、ぜひ利用してみてください！

こうやって記事を公開することで、反応があってよりステキな方法に巡り合えるって良いですね。
久々に、ブログを書くことの面白さの一つを思い出したような気がしないでも無いです。

ボクがSassを覚えるにあたって一番のネックだった部分がこれから書く内容なんですが、黒い画面でSassが動作する所までは進んでも、これから実際に案件ベースで使っていくにはどうしたら良いかって部分。

と言うより、黒い画面を起動して都度手打ちしてウンタラカンタラみたいなのは、正直面倒過ぎて実用的じゃないな、と思ってた部分がとても大きいです。
黒い画面に関する知識も殆ど無いので、何かよく分かんないなーって感じでした。

実際問題として、RubyとSassのインストールだけなら、ちょっと気になってる分かりそうな人（あ、ボクでもいいんですけどね）に、『分かんないから教えて(・∀・)！』って言ってみれば、モンクを言いつつもやってくれると思いますよ。えぇ。
あ、ヤローは自分でやりましょうね。

軽く話が反れましたが、そろそろ本題に。

いよいよ、、、
黒い画面（コマンド プロンプト）の登場です。
...待って！逃げちゃダメだ！！

ここでは、、、
Rubyのインストールもしなければなりません。
...だから待って！逃げちゃダメだ！！逃げちゃダメだ！！

Rubyやら黒い画面とかは、ボクもそうですが、馴染みのない人にとっては意味不明過ぎるかと思いますが、思ったよりカンタンに使うことが出来ます。
これを乗り越えれば、黒い画面も可愛く見えるかも知れません。

ちなみに、Macの方がインストールが楽だと色んな所で書かれてますが、ボクがMacにインストールした感じ、見事にハマってMacの方が大変じゃないか！と思ったのはナイショです。

• 参考：CSS拡張メタ言語「Sass」フレームワークをインストール（Mac）/ - サイブリッジラボ

こんな感じでハマってしまう可能性が有るんですよ、奥さん。

前回のエントリーで、無事にSassが動作する環境が整ったかと思います。
今回は、いよいよ通常のCSSでは出来なかったSassの記述（Sass記法）に関してです！
まずは基本って感じですが、これだけでも十分Sassを利用することでコーディングの効率が上がる！って思ってもらえれば幸いです＞＜

記法の前に

Sass記法の前に、SassはCSSの「完全な上位互換」と言えるので、CSSのルールはすべてそのまま利用することが出来ます。
その為、cssファイルをそのまま拡張子だけ .scssに変更して変換（コンパイル）し直すみたいな事も可能です。（圧縮できる程度のメリットしか有りませんが）

軽く余談ですが、このCSSとの完全な互換性が従来のSassには無かったのですが、現行のバージョンではそれが出来るので、余計な事を覚える必要がなく、Sassの機能を今までのCSSの知識にプラスアルファとして使えるんです。
これに寄ってハードルが下がり、学習コストも最低限で済むので非常に意味の有る事かなーと。

ただ、一部のCSSハックに関しては変換した際にエラーになってしまうので、その場合は別の方法で書く必要があります。
細かい部分まで把握できていませんが、引っかかる可能性が高いハックとしては次のような「/」を使ったIE6/7用のハックを使うとエラーになります。

.item {
	/zoom: 1;
}

「/」が使えないので、この場合は「*」にすれば問題有りません。

.item {
	*zoom: 1;
}

いきなりちょっと不便っぽい部分が出てきましたが、Sassの素敵なトコの1つとしてエラーがちゃんと表示されることです。
その為、ScoutのLogを見ると下記のように表示されます。

>>> Change detected to: style.scss
error style.scss (Line 12: Invalid CSS after ".item {": expected "}", was "/zoom: 1;")
overwrite style.css 

英語が出来なくても『style.scss の12行目でエラーが出てる！何か /zoom: 1; がInvalidなCSSっぽい！』って感じで分かるので、変にハマって時間を取られません。

「/」以外にも単純な文法違反でもちゃんとエラーが返ります。
例えば、、、

.item {
	width: 350px;
}s

何か、} の後に s が残ってる！！！（きっと、Ctrl+SしたつもりでCtrlが押せてなかったんですね）とかでもちゃんとエラーになるので、ケアレスミスが原因で時間を取られてしまう事が減ると思います。
記事書いてて思いましたけど、これって結構ステキですね。

互換性の話だったのに、気付けばエラー処理の話になってしまいましたが、こんな感じで今のCSS知識はそのまま使うことが出来ます。

さてさて、3回目のエントリーからは、実際に手を動かして行きますよっと。

何はともあれ、Sassが使えるようにしないといけないので、この記事では環境構築に関して書いてきます。

まずは黒い画面は一切使わずにGUIで操作が出来るScoutと言うAIRアプリでSassを動作させる方法をご説明します。
恐らく、現状ではコレが一番カンタンな方法だと思うので、取っ掛かりとしてはとても良いかなーと思います。

ちなみに、Scoutのインストールに関しては、まーしーさんの記事も分かりやすいかと思うのでそちらも参照して下さい。

• Compass / Sass の導入が簡単にできる Scout を試してみた｜linker journal｜linker

何かタイトルが適当だけど、無事に2回目のエントリーです！
このエントリーは、もうちょっとSassに興味を持ってもらうためのエントリーなので、早く試したい人は次のエントリーに行っちゃって下さい！

Sassがスゴイとは言っても、プログラムが出来ないと効果があんまり出ないんじゃ？とか学習コストが高い気がするとか、黒い画面が怖いとか、面倒な気がするとか、なんか色々有るかと思うので、このエントリーではSassを利用するにあたっての疑問点や不安などを出来るだけ解決出来ればと思ってます。

まず最初に言っておきたいのは、JSやPHPとかプログラムが一切出来なくても、普通に(X)HTML + CSS でのコーディングが出来てる人ならほぼ確実にコーディングスピードが上がるって事です。
ただ、このブログのターゲットからすると、CSS自体がまだまだ勉強中って人も多いかも知れませんが、あまりにもトリッキーなデザインや仕様じゃなければデザインデータからスライスして取り敢えずコーディングが出来るなら、効率は上がるので試してみる価値は有ります。

と言うことで、FAQみたいなノリでなんか色々書いていきます。
他にも自分はこんな事が不安だとか分からないって点を教えてもらえると、ここに追記出来るので嬉しいです。

謹賀新年。
更新率が落ちて久しい当ブログですが、細々とまだ書いていければと思っていますので、本年もよろしくお願いします。

さて、Sass とか LESS って聞いたこと有ります？
なんか、CSSをクールに書けるとかすげーって叫んでる人がいる感じのアレです。

ボクも、2010年の終わり頃に@hamashun さんにご協力頂いてRubyのインストールをしたりして、Sassをちょこっと試してました。

なのにその直後くらいにPCがお亡くなりになったりしたのも有り、復旧に必死だったり仕事が忙しくなり（言い訳）そのまま特に音沙汰無く過ごしていたのですが、最近になってやっと覚えてきたので、CSSビギナー向けエントリーみたいなノリでこれから始める人向けに書ければと思ってます。