参加セミナー・イベント

Sass(CSS Nite LP32)

講演者
(敬称略)
Why Sass? :谷 拓樹(サイバーエージェント)
CSSがもっとラクに書ける!これから始めるSassの書き方:柴田 大樹(アンコピ)
Sassにもっと便利な機能をプラス! Compassを使ってラクしましょ♡:黒野 明子(crema design)
Sass/Compassの導入と環境構築:森田 壮(ソウラボ)
コピペで使える!変数とmixin!:坂巻 翔大郎(ピクセルグリッド)/ 山田 敬美(ピクセルグリッド)
Sass/Compass よくあるトラブルと解決方法・回避方法:西畑 一馬(まぼろし)/ 木村 哲朗(まぼろし)
Sassの日常の運用:富田 梓(LINE)
HTMLテンプレートの設計:高津戸 壮(ピクセルグリッド)
開催日
2014年2月15日
場所
ベルサール九段
CSS Nite LP32: Sass

基調講演 Why Sass?

なぜ、あえてSass?

潜在意識として、
デザイナー視点では、Sassは不要に感じている。
プログラマー視点では、CSSは貧弱に感じている。



Sassは何をしてくれる?

Sassは、CSSをより強力にするための言語で、Rubyでできている。
と聞くとRubyに無知な自分にとっては、難しいイメージだが恐れるに足らず。従来のCSSの書き方で問題ない(Sass バージョン3から)。

Sassはどうやって使うのか?

拡張子は、.sass or .scss
↓ コンパイル(変換)
.css

なぜ、Sassを選ぶのか?

ほかにも、less / stylus とかもあるけど、なぜSass?

  • 日本語ドキュメントが多い
  • 安定している
  • compassというフレームワークがある

Sassはただのツール

コンパイル後のCSSを想像してSassを書く
コンパイル後のCSSが汚い場合は、Sassの書き方に問題あるということ

CSSがもっとラクにかける!これから始めるSassの書き方

なぜSass? → ラクに書けるから

入力の手間を省く

  • 共通のセレクタ (心の声)うーん、クラス完結させていつも書いているから、現状そんなに手間じゃない。
  • 同じ値(ささいな色もカラーの値は変数化しておくといい)ちょっと便利かも。でも一括置換でいいんじゃね!?
  • 同じプロパティと値(mixin と include)mixin class名を並べればいいんじゃね!?お? @mixin の引数に変数を追加できるだって?ちょっとやばい。
  • セレクタのグループ化@extend 一見よさそうだけど、上書き用であればそれってどうなの?そうじゃないよね。

CSSをまとめる

複数ファイルが一つのファイルになるのは、すごい!

計算できる

色の微修正、いいね!グラデとかもできて、反転とかもできるといいな。

Sassにもっと便利な機能をプラス!Compassを使ってラクしましょ♡

compassって何?

Sassだけではできない機能がセットになっている。

  • 便利なMixin集
  • vendor prefixes
  • CSS Sprite
  • data URI scheme

その他のたくさんの機能はCompass Helpersで確認。

CSS Spriteとdata URI schemeはとくに感動したッ!これだけでCompassを取り入れる価値あるッ!

Sass/Compassの導入と環境構築

導入方法は、他サイトや教則本を参考にするとして、衝撃だったのは、その手軽さ。セミナー内で環境をインストールし、コンパイルしてCSSファイルを出力できた!


コピペで使える!変数とmixin!

かわいいからすべて許せる内容でした。
お友達になりたいわー。

Sass/Compassよくあるトラブルと解決方法・回避方法

導入の障害を乗り越える方法

クライアントに環境がないときはどうする?

  • 調整用のCSSファイルを別途用意する
  • コンパイル後のCSSファイルを直接さわってもらう
  • がんばって使ってもらう

いずれにせよディレクションのお話

SCSSファイルって納品するの?

原則として納品する

文字コードが非UTF-8

回避方法がある。

Sass/Compass の御法度

ネストの多用

ネストが深すぎると・・・これはひどい
ネストは3階層まで、とルール付けをして制限をつけるといい。

extend の多用

運用面で破綻してしまいがち・・・これはひどい
クラスやmixinをつかう

ただし、mixinは、extendとは違いサイズ要領が大きくなるので、扱い注意。

@media の中では @expand はつかえない

IE9 以下では4,095個までしかセレクターを認識しない

そもそもそんなにセレクターを書いている時点で設計がまずい。

うまく運用するために

  • メンバーを思いやる
  • 使用方法をコメントに記す
  • 関数もおなじ
  • スプライト画像の肥大化
    画像を使いすぎるとスプライト画像が肥大化する
    iPhoneのSafariではおおよそ500万画素以上のGIF/PNG/TIFFは表示できない
    Androidは機種による

    スプライト画像を分割するなど一枚にあつめすぎない
    できるだけ画像を使わない
    アイコンをフォント化

かゆいところに手がとどく

  • Compassで複数のファイルに書き出せる
  • スプライト画像のファイル名を綺麗にできる(キャッシュバスター)
  • スプライト画像コンパイル時のプラグインをchunky_png から oily_png にする

「次」へのステップ

レスポンシブルなWebデザインを容易に作る Bootstrap / Foundation /Bem

バージョン管理 bundler

Gruntでもっと便利に(Compassより柔軟)

Sassの日常の運用

LINE株式会社での導入事例をサンプルに、職種や環境、技術レベルの異なる複数の作業者がかかわる環境で、どのように導入し、運用を続けているかを、紹介していただいた。

2011年6月から実用できるかを検査が始まり、実用できると判断後はチーム全体で導入の開始が始まり、現在は問題点のフィードバックとライブラリへの反映を行っているとのこと。
詳細はLINEのエンジニアブログに紹介されていて大変興味深い。 LINE Engineers' Blog NAVERでのSassの使い方


HTMLテンプレートの設計

compassを導入する際には、設計をしっかりしておく必要がある。そうしないと運用が破綻しかねないので注意が必要だ。
そんな中で3つの概念モデルを紹介していただいた。

OOCSS(Object Oriented CSS)

オブジェクト指向っぽく考えて整理しよう。

レイアウトに依存したCSSはダメ(なぜなら上書き合戦となるから、もしくはコピーしなければいけないから)

レゴみたいに考える

スキン(共通項目を一つのモジュールに)

BEM(Block Element Modifier)

BEMというワードは、いろんなケースで使われその意味が変化するが、ここではクラス名のこととして説明。BEMでは、クラス名の命名規則を厳格にしているのが特徴。

ややこしく、クラス名が長くなるデメリットがあるが、設計思想 / ルールの統一ができるのは大きなメリット。これを導入することで得られる4つのポイント。

  • 高速な開発が可能
  • プロジェクトの寿命を延ばせる
  • チームによる実装を可能に出来る
  • コードの再利用を可能にできる

SMACSS(Scalable and Modular Architecture for CSS)

CSSルールを5つに分ける

Base サイトのデフォルトスタイルを定義する
Layout サイトレイアウトの枠組み、およびそれを調節するための仕組み
Module レイアウトの中にモジュールをいれていくサブクラス(OOCSSのスキン)
State 状態ルール(BEMのクラス名ルールと同じ)
Theme  

セミナーに参加してみて

もともとSASSに対しては、現状にまったく問題がないのに、なんでCSSファイルを生成するためのSCSSというステップを踏む意味があるのか、そもそもSASSを使うための学習は無駄ではないのか、という否定的な考えでした。
そんな中で「絶対便利だから」と言われただけでは納得できなかったので、今回だまされたと思って、このセミナーに参加することに決め、その分、とても楽しみにしていたセミナーでした。

実際に参加してみて、SASSのメリットしているところに懐疑的になる部分もありましたが、圧倒的に便利な部分もありました。すなわち導入した方がいいッ!という結論に至りました。LINEでの導入実例を参考に、まずは個人レベルから始めたいと思います。

最近の記事

文章のユーザビリティ

この書籍の中で、ライティングのユーザビリティについて触れている項目があり、激しく共感する部分だったので、ここで備忘録としてピックアップする。 ・・・

ライティング

インタフェースデザイン

この書籍は、I部 リサーチ、II部 デザイン、III部 インプリメンテーションと三部構成になっている。この記事では、その中から、I部 リサーチ、・・・

デザイン思考

フルHD映像を4Kにする → スーパースケール

これを知ったときはマジか!と飛び跳ねた。あらためて思い返してみると、確かに公式チュートリアルでも触れていたことをうっすら思い出す。そしてそのときとやり方がなん・・・

DaVinci Resolve

Macで編集時と書き出し後で色味が変わってしまう場合に試してみたいこと

試したことはまだないけど、Macで編集時と書き出し後で色味が変わって困ったときのために備忘録。 プロジェクト設定 > 「カラーマネジメント・・・

DaVinci Resolve

プロジェクト設定と環境設定

プロジェクト設定と環境設定について詳しく解説されている情報がなかなか見つからないので、要所要所で知り得た情報を更新していきます。 プロジェクト設定 ・・・

DaVinci Resolve

項目”Clipy”は開いているため、ゴミ箱に入れることができません。←アンインストールしようとしたときの話し

Clipyが超絶便利そうだったので、macOS Big Sur にインストール&再起動して使ってみた。ところが、command + c を複数の箇所で行い、c・・・

徒然なままに

setTimeout は requestAnimationFrame に変えるべき?

requestAnimationFrame をはじめて見たので調べていたら、setTimeout や setInterval は requestAnimati・・・

JavaScript

書籍「小さなチーム、大きな仕事」からピックアップ

6年ぶりに読み返したが、今なおハッとさせられることが多く見つかる。 この本で忘れないようにしたい項目をピックアップするだけでも役に立ちそ・・・

起業向け情報

書籍「完全網羅 起業成功マニュアル」からピックアップ

この記事では、以前に読んだ際に付箋を付けていたが、その部分だけを備忘録としてピックアップするため、本の要約ではない。実際は、何倍も濃い内容で、練・・・

起業向け情報

書籍「はじめの一歩を踏み出そう」から気になったフレーズをピックアップ

もう一回、全部読み返したいところだが、書籍がありすぎるので、当時付箋紙をつけていたところだけをピックアップ。書籍内ではより具体的な説明があるので・・・

起業向け情報

人気の記事

iOS Safariで絶対配置(position:fixed)して惰性スクロールしてもロックしない、フリーズ回避方法

iPhoneやiPadで position: fixed; で絶対配置したエリア内をスクロールするとき、最上部をより上にスクロールしようとしたり、最下部をより・・・

JavaScript2021年4月28日

WP_Queryを使って絞り込み検索するのにコレは便利!

めっちゃ参考になるページを見つけた。 絞り込みをするたびに色々ググっていたが、これがあればほとんどのことが解決できそうな気がする。 参考: これは便利!Word・・・

WordPress2018年10月11日

overflowをautoにした要素のスクロール位置を変更する → scrollTop scrollLeft

まずはサンプル。 これは、overflowをautoにした要素のスクロール位置を変更するサンプルです。 これは、overflowをautoにした要素のスクロ・・・

JavaScript2017年7月19日

Instagram API を使ってインスタに投稿した画像データを取得する

インスタに投稿した画像を自動でホームページでも更新されるようにしたい。もっとも簡単に実現する方法を紹介する。 公式リファレンスInstagram・・・

API2021年2月22日

iframeの高さを自動調整する

iframeで呼び出した際、iframe自体はスクロールさせずに高さを取得してiframe全体を表示させます。 サンプル:iframeの高さを自動調整するデモ・・・

JavaScript2015年3月17日

イラストレーターでレイヤーごとにPNGで書き出す

【2020年07月13日】 macOS Catalina(10.15.5) / Adobe iLLustrator 2020(24.2.1) にて動作確認済・・・

Illustorator2018年2月2日

WordPressのカテゴリー一覧ページでカテゴリー名とスラッグを取得する → get_queried_object()

やりたいこと カテゴリー一覧ページで、そのカテゴリー一覧ページに属する記事一覧を取得するためにループさせるのとは別に、タイトルやカテゴリー別にデザインを変・・・

WordPress2019年2月11日

背景画像の拡大・縮小 → background-size !

W3Cで「モジュール背景とボーダー」について2011年2月15日付けで更新されてますね。 CSS3では、背景画像の幅・高さを拡大・縮小するプロパティが追加され・・・

CSS2011年3月7日

配列の重複を削除する

配列の場合 /** * 配列の重複を削除する * * @param {array} ary* * @return {array} 処理後のary・・・

JavaScript2020年12月14日

favicon.icoをWordPressの管理画面からアップロードできない→ wp-config.php を一時的に修正

いつもは直接アップロードしているので気にしていなかったが、WordPress管理画面のメニュー「メディア」からfavicon.icoをアップロードしようとした・・・

WordPress2020年8月4日

コメントありの記事

Sony Eマウント フルサイズ対応のカメラレンズを収集するページを作ってみた

「SIGMAから超軽量で明るい単焦点レンズが2本発売になりましたので、リストにレンズ情報追加しました!」

お仕事・制作日記

overflowをautoにした要素のスクロール位置を変更する → scrollTop scrollLeft

「>名無しさん ご指摘、ありがとうございます! 記事冒頭の「まずはサンプル」のサンプルが動いていませんでしたので修正しました。」

JavaScript

えっ!?Yahooの検索結果から遷移しようとしたら全く違うサイトにリダイレクトされてしまった...

「>前田さん コメントありがとうございます。 環境は分かりかねますが、修正したいファイルのパーミッションを604や644に変更すると書き込みできるようになります(・・・」

お仕事・制作日記

記事の投稿IDなどの投稿者(ユーザー)情報を取得する方法 → get_the_author_meta

「アバターを取得する「get_avatar」についても追記しました!」

WordPress

jQueryでformを操る【nameの値を取得する/クリアする】

「「値をクリアする」を追加しました。チェックボックスやラジオボタンの値を何も選択していない状態に戻すときについて触れています。」

JavaScript

iframeの高さを自動調整する

「>匿名さん コメントありがとうございます。 サンプルでは、beforeは何も処理していないので期待する表示にならない、で正解です。 クリックした後が、対応・・・」

JavaScript

Instagram API を使ってインスタに投稿した画像データを取得する

「コメントに嬉しいお言葉、ありがとうございます!」

API

MAMPでMySQL Serverが突然起動しなくなった時 → ログファイル削除

「(匿名)さん コメントありがとうございます。何も設定変更していないのに、それまで使用できていたサーバーが突然使えなくなるのは辛いですよね、、。 ここで紹介したや・・・」

MAMP

イラストレーターでレイヤーごとにPNGで書き出す

「コメントありがとうございます! そもそもできるかはわかりませんが、ソースを書き換える必要はあります。 下記記事などが参考になるかもしれません。 illustra・・・」

Illustorator

05_各種キーワードツール

「公開から14年振りの更新w デッドリンクを削除しました。ツール系は「SEO対策に役立つ便利ツール」に集約します。」

SEO

思考と学び参加セミナー・イベントSass(CSS Nite LP32) | シンプルシンプルデザイン