Sassを覚えよう

Sassの教科書で一番読んで欲しいところ。

書店に置いてあった、Sassの教科書

いよいよ明日発売の「Web制作者のためのSassの教科書」ですが、今回は、8章有る中でも特に読んでもらいたい章に関して、書きたいなーと思います。

今回の執筆はわりと気合い入ってるので、宣伝エントリーが多くてすみません><

ちなみに、今日いくつかの書店をまわったら、既に置いてあったので仕事帰りなどに書店に寄ってもらえれば既に購入できると思います。

さて、本題に。

「Web制作者のためのSassの教科書」が出来るまで

実際の書籍のカバー

明後日(2013年9月13日)、「Web制作者のためのSassの教科書 これからのWebデザインの現場で必須のCSSメタ言語」が発売します。
書籍には、初版発行が2013年9月11日になってるので、もしかすると書店によっては置いてあるかも?

今回はちょっと、書籍が形になるまでの事でも書こうかなと。

本の内容に関しては、一緒に書いたSOUさんの「2013年9月13日発売の「Web制作者のためのSassの教科書」を執筆させていただきました。 | Sou-Lablog」でも紹介されてます。
また、サポートサイトもまだ一部調整しないといけない部分も有りますが、一応正式に公開と言うことで。

サポートサイトは、書籍を購入した人はもちろんですが、試し読み用のPDFや、書籍内で掲載されているソースコードの一覧などが有りますので、気になってる方はチェックしてみて下さい。

では、そろそろ本題に。

2013年9月13日発売予定の「Web制作者のためのSassの教科書」を執筆しました

Web制作者のためのSassの教科書の表紙

インプレスジャパンから、9月13日に「Web制作者のためのSassの教科書」が発売します。

キッカケは、2012年の1月頃に書いていた、Sassを覚えよう!で、それをインプレスジャパンの編集の方が読んで気に入って頂いたらしく「Sassの執筆をしませんか?」というお話を頂きました。

お話を頂いた当時は、「Sassの書籍って売れないんじゃ?本にするほどでは...」って感じであまりノリ気では無かったり、執筆を始めると主業務もこなしつつになるので、忙しくなるなーと思ってお断りしようとかも考えてました。
そう思っては居たけれど、一度打ち合わせをしたら書くこと前提になってた風味で、気付けば執筆をすることに><

今回、執筆のお話を頂いて書くことが決まってから、1人でやり切れる自信も無かったので、Sou-Lablogとか書いてる、SOUさんを誘って、共著でSassの本を書くことになりました。

書き始めたら、ずいぶんモチベーションも上がってきて、少しでも役に立てる本を!と言う思いから、気付いたら400ページを越えるボリュームに。
さすがに400ページ越えは多すぎるので、最終的に352ページまで記事をカットしたりして調整しました。記事をカットするのがここまで大変だとは...!

まぁ、そんなこんなで、先日無事に入稿されたので後は発売を待つばかりです。

価格は、2,940円(税込)。
352ページ、フルカラーでこの値段は結構お買い得だと思います。

既にAmazonでは予約が開始されてますので、良ければ予約したって下さい!

ちなみに、書籍と同時発売かは分かりませんが、電子書籍版(Kindle版や楽天Koboとか)も出るみたいです。
電子書籍版の方は、ちょっと安くなってて 2,500円 で購入できるっぽいです。

Windows対応のSassとかのフリーのコンパイラ

気付いたら、三ヶ月更新なし・・・(;´Д`)
最近は、Sassの勉強をやり直したりなんやかんやと過ごしてたり、ねこブログなんぞ始めたりしてました。
良ければ見てください!><

NekoNeko Cube
ねこねこキューブ ~ スコティッシュフォールド『アル&イブ』の今日この頃。

さて、今回はSassをコンパイルしてくれるGUIツールをちょっとご紹介。

以前、Scoutってのを紹介しましたが、こちらは最近更新がされてないってのも有りまして、Windowsで使い勝手良い他のコンパイラを紹介出来ればと。
Windowsで使えるってのが大事です。ボクはWindowsな人なので。

【Sassを覚えよう!】もくじ的なのと参考リンク

需要が有るのか無いのかも分からず、半分以上は勢いで書いてた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】黒い画面での実際の運用に関して
  7. 【Sassを覚えよう!Vol.7】ファイルを分割して管理を楽に(partialについて)
  8. 【Sassを覚えよう!Vol.8】ネストをもうちょい使いこなす
  9. 【Sassを覚えよう!Vol.9】変数と演算で効率的に
  10. 【Sassを覚えよう!Vol.10】mixin とか色々活用してスマホ案件で楽をする
  11. 【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1

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

【Sass】新規でサイトを作るのに使えそうなの一式。Ver 1

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

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

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

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

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

【Sassを覚えよう!Vol.10】mixin とか色々活用してスマホ案件で楽をする

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

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

・・・はい、後者です。

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

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

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

【Sassを覚えよう!Vol.9】変数と演算で効率的に

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

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

【Sassを覚えよう!Vol.7】ファイルを分割して管理を楽に(partialについて)

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

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

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

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

このページの上部へ

↑上に行くよ