• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
実践Sass 後編
 

実践Sass 後編

on

  • 22,076 views

HTML5 Conference 2012 で使用したスライドです。

HTML5 Conference 2012 で使用したスライドです。
前編のスライドはこちらです。
http://www.slideshare.net/azusatomita3/sass-14212266

Statistics

Views

Total Views
22,076
Views on SlideShare
6,209
Embed Views
15,867

Actions

Likes
60
Downloads
80
Comments
0

20 Embeds 15,867

http://stocker.jp 13230
http://w3q.jp 1276
http://seiichi.heterobrain.com 612
http://makoto-tanaka.com 495
http://thisiswebthings.tumblr.com 167
https://twitter.com 50
http://webcache.googleusercontent.com 10
http://ss.dotbranch.com 8
http://c0c0c0.info 3
https://ocean.cybozu-dev.com 3
http://translate.googleusercontent.com 2
https://www.google.co.jp 2
http://kinpaku-ya.jp 2
http://localhost 1
https://api.twitter.com 1
http://www.google.com 1
http://twitter.com 1
http://www.stocker.jp 1
http://clipboard.com 1
http://cache.yahoofs.jp 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n

実践Sass 後編 実践Sass 後編 Presentation Transcript

  • 実践Sass 後編
  • $company: NHN Japan$twitter: @kosei27$website: www.culture27.com
  • • 後編はライブラリを つくる側の視点でお話します• ライブラリ ≒ ちょっと便利なミックスインや 関数が集まったパーシャルファイル
  • Agenda1. 社内ライブラリを作った理由2. 社内ライブラリの管理3. 社内ライブラリの中身4. 社内ライブラリを作った結果
  • 社内ライブラリを 作った理由
  • Sassの導入時、Compassも当然検討しましたhttp://compass-style.org/
  • 多機能だし便利そうこれでいいかも?
  • でも、、• CSSの新しい構文に一部未対応だった• 一部ミックスインの引数が多かった• 不要なベンダープリフィックスが出てた※今はかなり改善されているようです
  • あと、• ミックスインや関数の サンプルコードやデモが少なかった• 外部に依存するのはまだ避けたかった※今もサンプルコードやデモは少ない…
  • それに、、• 自社用に特化したものが欲しい• 自分で書いてみた方が勉強になる• なので、とりあえず作ってみたい
  • 作ってみました
  • 社内ライブラリの管理
  • sass @mixin _setting.scss @function _utility.scss style.scss
  • sass @mixin _setting.scss @function _utility.scss style.scss @import
  • sass @mixin _setting.scss @function _utility.scss style.scss @import style2.scss他のファイルも同様にして、どこでも使えるように。
  • もっと細かいことはこちら…NAVERでのSassの使い方 « NAVER Engineers Bloghttp://tech.naver.jp/blog/?p=1027
  • 社内ライブラリの中身
  • いろいろ作ってみました• CompassにもあるCSS3用のもの• その他、地味だけど便利なもの
  • いくつか紹介します1. inline-block2. Link Underline3. font-family4. Placeholder Color5. Minor CSS Hacks
  • •断っておきますが、•基本的に地味です•でも便利です
  • 1. inline-block
  • display: inline-block;.sample { display: inline-block; *display: inline; *zoom: 1;}
  • 毎回書くのはめんどう
  • display: inline-block;のミックスイン@mixin inline-block { display: inline-block; *display: inline; *zoom: 1;}
  • ミックスインを使う@mixin inline-block { display: inline-block; *display: inline; *zoom: 1;}.sample { @include inline-block;}
  • 地味に便利ですね
  • 問題: IE6/7対応が不要になった時.sample { display: inline-block; *display: inline; *zoom: 1;}無駄なコードが出たままに…。
  • 問題: IE6/7対応が不要になった時@mixin inline-block { display: inline-block; *display: inline; *zoom: 1;} delete?
  • 削除した場合の問題点• 別プロジェクトのライブラリと 差ができてしまう• 後でやっぱりIE6/7対応が 必要になった時に面倒
  • 解決策グローバル変数を使って、出力するコードを出し分ける
  • 変数でコードを出し分ける$support-ie6: false !default;$support-ie7: false !default;これはIE6/7対応が不要な場合。
  • variables for settings sass _setting.scss _utility.scss style.scss @importプロジェクト全体の設定用なので、どこでも使えるように。
  • ほか、設定用の変数// HTML5の要素の使用$use-html5: true !default;// IE8-10, Firefox, WebKit, Opera$support-ie8 : true !default;$support-ie9 : true !default;$support-ie10 : true !default;$support-mozilla: true !default;$support-webkit : true !default;$support-opera : true !default;これらを使ってコードの出し分けをします。
  • 変数でコードを出し分ける@mixin inline-block { display: inline-block; @if $support-ie6 or $support-ie7 { *display: inline; *zoom: 1; }}2つの変数のどちらかがtrueであればIE用のコードが出ます。
  • 変数でコードを出し分ける// _setting.scss$support-ie6: false !default;$support-ie7: false !default;// _utility.scss@mixin inline-block { display: inline-block; @if $support-ie6 or $support-ie7 { *display: inline; *zoom: 1; }}IE6/7対応が必要になったら、trueにしてコンパイルするだけ。
  • より地味に便利ですね
  • 2. Link Underline
  • 1. あり → なし2. あり → あり3. なし → あり4. なし → なし
  • 下線 あり→なし パターン.link {! ! &:link,! ! &:visited { text-decoration: underline; }! ! &:hover,! ! &:active,! ! &:focus { text-decoration: none; }}
  • 毎回書くのはめんどう
  • ミックスインを使う.link { @include link-underline(line-to-none);}
  • ミックスインのコード@mixin link-underline($type) { @if $type == line-to-none { // 1.あり→なし &:link, &:visited {text-decoration: underline;} &:hover, &:active, &:focus { text-decoration: none;} } @else if $type == line { // 2.あり→あり &:link, ..., &:focus { text-decoration: underline; } } @else if $type == none-to-line {..} // 3.なし→あり } @else if $type == none {..} // 4.なし→なし}
  • タイプを指定する@include link-underline(line-to-none);@include link-underline(line);@include link-underline(none-to-line);@include link-underline(none);
  • 地味に便利ですね
  • 3. font-family
  • font-familyのコードfont-family: Hiragino Kaku Gothic Pro, Meiryo, MS PGothic, sans-serif;font-family: Verdana, Arial, Helvetica, sans-serif;組み合わせは他にも沢山。
  • font-familyのコードfont-family: monospace, serif; for WebKit// For IE6_font-family: MS Gothic, monospace; underscore hackCSSハックを使わないといけないケースも。
  • 毎回書くのはめんどう
  • ミックスインのコード@mixin font-family($type, $important: null) { @if ($important == important) or $important { $important: !important; } @if $type == sans-serif { font-family: sans-serif#{$important}; @if $support-ie6 { _font-family: MS PGothic, sans-serif#{$important}; } } @else if $type == serif { font-family: serif#{$important}; @if $support-ie6 { _font-family: MS Mincho, serif#{$important}; } } @else if $type == meiryo { font-family: Meiryo, MS PGothic, sans-serif#{$important}; } @else if $type == monospace { font-family: monospace, serif#{$important}; @if $support-ie6 { _font-family: MS Gothic, monospace#{$important}; } } @else if $type == hiragino { font-family: Hiragino Kaku Gothic Pro, Meiryo, MS PGothic, sans-serif#{$important}; } @else if $type == verdana { font-family: Verdana, Arial, Helvetica, sans-serif#{$important}; } @else if $type == tahoma { font-family: Tahoma, Arial, Helvetica, sans-serif#{$important}; }}
  • ミックスインのコード@mixin font-family($type, $important: null) { @if ($important == important) or $important { $important: !important; } : } @else if $type == monospace { font-family: monospace, serif#{$important}; _font-family: MS Gothic, monospace#{$important}; } @else if $type == hiragino { font-family: Hiragino Kaku Gothic Pro, Meiryo, MS PGothic, sans-serif#{$important}; :}
  • タイプを指定する@include font-family(hiragino);@include font-family(monospace);@include font-family(**, important);!important宣言もしたい場合は、第2引数にimportantを。
  • 地味に便利…ですが、
  • ミックスインのコード@mixin font-family($type, $important: false) { @if $important == important or $important == true { $important: !important; } @else { $important: ; } @if $type == sans-serif { font-family: sans-serif#{$important}; ちょっと @if $support-ie6 { _font-family: MS PGothic, sans-serif#{$important}; } } @else if $type == serif { font-family: serif#{$important}; @if $support-ie6 { _font-family: MS Gothic, serif#{$important}; 失敗でした } } @else if $type == meiryo { font-family: Meiryo, MS PGothic, sans-serif#{$important}; } @else if $type == monospace { font-family: monospace#{$important}; @if $support-ie6 { _font-family: MS Gothic, monospace#{$important}; } } @else if $type == hiragino { font-family: Hiragino Kaku Gothic Pro, Meiryo, MS PGothic, sans-serif#{$important}; } @else if $type == verdana { font-family: Verdana, Arial, Helvetica, sans-serif#{$important}; } @else if $type == tahoma { font-family: Tahoma, Arial, Helvetica, sans-serif#{$important}; }}
  • 失敗だった理由IE6対応も隠せたし、便利は便利でした…が、他の人が別のフォントを追加しにくい…
  • 教訓1. ムリにCSSハックを 隠そうとしない2. 他の人がパターンを 追加するケースを考える
  • 解決策素直に変数を使う
  • 素直なコード$ff-hiragino: Hiragino Kaku Gothic Pro, Meiryo, MS PGothic, sans-serif !default;.sample { font-family: $ff-hiragino;}
  • 素直なコード$ff-monospace: monospace, serif !default;$ff-monospace-ie6: MS Gothic, monospace !default;.sample { font-family: $ff-monospace; _font-family: $ff-monospace-ie6;}
  • Font-family用の変数// # English$ff-arial: Arial, Helvetica, sans-serif !default; :// # Japanese$ff-meiryo : Meiryo, MS PGothic, sans-serif !default;$ff-hiragino: Hiragino Kaku Gothic Pro, Meiryo, MS PGothic, sans-serif !default; :// # Korean$font-dotum-escape: B3CBC6C0; // 돋움(dotum)$ff-dotum: #{$font-dotum-escape}, dotum, Arial, sans-serif !default;
  • 地味に便利ですね
  • 4. Placeholder Color
  • placeholderのコード 2 colons::-webkit-input-placeholder { color: red; }:-moz-placeholder { color: red; } 1 colon地味に違いがある。今後はIE10用にさらに1行追加…?
  • 毎回書くのはめんどう
  • ミックスインを使う@include placeholder-color(red);
  • コンパイル後のコード::-webkit-input-placeholder { color: red; }:-moz-placeholder { color: red; }
  • ミックスインのコード@mixin placeholder-color( $color, $selector: null) { #{$selector}::-webkit-input-placeholder { color: #{$color}; } #{$selector}:-moz-placeholder { color: #{$color}; }}
  • セレクタを指定するinput { @include placeholder-color(**, "&");}// コンパイル後のCSSinput::-webkit-input-placeholder {..}input:-moz-placeholder {..}親セレクタの参照の「&」を使う。
  • セレクタを指定する<input type="text" required placeholder="**">// SCSSinput { @include placeholder-color(**, "&:required");}// コンパイル後のCSSinput:required::-webkit-input-placeholder {..}input:required:-moz-placeholder {..}
  • セレクタを指定するinput { @include placeholder-color(#333, "&"); @include placeholder-color(blue, "&:required");}// コンパイル後のCSSinput::-webkit-input-placeholder {..}input::-moz-placeholder {..}input:required::-webkit-input-placeholder {..}input:required::-moz-placeholder {..}
  • 地味に便利ですね
  • @contentでより便利に
  • @contentを使う@mixin placeholder-color($color, $selector: null) { #{$selector}::-webkit-input-placeholder { color: #{$color}; @content; } #{$selector}:-moz-placeholder { color: #{$color}; }}input { @include placeholder-color(red) { background-color: blue; font-style: italic; }}{}を使ってコードブロックを記述して、@mixinに渡す。
  • @contentを使う@mixin placeholder-color($color, $selector: null) { #{$selector}::-webkit-input-placeholder { color: #{$color}; @content; } #{$selector}:-moz-placeholder { color: #{$color}; }}input { @include placeholder-color(red) { background-color: blue; font-style: italic; }}コードブロックを入れたい場所に@contentを書く。
  • 現時点ではFirefoxはcolor以外は効かないので@contentなし。@contentを使う@mixin placeholder-color($color, $selector: null) { #{$selector}::-webkit-input-placeholder { color: #{$color}; @content; } #{$selector}:-moz-placeholder { color: #{$color}; }}input { @include placeholder-color(red) { background-color: blue; font-style: italic; CSS }} input::-webkit-input-placeholder { color: red; background-color: blue; compiled font-style: italic; } input:-moz-placeholder { color: red; }
  • 地味に便利ですね
  • 5. Minor CSS Hacks
  • マイナーなCSS Hackの例button::-moz-focus-inner { border: 0; padding: 0;}これ、なんのハックだっけ…。
  • 調べるのはめんどう
  • ミックスインを使うbutton { @include hack-fx-remove-button-padding;}
  • ミックスインのコード// Firefoxでbutton要素に自動的に追加される余白を取り除く// http://www.aheadcreative.com/removing-unwanted-button-padding-in-firefox/@mixin hack-fx-remove-button-padding { &::-moz-focus-inner { padding: 0; border: 0; }}このハックがどんなものか、他の人や自分が探す手間が省ける。
  • 地味に助かりますね
  • ライブラリを作る手順
  • ライブラリを作る手順1. 毎回書くのが面倒なコードを見つける2. とりあえずミックスイン化する3. 引数でプロパティの値を 変更できるようにする4. 設定用の変数でコードを 出し分けられるようにする
  • ちゃんと使われるために• ドキュメントを用意する• 最初は説明会を開くと効果的
  • ドキュメントの内容• ファイルの一覧とその役割• 設定用変数の一覧とその役割• ミックスイン • 役割や引数の説明 • 使い方のサンプル(CSS to SCSS)
  • 作る時に気をつける点
  • グローバル変数とローカル変数$foo: 5px; // グローバル変数.sampleA { $bar: 10px; // ローカル変数}仕様にはありませんが、便宜上、こんな感じで…。
  • ローカル変数のスコープ.sampleA { $foo: 5px; $fooのスコープ margin: $foo; (使える範囲)}.sampleB { margin: $foo; // スコープ外 → エラー}
  • グローバル変数のスコープ$foo: 5px;.sampleA { margin: $foo; // -> 5px 宣言後は} どこでも 使える.sampleB { margin: $foo; // -> 5px}
  • グローバル変数と同名のローカル変数$foo: 5px;.sampleA { $foo: 10px; // グローバル変数の$fooを上書き margin: $foo; // -> 10px}.sampleB { margin: $foo; // -> こっちも 10px}
  • グローバル変数と同名のローカル変数.sampleA { $foo: 10px; margin: $foo; // -> 10px}$foo: 5px; // -> ここから先はグローバル変数?.sampleB { margin: $foo; // -> 5px}
  • おこるかもしれない問題ローカル変数と同名のグローバル変数を追加する・されると、出力結果が変わってしまう
  • 解決策ローカル変数の命名ルールをつくる
  • ローカル変数の命名ルール$foo: 5px;.sampleA { $_foo: 10px; // ローカル変数 margin: $_foo; // ローカル変数を使う}.sampleB { margin: $foo; // グローバル変数を使う}$_から始める。グローバル変数と被らなければ何でもいいです。
  • ミックスイン内のローカル変数$foo: 5px;@mixin sample { $_foo: 10px; margin: $_foo; // 意図的に $foo を上書き $foo: $_foo * 2;}@mixinや@function、ネストの中も同じルールで。
  • 例外@mixinの引数だけはグローバル変数と同名でも干渉しあわない
  • @mixinの引数とグローバル変数$foo: 5px;@mixin sample($foo:0) { // グローバル変数と同名の引数 $foo: 10px; // $foo を上書き margin: $foo; // -> 10px}div { @include sample; padding: $foo;}
  • @mixinの引数とグローバル変数$foo: 5px;@mixin sample($foo:0) { // グローバル変数と同名の引数 $foo: 10px; // $foo を上書き margin: $foo; // -> 10px}div { @include sample; padding: $foo; // -> ????px}marginは10px、paddingはどうなるのか。
  • @mixinの引数とグローバル変数$foo: 5px;@mixin sample($foo:0) { $foo: 10px; // $foo を上書き margin: $foo; // -> 10px}div { @include sample; padding: $foo; // -> 5px が出力される!}グローバル変数の$fooと@mixinの引数$fooは別物として処理。
  • 社内ライブラリを 作った結果
  • コストがかかりました…• 新規作成コスト• 検証コスト(品質保障)• 仕様変更対応コスト(CSS/Sass)
  • コストはかかりましたがいいこともあります!
  • いいこと 1コードを読み書きして理解が深まった➡ なので、よいコードが 書けるようになった(はず)
  • いいこと 2自社用に特化したコードや得たノウハウを共有できた➡ チーム全員の作業効率も上がった
  • いいこと 3電子書籍を出せました!(注:書店にはありません) ➡ 『Sass入門』 ➡ Sass 3.2の機能について 追加執筆予定
  • ただ、オススメするのは…1. Compassを導入(初期コスト減)2. その中で必要なものだけ使う3. 問題があるところは、 ムリに使わないか、自作して解決する
  • Compassを使いつつ、自作ライブラリを育てよう!
  • ありがとうございました