ブログの主題と全然関係ないけど、ウェブ制作な人とかイラスト描いてご飯食べてるフリーランスの人には意味の有る内容なのかなーと思ったので簡単にでも書いておくです。

ちなみに、現状で年間20万以上払ってる人が安くなる内容です。
20万って言うと、所得ベースで年間200万ちょい稼いでれば超えてしまう額だと思われますが、住んでいる地域によっても差が大きいので、その辺りはちゃんと調べた方が良いかなーと。

需要が有るのか無いのかも分からず、半分以上は勢いで書いてた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より楽な感じになると思うので、ぜひ利用してみてください！

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