インプレスさんから、
「Web制作者のためのSassの教科書 改訂3版 Webデザインの現場で必須のCSSプリプロセッサ」
が、本日2024年12月11日に発売されました。タイトル通りピンクのSass本の改訂版で、今回ももちろん Latele 平澤隆さんと共著です。

前回の記事が改訂2版の紹介だったので、7年ぶりの記事更新となってしまいました。

7年ぶりに大幅刷新です

本書の内容

本書概要より

CSSをより便利に効率的に書ける「Sass（サス）」の定番解説書を、最新のコーディング環境にあわせて7年ぶりに大幅刷新！
Sassは導入が面倒そう。はじめたいけどあと一歩が踏み出せない。CSSを今よりも効率的に書きたい。こうした方がSassを導入するきっかけとなり、ひと通りSassの機能を使いこなせるようになるのが本書の目標です。
CSSをHTMLの構造に合わせて入れ子で書いていく「ネスト」や、便利な「変数」や「演算」などのSassの基本機能はもちろん、筆者がプロの現場で実際に使っている実践的なテクニックまで、この一冊で網羅しています。

前回改訂2版発売からなんと7年、再び改訂版のお話をいただきました。
Sass は Dart Sass となり、モジュール化や @import を削除予定など少し複雑となり、改訂の声をいただいていたとのことでした。ありがたいことです。

改訂2版との違い

帯にも書かれているのですが、主に以下の内容をアップデートしています。

• ［Dart Sass］に完全対応
• ［VS Codeの拡張機能やnpm-scripts］を使ったコンパイル方法
• Sass独自のインポート方法［@use］と［@forword］の使い方
• 大きく変わった［関数の使い方］と［全関数解説］
• ［AIを活用した効率化］のアイデア など

2版から7年経ち Sass を取りまく環境は色々と変わりました。
Dart Sass になり Sass そのものの書き方も大きく変わり、コンパイル方法も gulp を使う方も少数派となったでしょう。
そして、Sass の主要な機能である変数やネストなどはネイティブ CSS でも使えるようになりました。
しかし、まだまだ Sass には CSS にはない様々な強力な機能があり、まだSassの方が優位性があるように思えます。

CSS の進化のスピードも凄いので Sass から CSS に切り離す色の関数のアップデートなども執筆中にあり、書き直すこともありました。

このあたりの苦労した点は共著者の平澤さんも記事を書かれておりますので、是非見て欲しいです。

Web制作者のためのSassの教科書 改訂3版を執筆しました。 – Latele Blog
https://blog.latele.co.jp/front-end/2024/1107_10

初めてSassを使う方も、Sassをすでに利用してる方も、2版からアップデートしたい方も読める内容を意識しました。

読んでいただけると嬉しいです。

謝辞

平澤さんとは公私ともに仲良くさせてもらっているので、今回も楽しく書くことができました。ものすごい精緻なフィードバックに助けられました。
また、インプレスジャパン柳沼さん、リブロワークス大津さん、関係者の皆様に改めてお礼申し上げます。ありがとうございました。

書籍版とKindle版同時発売です。
よろしくお願いします！

関連リンク

• Web制作者のためのSassの教科書 改訂3版　Webデザインの現場で必須のCSSプリプロセッサ – インプレスブックス
• Web制作者のためのSassの教科書 改訂3版を執筆しました。 – Latele Blog

インプレスさんから、
「Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ」
が2017年9月15日に発売されました。タイトル通りピンクのSass本の改訂版で、前回と同じくの平澤隆さんと共著です。

本書の内容

初版発売から4年、ありがたいことに改訂版のお話をいただきました。
この4年でSassは市民権を得たので、初めてSassを知りたい方も、Sassをすでに利用してる方も、また初版を読んでいる方も読める内容を意識しました。

初版との違い

初版からアップデートされたSassの機能は完全網羅しています。新しい関数や、当時無かった@rootなど。現場で使える具体的な使い方なども5章で解説しています。

また、Sassの環境が大きく変わりましたので2章は全て書き直しました。
初版はRubyでコマンドラインで解説していましたが、改訂版はNode.jsとLibSass(node-sass) を使い、コンパイルにはgulpを使っています。
gulpの導入から解説しておりますので gulp を覚えたい方もオススメです。

あと、Sass + PostCSSでよりSassを便利にする方法も書きました。これは改訂版では開発が終了したCompassの章を全面カットしたので、PostCSSで近い機能を補うためと、SassとPostCSSは同時に使うことも出来るということが書きたかったからです。

各章の詳しい違いをサポートサイトに書いてありますので、こちらも是非ご覧いただきたいです。

http://book2.scss.jp/about/diff.html

サポート

今回もサポートサイトを用意しました。本書紹介のURLや、ソースコードなどを掲載しています。
また、正誤情報やSassの更新情報なども載せてゆく予定です。

各章から良い感じにピックアップした「試し読み用PDF」もダウンロードできますので、チラ見してみてください。

http://book2.scss.jp/

あとがきとか

サポートサイトにも書いてますが、最初はちょっと書き直せばいいかなと思ってましたが、実際は全編見直して、ほとんど書き直しや手直しを行いました。わかりやすく、そして現場で使える内容になったのではと思っています。

謝辞

ひらさんとは公私で仲良くさせてもらっているので、今回も楽しく書くことができました。
また、インプレスジャパン柳沼さん、リブロワークス大津さん、妻や弊社メンバー、関係者の皆様に改めてお礼申し上げます。ありがとうございました。

書籍版とKindle版同時発売です。よろしくお願いします！

関連リンク

• Web制作者のためのSassの教科書 改訂2版 – 公式サポートサイト
• Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ – インプレスブックス

2016年9月24日に開催された CSS Nite LP47 「Coder’s High 2016」に出演させていただきました。
「イマドキのコーダー環境構築」ということで、よりコーディングを快適にする環境についてのお話です。

Corder’s High 2016

http://cssnite.jp/lp/lp47/

概要として、

今回は、「4年前の自分に届けたい。イマドキのコーディングはこうなっているんです」という切り口で「変化への差分」に関してお話ください、というオーダーのもと、大きなテーマを設けず、幕の内的なセッション構成でお送りします。

ということで、怒涛の9セッション。豪華な面々でした。
自分以外のセッションはめっちゃ勉強になりました。

ツッコミ役の方々がツイートでも色々補足してくださっているので、twitter見返すと面白いです。

http://togetter.com/li/1028408

セッションについて

「イマドキのコーダー環境構築」というタイトルで、4年前 ⇒ 前回出演させていただいたSassの会 ⇒ 今に至るまでの環境の変化と、現在のコーディング環境のベストプラクティス(仮)について、ほどよく良い意味で枯れたものを紹介しました。
はい、Sass と PostCSS と gulp と Node.js です。

冒頭から「Compassはオワコン」てきなことを言ってしまい、「オワコンパス」という言葉が出来てしまいました／(^o^)＼

スライド

今回はスライドの早期公開がOK（いつもは90日後）ということで一ヶ月くらい経ったので公開します。
はてなブックマークもたくさんブックマークされて嬉しい！

スライドのリンクにジャンプしたい場合は、SlideShareの文字起こしからお願いします。

謝辞

ご来場・フォローアップでご参加の皆様ありがとうございました。
鷹野さん、いずいずさん、スタッフの皆様、出演・ツッコミ役の方々、本当にお疲れ様でした。
貴重な機会をありがとうございました。

追記 (2017.3.3)

おかげさまで、当記事のセッションが CSS NITE ベストセッション2016 で、ベスト10セッションに選ばれました。
ありがとうございます。

http://cssnite.jp/archives/best-session2016.html

あわせて読みたい

• コーダー白書2016
• モダン日本語フォント指定
• 「Good bye ~~ floats and “clearfix” hacks」これからはFlexboxの時代
• Enduring CSS – by Takazudo
• フロントエンドからのテクニカルディレクション

他のセッションのスライドわかり次第追加していきます。

2016年9月17日に開催された WordCamp Tokyo 2016 セッションデイ テクニカルトラックにアクセシビリティのセッションで出演させていただきました。

WordCamp Tokyo 2016 のセッション部長の斎木さんにお声掛けいただきまして、アクセシビリティサポーターのとぼさんと一緒に出演させていただきました。

Blogを書くまでがWordCamp。やっと書いた。。

セッション内容

このような内容でお話しさせていただきました（紹介ページ）。

タイトル：「WordPressでも意識したいアクセシビリティ 〜「優しいウェブサイト」作りをはじめよう〜」

そもそもウェブアクセシビリティとはなんでしょうか？障害者の方だけのものだと思っていませんか？

今年3月には日本工業規格「JIS X 8341-3:2016」が改正され、4月には障害者差別解消法が施行されました。ウェブアクセシビリティを考えることは社会からのニーズに応える上でもますます必要となってきています。

本セッションでは、「JIS X 8341-3:2016」やガイドライン「WCAG 2.0」を参考に、ウェブアクセシビリティの概要について触れながら、WordPressで今すぐ出来るアクセシビリティの改善案を紹介していきます。

この概要に沿った「障害者差別解消法」や「JIS X 8341-3:2016」などの説明をとぼさんが前半として担当、
私はそれをWordPressで使うには、という後半を担当しました。

満席だったようです。ありがとうございます。

初めて二人セッションをしたのですが、楽しかったです。楽しいし心強い。
立ち位置的に仕様など難しいところをとぼさんが受け持ってくれたので、私は気楽に色々話せました。
その分、とぼさんは大変だったと思います。。ありがとうございます＆お疲れ様でした。またやりましょう。

スライド

見た目担保のSpeakerDeck版と、リンクが効くSlideshare版どちらも置いておきます。

SpeakerDeck

発表時のものです。

SlideShare

スライドのリンクにジャンプしたい場合は、こちらでご覧ください。（その為にフォントを変更してます）
文字起こしはリンク元 SlideShare のページに表示されています。

http://www.slideshare.net/sou_lab/wordcamptokyo2016/

謝辞

今年も WordCamp はとても盛り上がっていました。まだまだ世界一のCMSの座は揺るがない人気と勢いを感じれました。

実行委員長の文樹さん、セッション部長の斎木さん、運営委員の皆様、スタッフの皆様、本当にお疲れ様でした。
貴重な機会をありがとうございました。

なにやらChromeに見慣れないアイコンがあると思ったら、Emmet LiveStyle がアップデートされていました。2年以上Beta版のまま更新もなかったのが、突然の1.0リリース…！
アップデートにより SCSS, LESS にも対応や、リモートビュー機能の追加などをしています。
使い方が少し変わったので、ざっくりまとめました。

LiveStyle. The first bi-directional real-time edit tool for CSS, LESS and SCSS.

http://livestyle.io/

Emmet LiveStyleは、HTML,CSSの記述を省略できるEmmetとは関係なく、Sublime TextとChromeで双方向の同期編集ができるプラグインです。
以下、動画で動作を確認できます。

使用方法

まずはLiveStyleアプリケーションのインストール

いままではSublime Textのパッケージと、Chromeのエクステンションだけで動いていましたが、さらにLiveStyleアプリケーションが必要になりました。

Live Styleサイトからアプリをダウンロードします。Win、Mac対応です。

起動するとメニューバーに常駐アプリが表示されます。
俺のメニューバーに、新たな1ページ。

インストールをしていない場合は、インストールボタンが出るのでインストールできます。
もしくはChrome Webストア及びパッケージコントロールからインストール。

前バージョンをインストール済の場合は、基本的には自動でアップデートされるはず。

ここで気をつけたいのが、Sublime Text 2と3をどちらもインストールしている場合、2が優先されてしまいます。そのまま2を使うか、いっそ2をアンインストールしてください。

どちらにもインストール済。これでスタンバイOK。
LiveStyleアプリは起動しておくだけで、設定などは無いようです。

常に起動しておきたい場合は、ログイン項目に入れておきましょう。

オン・オフはChromeから

Chromeメニューバーのアイコンから、Enable LiveStyle をONにすることで双方向編集が開始されます。
前バージョンはデベロッパーツールから設定でしたが、メニューバーのアイコンから設定に変更になってます。

同期させるファイルを選択。

今回はお試しなので開いている未保存ファイル「untitled:27」を選択。本来は同じプロジェクト構成のファイルを指定します。

SCSSからもリアルタイムに反映されました。

「&」繋ぎのセレクタでも反映されていることがわかる。

Chromeデベロッパーツールからの変更もSublime Textに反映されます。

Remote View

追加された新機能、リモートビューでローカルサイトを一時的に公開することができます。

Chromeエクステンション下部のRemote Viewをオンにすると、 http://※※※.livestyle.io のようなドメインを発行し、トンネルでローカルWebサイトが公開されます。

公開するにはLiveStyleアプリがバックグラウンドで実行されている必要があります。

リモートビューはベータテスト中で、有料サービスになる予定みたいです。

まとめ

SCSS, LESSにも対応したことで、使用の幅は広がりましたね。（SASS記法も対応してほしい…）
BootstrapなどSCSSを使ったフレームワークでリアルタイムでレイアウトできるのは便利そうです。

WebStormなど JetBrainsエディタでもプリプロセッサーのプレビューはできたのですが、書き途中にエラー表示になったり動作は微妙でした。
LiveStyleは途中ではエラー表示もでず、動作も安定しているように感じました。

まだ業務などのパーシャルファイルをガンガン読み込んだ状態で試していないので、どこまで動くかわかりませんが、用法容量を守って正しく試用してみたいと思います。