Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
良くあるトラブルと

解決方法・回避方法
木村哲朗・西畑一馬
Sass / Compass
木村 哲朗
フロントエンドエンジニア
西畑 一馬
フロントエンドエンジニア
こちらもどうぞ
http://www.slideshare.net/
maboroshi_inc/css-nite-lp26-
codekitweb
スライド: 動画:
http://vimeo.com/57782498
本日の内容
• 導入の障害を乗り越える方法
• Sass/Compass の御法度
• かゆいところに手を届けるTips
•「次」へのステップ
前置き
フロントエンドの

受託制作やってます。
導入の障害を乗り越える方法
受託で使ってもいいの?
いいんです!
クライアントが

Sassを使えない
いくつかの方法
A. 調整用のCSSファイルを

別途用意する
B. コンパイル後のCSSファイルを

直接さわってもらう
C. 頑張って使ってもらう!
いくつかの方法
A. 調整用のCSSファイルを

別途用意する
B. コンパイル後のCSSファイルを

直接さわってもらう
C. 頑張って使ってもらう!
調整用CSSを用意する
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Document</title>
 
<link rel="stylesheet...
メリット
• コンパイル後のCSSファイルが

汚染されない
•差分の吸収がし易い
デメリット
• HTTPリクエストが増える
• スタイルの上書きが大変
いくつかの方法
A. 調整用のCSSファイルを

別途用意する
B. コンパイル後のCSSファイルを

直接さわってもらう
C. 頑張って使ってもらう!
直接さわってもらう
コンパイル後のCSSファイルを
直接編集してもらう
$ sass foo.scss:foo.css --style expanded
sass コマンドでオプションを指定
/* 人間が読みやすい形式に出力される */
bod...
メリット
• スタイルを上書きし易い
デメリット
• コンパイル後のCSSファイルが

汚染される
いずれにせよ

ディレクションのお話
SCSSファイルって

納品するの?
原則として納品する
文字コードが 非UTF-8
文字コードを宣言する
@charset "Shift_JIS";
 
/* 日本語で何かしらコメント */
 
@import "compass";
// …以下略
•@charset で文字コードを宣言
•日本語でコメントを残す
• 指定の文...
Sass/Compass の御法度
導入できた! 万歳…?!
ネストの多用
ネストが深すぎると…
#foo {
width: 200px;
ul {
padding: 10px;
li {
list-style-type: none;
a {
color: #009;
.bar {
font-weight: bold;...
これはひどい。
ネストは3階層まで
extend の多用
extend しすぎると…
%clearfix {
&:after {
content: "";
clear: both;
display: block;
}
}
.extended1 {
@extend %clearfix;
font-siz...
これはひどい。
クラス や mixin にする
.clearfix:after {
content: "";
clear: both;
display: block;
}
汎用的なクラスにして
@mixin clearfix {
&:after {
conte...
ちなみに
•@media の中では

@extend が使えない
http://terkel.jp/archives/2012/07/at-media-and-at-extend/
IEの 4,095 問題
• IE9 以下では 4,095個までしか

セレクターを認識しない
http://support.microsoft.com/kb/262161
• ネストや extend を多用すると

セレクターが容易に増えていく
•Bless というツ...
そもそも設計がまずい
複雑な mixin の多用
他人が理解できない
• メンバーを思いやる
• 使用方法をコメントに記す
•関数についても同じ
スプライト画像の

肥大化
•画像を使いすぎると

スプライト画像が肥大化する
• iPhone では 500万画素以上の

GIF/PNG/TIFF は表示できない
• Android は機種による
• スプライト画像を分割するなど

一枚に集めすぎない
• できるだけ画像を使わない
• アイコンはフォント化する手も
かゆいところに手を届けるTips
CompassでCSSを

複数のディレクトリに

分けて書き出したい
出力前
ディレクトリ構造
# css_dir と sass_dir を同じパスにする
css_dir = "/"
sass_dir = "/"
config.rb
CSS の配置場所に

SCSS を配置する
root
┃┃
┃
┃
foo┣
f...
出力後
ディレクトリ構造
# css_dir と sass_dir を同じパスにする
css_dir = "/"
sass_dir = "/"
config.rb
root
foo┣
foobar┣┃
style.scss┃┃ ┣
┃┃ styl...
スプライト画像の

ファイル名を綺麗に

したい
• Compassでは

スプライト画像のファイル名末尾に

ランダムな英数字が付与される
• スプライト画像が更新されたときに

古い画像の読み込みを防ぐための

キャッシュバスター
おまじない
# キャッシュバスター文字列をトリミング
on_sprite_saved do |filename|
if File.exists?(filename)
FileUtils.cp filename, filename.gsub(%r...
Compassの

コンパイルを早くしたい
• 最も重いのは

スプライト画像の生成
• スプライト画像の生成には

chunky_png が使われている
chunky_png を使わない
$ gem install oily_png
ターミナルでインストール
出典: http://compass-style.org/help/tutorials/spriting/
•oily_png を使う
•...
「次」へのステップ
レスポンシブな

フレームワーク
Bootstrap
http://getbootstrap.com/ Sass版: https://github.com/twbs/bootstrap-sass
Foundation
http://foundation.zurb.com/
Sass で

BEM
BEM とは
• Yandex が開発した設計の方法論
• CSS用に落とし込んだ

MindBEMding が使いやすい
•Block, Element, Modifier

の略
詳しくはこちら
http://bem.info/method/
http://journal.sooey.com/220
http://csswizardry.com/2013/01/mindbemding-getting-your-head-...
CSSだとつらい
.block {
width: 100%;
}
 
.block__element {
float: left;
width: 50%;
}
 
.block__element--modifier {
float: right...
Sass を使えば…
.block {
width: 100%;
 
@at-root {
 
#{&}__element {
float: left;
width: 50%;
}
#{&}__element--modifier {
float...
まだ使えない

次期バージョン 3.3 から
Sass や Compass の

バージョン管理
例えばこんなとき
•次期バージョンの

Sass/Compass を使いたい
• 使用する Sass/Compass の

バージョンを厳格に指定したい
Bundler
http://bundler.io/
Bundler のインストール
$ gem install bundler
ターミナルでインストール
※Mac は先頭に sudo が必要
プロジェクトごとの初期設定
$ bundle init
ターミナルで作業ディレクトリを開いて
※作業ディレクトリまでのパスにスペースが含まれていると正常に動作しない場合があるので要注意
$ vi Gemfile
作業ディレクトリに Gemfile...
パッケージのインストール
$ bundle install --path vendor/bundle
ターミナルでインストール
※パスを指定せずに実行するとグローバルにインストールされてしまうので要注意
• Gemfile をプロジェクトメンバー...
各コマンドの使用方法
$ bundle exec compass w
bundle コマンドを通じて呼び出す
• あとはいつも通り
Grunt でもっと便利に
Grunt
http://gruntjs.com/
Grunt とは
•タスクランナー

さまざまな処理を順番に自動実行
•Node.js で動作する
Node.js
http://nodejs.org/
Node.js のインストール
• 公式サイトから

インストーラーをダウンロード
• Macなら

Homebrew か nodebrew での
インストールがおすすめ
• Homebrew: http://brew.sh/
• nodebr...
Grunt でできること
• ファイル更新の監視
• ブラウザのライブリロード
• Sass/Compass のコンパイル
•ベンダープレフィックスの付与
•CSSスプライトの生成
• CSSのミニファイ
• 画像の最適化

Compass より柔軟
プラグインを組み合わせる
ファイル更新の監視
• grunt-contrib-watch
https://github.com/gruntjs/grunt-contrib-watch
• Grunt公式プラグイン
• grunt-este-watch
https://g...
ブラウザのライブリロード
• grunt-contrib-connect
https://github.com/gruntjs/grunt-contrib-
connect
• Grunt公式プラグイン
• 前のページのプラグインと組み合わせる...
Sass のコンパイル
• grunt-contrib-sass
https://github.com/gruntjs/grunt-contrib-sass
• Grunt公式プラグイン
• grunt-sass
https://github....
Compass のコンパイル
• grunt-contrib-compass
https://github.com/gruntjs/grunt-contrib-
compass
• Grunt公式プラグイン
ベンダープレフィックスの付与
• grunt-autoprefixer
https://github.com/nDmitry/grunt-autoprefixer
• 標準のCSSプロパティさえ書けば

自動的にベンダープレフィックスを付与してくれ...
CSSスプライトの生成
• grunt-spritesmith
https://github.com/Ensighten/grunt-spritesmith
• 画像処理エンジンが別途必要
• 出力フォーマットを SCSS にすると

スプライ...
CSS のミニファイ
• grunt-contrib-cssmin
https://github.com/gruntjs/grunt-contrib-cssmin
• Grunt公式プラグイン
• grunt-csso
https://gith...
画像の最適化
• grunt-contrib-imagemin
https://github.com/gruntjs/grunt-contrib-
imagemin
• Grunt公式プラグイン
• PNG, JPEG, GIF に対応
Grunt の始め方
http://blog.webcreativepark.net/2013/08/28-010250.html
Gulp ってのもあります
http://gulpjs.com/
まとめ
ご利用は計画的に
身の丈に

合わせて
黒い画面、今度こそ
赤い
画面
ターミナルが

好きになりました♥
大丈夫、まぼろし監修だよ!
大丈夫、まぼろし監修だよ!
お申し込みは→ http://peatix.com/event/29230
Photo credits
• Philippe Moreau Chevrolet
• Eric_Dorsey
• niXerKG
• leigh wolf
• Corey Templeton
• asenat29
• Nicu Buculei...
ありがとうございます
木村哲朗・西畑一馬
Sass/Compass よくあるトラブルと 解決方法・回避方法
Upcoming SlideShare
Loading in …5
×

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

25,664 views

Published on

CSS Nite LP32 Sass で行なった「Sass/Compass よくあるトラブルと 解決方法・回避方法」のスライドです

Published in: Technology
  • Follow the link, new dating source: ♥♥♥ http://bit.ly/39mQKz3 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Sex in your area is here: ♥♥♥ http://bit.ly/39mQKz3 ♥♥♥
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • -- DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT -- ......................................................................................................................... ......................................................................................................................... Download FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... (Unlimited)
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • If you want to download or read this book, Copy link or url below in the New tab ......................................................................................................................... DOWNLOAD FULL PDF EBOOK here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download EPUB Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... Download Doc Ebook here { http://bit.ly/2m6jJ5M } ......................................................................................................................... .........................................................................................................................
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 1. 良くあるトラブルと
 解決方法・回避方法 木村哲朗・西畑一馬 Sass / Compass
  2. 2. 木村 哲朗 フロントエンドエンジニア
  3. 3. 西畑 一馬 フロントエンドエンジニア
  4. 4. こちらもどうぞ http://www.slideshare.net/ maboroshi_inc/css-nite-lp26- codekitweb スライド: 動画: http://vimeo.com/57782498
  5. 5. 本日の内容 • 導入の障害を乗り越える方法 • Sass/Compass の御法度 • かゆいところに手を届けるTips •「次」へのステップ
  6. 6. 前置き フロントエンドの
 受託制作やってます。
  7. 7. 導入の障害を乗り越える方法
  8. 8. 受託で使ってもいいの?
  9. 9. いいんです!
  10. 10. クライアントが
 Sassを使えない
  11. 11. いくつかの方法 A. 調整用のCSSファイルを
 別途用意する B. コンパイル後のCSSファイルを
 直接さわってもらう C. 頑張って使ってもらう!
  12. 12. いくつかの方法 A. 調整用のCSSファイルを
 別途用意する B. コンパイル後のCSSファイルを
 直接さわってもらう C. 頑張って使ってもらう!
  13. 13. 調整用CSSを用意する <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Document</title>   <link rel="stylesheet" href="main.css"><!-- コンパイル後のCSSは編集禁止 --> <link rel="stylesheet" href="temp.css"><!-- スタイル調整はこちらを編集 -->   </head> <body> <!-- 中略 --> </body> </html> コンパイル後のCSSファイルとは別に 調整用のCSSファイルを用意する
  14. 14. メリット • コンパイル後のCSSファイルが
 汚染されない •差分の吸収がし易い
  15. 15. デメリット • HTTPリクエストが増える • スタイルの上書きが大変
  16. 16. いくつかの方法 A. 調整用のCSSファイルを
 別途用意する B. コンパイル後のCSSファイルを
 直接さわってもらう C. 頑張って使ってもらう!
  17. 17. 直接さわってもらう コンパイル後のCSSファイルを 直接編集してもらう $ sass foo.scss:foo.css --style expanded sass コマンドでオプションを指定 /* 人間が読みやすい形式に出力される */ body { color: #333; }   h1 { font-size: 2.0rem; }   .red { color: #f00; } コンパイル後のCSSファイル # コメントのスタイルを"expanded"に指定 output_style = expanded Compass を使う場合は config.rb で
  18. 18. メリット • スタイルを上書きし易い
  19. 19. デメリット • コンパイル後のCSSファイルが
 汚染される
  20. 20. いずれにせよ
 ディレクションのお話
  21. 21. SCSSファイルって
 納品するの?
  22. 22. 原則として納品する
  23. 23. 文字コードが 非UTF-8
  24. 24. 文字コードを宣言する @charset "Shift_JIS";   /* 日本語で何かしらコメント */   @import "compass"; // …以下略 •@charset で文字コードを宣言 •日本語でコメントを残す • 指定の文字コードで保存してコンパイル SCSSファイル
  25. 25. Sass/Compass の御法度
  26. 26. 導入できた! 万歳…?!
  27. 27. ネストの多用
  28. 28. ネストが深すぎると… #foo { width: 200px; ul { padding: 10px; li { list-style-type: none; a { color: #009; .bar { font-weight: bold; } } } } } SCSSファイル #foo { width: 200px; } #foo ul { padding: 10px; } #foo ul li { list-style-type: none; } #foo ul li a { color: #009; } #foo ul li a .bar { font-weight: bold; } コンパイル後のCSSファイル
  29. 29. これはひどい。
  30. 30. ネストは3階層まで
  31. 31. extend の多用
  32. 32. extend しすぎると… %clearfix { &:after { content: ""; clear: both; display: block; } } .extended1 { @extend %clearfix; font-size: 120%; } .extended2 { @extend %clearfix; font-weight: bold; } .extended3 { @extend %clearfix; text-decoration: underline; } // 以下大量にextend SCSSファイル .extended1:after, .extended2:after, .e xtended3:after, .extended4:after, .ext ended5:after, .extended6:after, .exten ded7:after, .extended8:after, .extende d9:after, .extended10:after, .extended 11:after, .extended12:after, .extended 13:after, .extended14:after, .extended 15:after, .extended16:after, .extended 17:after, .extended18:after, .extended 19:after, .extended20:after { content: ""; clear: both; display: block; }   .extended1 { font-size: 120%; } /* 以下略 */ コンパイル後のCSSファイル
  33. 33. これはひどい。
  34. 34. クラス や mixin にする .clearfix:after { content: ""; clear: both; display: block; } 汎用的なクラスにして @mixin clearfix { &:after { content: ""; clear: both; display: block; } } ! .foo { @include clearfix; } mixin にして使い回す <div class="clearfix"> <p class="main">Floated left.</p> <p class="sub">Floated right.</p> </div> html 側で使い回す
  35. 35. ちなみに •@media の中では
 @extend が使えない http://terkel.jp/archives/2012/07/at-media-and-at-extend/
  36. 36. IEの 4,095 問題
  37. 37. • IE9 以下では 4,095個までしか
 セレクターを認識しない http://support.microsoft.com/kb/262161 • ネストや extend を多用すると
 セレクターが容易に増えていく •Bless というツールで
 CSSファイルを分割できる http://blesscss.com/
  38. 38. そもそも設計がまずい
  39. 39. 複雑な mixin の多用
  40. 40. 他人が理解できない
  41. 41. • メンバーを思いやる • 使用方法をコメントに記す •関数についても同じ
  42. 42. スプライト画像の
 肥大化
  43. 43. •画像を使いすぎると
 スプライト画像が肥大化する • iPhone では 500万画素以上の
 GIF/PNG/TIFF は表示できない • Android は機種による
  44. 44. • スプライト画像を分割するなど
 一枚に集めすぎない • できるだけ画像を使わない • アイコンはフォント化する手も
  45. 45. かゆいところに手を届けるTips
  46. 46. CompassでCSSを
 複数のディレクトリに
 分けて書き出したい
  47. 47. 出力前 ディレクトリ構造 # css_dir と sass_dir を同じパスにする css_dir = "/" sass_dir = "/" config.rb CSS の配置場所に
 SCSS を配置する root ┃┃ ┃ ┃ foo┣ foobar┣┃ style.scss┃┃ ┗ ┃ style.scss┗ bar┣ style.scss┗┃ index.html┣ config.rb┗
  48. 48. 出力後 ディレクトリ構造 # css_dir と sass_dir を同じパスにする css_dir = "/" sass_dir = "/" config.rb root foo┣ foobar┣┃ style.scss┃┃ ┣ ┃┃ style.css┗ ┃ style.scss┣ ┃ style.css┗ bar┣ style.scss┣┃ style.css┗┃ index.html┣ config.rb┗ SCSS と同じ所に
 CSS が出力される
  49. 49. スプライト画像の
 ファイル名を綺麗に
 したい
  50. 50. • Compassでは
 スプライト画像のファイル名末尾に
 ランダムな英数字が付与される • スプライト画像が更新されたときに
 古い画像の読み込みを防ぐための
 キャッシュバスター
  51. 51. おまじない # キャッシュバスター文字列をトリミング on_sprite_saved do |filename| if File.exists?(filename) FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}.png$}, '.png') end end   on_stylesheet_saved do |filename| if File.exists?(filename) css = File.read filename File.open(filename, 'w+') do |f| f << css.gsub(%r{-s[a-z0-9]{10}.png}, '.png') end end end config.rb に以下を追記 出典: http://stackoverflow.com/questions/9183133/how-to-turn-off-compass-sass-cache-busting/9332472
  52. 52. Compassの
 コンパイルを早くしたい
  53. 53. • 最も重いのは
 スプライト画像の生成 • スプライト画像の生成には
 chunky_png が使われている
  54. 54. chunky_png を使わない $ gem install oily_png ターミナルでインストール 出典: http://compass-style.org/help/tutorials/spriting/ •oily_png を使う • chunky_png よりも高速 • インストールするだけで自動認識 ※Mac は先頭に sudo が必要
  55. 55. 「次」へのステップ
  56. 56. レスポンシブな
 フレームワーク
  57. 57. Bootstrap http://getbootstrap.com/ Sass版: https://github.com/twbs/bootstrap-sass
  58. 58. Foundation http://foundation.zurb.com/
  59. 59. Sass で
 BEM
  60. 60. BEM とは • Yandex が開発した設計の方法論 • CSS用に落とし込んだ
 MindBEMding が使いやすい •Block, Element, Modifier
 の略
  61. 61. 詳しくはこちら http://bem.info/method/ http://journal.sooey.com/220 http://csswizardry.com/2013/01/mindbemding-getting-your-head- round-bem-syntax/ https://gist.github.com/juno/6182957 http://blog.ruedap.com/2013/10/29/block-element-modifier http://hail2u.net/blog/webdesign/sass-and-bem.html http://www.adventar.org/calendars/61
  62. 62. CSSだとつらい .block { width: 100%; }   .block__element { float: left; width: 50%; }   .block__element--modifier { float: right; }   .block--modifier { padding: 20px; }   .block--modifier__element { color: #f00; } CSS BEMのルールに従うと
 クラス名が長く
 繰り返しも多くなる
  63. 63. Sass を使えば… .block { width: 100%;   @at-root {   #{&}__element { float: left; width: 50%; } #{&}__element--modifier { float: right; } #{&}--modifier { padding: 20px; } #{&}--modifier__element { color: #f00; }   } } SCSS @at-root と
 #{&} で
 サクサク書ける
  64. 64. まだ使えない
 次期バージョン 3.3 から
  65. 65. Sass や Compass の
 バージョン管理
  66. 66. 例えばこんなとき •次期バージョンの
 Sass/Compass を使いたい • 使用する Sass/Compass の
 バージョンを厳格に指定したい
  67. 67. Bundler http://bundler.io/
  68. 68. Bundler のインストール $ gem install bundler ターミナルでインストール ※Mac は先頭に sudo が必要
  69. 69. プロジェクトごとの初期設定 $ bundle init ターミナルで作業ディレクトリを開いて ※作業ディレクトリまでのパスにスペースが含まれていると正常に動作しない場合があるので要注意 $ vi Gemfile 作業ディレクトリに Gemfile が生成されるので編集する ※一般的なテキストエディタでも編集可能 source "https://rubygems.org" ! gem 'sass', '3.3.0.rc.2' gem 'compass', '0.13.alpha.12' Gemfile 記述例 ※“Sass Ver.3.3.0.rc.2” と “Compass Ver.0.13.alpha.12” を使用したい場合は上記のように記述
  70. 70. パッケージのインストール $ bundle install --path vendor/bundle ターミナルでインストール ※パスを指定せずに実行するとグローバルにインストールされてしまうので要注意 • Gemfile をプロジェクトメンバー間で
 共有すれば、全員が同じバージョンの
 Sass や Compass を使用できる
  71. 71. 各コマンドの使用方法 $ bundle exec compass w bundle コマンドを通じて呼び出す • あとはいつも通り
  72. 72. Grunt でもっと便利に
  73. 73. Grunt http://gruntjs.com/
  74. 74. Grunt とは •タスクランナー
 さまざまな処理を順番に自動実行 •Node.js で動作する
  75. 75. Node.js http://nodejs.org/
  76. 76. Node.js のインストール • 公式サイトから
 インストーラーをダウンロード • Macなら
 Homebrew か nodebrew での インストールがおすすめ • Homebrew: http://brew.sh/ • nodebrew: https://github.com/hokaccha/nodebrew
  77. 77. Grunt でできること • ファイル更新の監視 • ブラウザのライブリロード • Sass/Compass のコンパイル •ベンダープレフィックスの付与 •CSSスプライトの生成 • CSSのミニファイ • 画像の最適化

  78. 78. Compass より柔軟
  79. 79. プラグインを組み合わせる
  80. 80. ファイル更新の監視 • grunt-contrib-watch https://github.com/gruntjs/grunt-contrib-watch • Grunt公式プラグイン • grunt-este-watch https://github.com/steida/grunt-este-watch • grunt-contrib-watch よりも高速
  81. 81. ブラウザのライブリロード • grunt-contrib-connect https://github.com/gruntjs/grunt-contrib- connect • Grunt公式プラグイン • 前のページのプラグインと組み合わせることで
 ファイル更新時にブラウザをリロードしてくれる
  82. 82. Sass のコンパイル • grunt-contrib-sass https://github.com/gruntjs/grunt-contrib-sass • Grunt公式プラグイン • grunt-sass https://github.com/sindresorhus/grunt-sass • grunt-contrib-sass よりも高速
  83. 83. Compass のコンパイル • grunt-contrib-compass https://github.com/gruntjs/grunt-contrib- compass • Grunt公式プラグイン
  84. 84. ベンダープレフィックスの付与 • grunt-autoprefixer https://github.com/nDmitry/grunt-autoprefixer • 標準のCSSプロパティさえ書けば
 自動的にベンダープレフィックスを付与してくれる • 付与するベンダープレフィックスを
 ブラウザバージョンで指定することができる • Compass の CSS3 ヘルパーが不要になる
  85. 85. CSSスプライトの生成 • grunt-spritesmith https://github.com/Ensighten/grunt-spritesmith • 画像処理エンジンが別途必要 • 出力フォーマットを SCSS にすると
 スプライト用の Mixin を生成してくれる • Compass のスプライトヘルパーが不要になる
  86. 86. CSS のミニファイ • grunt-contrib-cssmin https://github.com/gruntjs/grunt-contrib-cssmin • Grunt公式プラグイン • grunt-csso https://github.com/t32k/grunt-csso • grunt-contrib-cssmin よりも圧縮率が高い
  87. 87. 画像の最適化 • grunt-contrib-imagemin https://github.com/gruntjs/grunt-contrib- imagemin • Grunt公式プラグイン • PNG, JPEG, GIF に対応
  88. 88. Grunt の始め方 http://blog.webcreativepark.net/2013/08/28-010250.html
  89. 89. Gulp ってのもあります http://gulpjs.com/
  90. 90. まとめ
  91. 91. ご利用は計画的に
  92. 92. 身の丈に
 合わせて
  93. 93. 黒い画面、今度こそ
  94. 94. 赤い
画面 ターミナルが
 好きになりました♥
  95. 95. 大丈夫、まぼろし監修だよ!
  96. 96. 大丈夫、まぼろし監修だよ! お申し込みは→ http://peatix.com/event/29230
  97. 97. Photo credits • Philippe Moreau Chevrolet • Eric_Dorsey • niXerKG • leigh wolf • Corey Templeton • asenat29 • Nicu Buculei • Lachlan Fearnley • marsmettn tallahassee • Becky Stern • myrrh ahn • <p&p> • Will Scullin • Van Corey • Kate Sumbler • Li Jen Jian • Andy Ciordia • Mrs TeePot • Judy Baxter • Yamanaka Tamaki • Joseph Kesisoglou • Emyan • ecatoncheires • clogette • KIMURA Tetsuro
  98. 98. ありがとうございます 木村哲朗・西畑一馬

×