実践Sass 後編
•Transferir como ZIP, PDF•
64 gostaram•7,303 visualizações
HTML5 Conference 2012 で使用したスライドです。 前編のスライドはこちらです。 http://www.slideshare.net/azusatomita3/sass-14212266
Recomendados
Mais conteúdo relacionado
Mais procurados
Destaque
Destaque (20)
Semelhante a 実践Sass 後編
Semelhante a 実践Sass 後編 (20)
実践Sass 後編
- 1. 実践Sass 後編
- 2. $company: NHN Japan $twitter: @kosei27 $website: www.culture27.com
- 3. • 後編はライブラリを つくる側の視点でお話します • ライブラリ ≒ ちょっと便利なミックスインや 関数が集まったパーシャルファイル
- 4. Agenda 1. 社内ライブラリを作った理由 2. 社内ライブラリの管理 3. 社内ライブラリの中身 4. 社内ライブラリを作った結果
- 8. でも、、 • CSSの新しい構文に一部未対応だった • 一部ミックスインの引数が多かった • 不要なベンダープリフィックスが出てた ※今はかなり改善されているようです
- 9. あと、 • ミックスインや関数の サンプルコードやデモが少なかった • 外部に依存するのはまだ避けたかった ※今もサンプルコードやデモは少ない…
- 10. それに、、 • 自社用に特化したものが欲しい • 自分で書いてみた方が勉強になる • なので、とりあえず作ってみたい
- 11. 作ってみました
- 12. 社内ライブラリの管理
- 13. sass @mixin _setting.scss @function _utility.scss style.scss
- 14. sass @mixin _setting.scss @function _utility.scss style.scss @import
- 15. sass @mixin _setting.scss @function _utility.scss style.scss @import style2.scss 他のファイルも同様にして、どこでも使えるように。
- 16. もっと細かいことはこちら… NAVERでのSassの使い方 « NAVER Engineers' Blog http://tech.naver.jp/blog/?p=1027
- 17. 社内ライブラリの中身
- 19. いくつか紹介します 1. inline-block 2. Link Underline 3. font-family 4. Placeholder Color 5. Minor CSS Hacks
- 21. 1. inline-block
- 22. display: inline-block; .sample { display: inline-block; *display: inline; *zoom: 1; }
- 23. 毎回書くのはめんどう
- 24. display: inline-block;のミックスイン @mixin inline-block { display: inline-block; *display: inline; *zoom: 1; }
- 25. ミックスインを使う @mixin inline-block { display: inline-block; *display: inline; *zoom: 1; } .sample { @include inline-block; }
- 26. 地味に便利ですね
- 27. 問題: IE6/7対応が不要になった時 .sample { display: inline-block; *display: inline; *zoom: 1; } 無駄なコードが出たままに…。
- 28. 問題: IE6/7対応が不要になった時 @mixin inline-block { display: inline-block; *display: inline; *zoom: 1; } delete?
- 29. 削除した場合の問題点 • 別プロジェクトのライブラリと 差ができてしまう • 後でやっぱりIE6/7対応が 必要になった時に面倒
- 31. 変数でコードを出し分ける $support-ie6: false !default; $support-ie7: false !default; これはIE6/7対応が不要な場合。
- 32. variables for settings sass _setting.scss _utility.scss style.scss @import プロジェクト全体の設定用なので、どこでも使えるように。
- 33. ほか、設定用の変数 // 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; これらを使ってコードの出し分けをします。
- 34. 変数でコードを出し分ける @mixin inline-block { display: inline-block; @if $support-ie6 or $support-ie7 { *display: inline; *zoom: 1; } } 2つの変数のどちらかがtrueであればIE用のコードが出ます。
- 35. 変数でコードを出し分ける // _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にしてコンパイルするだけ。
- 36. より地味に便利ですね
- 39. 下線 あり→なし パターン .link { ! ! &:link, ! ! &:visited { text-decoration: underline; } ! ! &:hover, ! ! &:active, ! ! &:focus { text-decoration: none; } }
- 40. 毎回書くのはめんどう
- 41. ミックスインを使う .link { @include link-underline(line-to-none); }
- 42. ミックスインのコード @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.なし→なし }
- 43. タイプを指定する @include link-underline(line-to-none); @include link-underline(line); @include link-underline(none-to-line); @include link-underline(none);
- 44. 地味に便利ですね
- 45. 3. font-family
- 46. font-familyのコード font-family: 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif; font-family: Verdana, Arial, Helvetica, sans-serif; 組み合わせは他にも沢山。
- 47. font-familyのコード font-family: monospace, serif; for WebKit // For IE6 _font-family: 'MS Gothic', monospace; underscore hack CSSハックを使わないといけないケースも。
- 48. 毎回書くのはめんどう
- 49. ミックスインのコード @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}; } }
- 50. ミックスインのコード @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}; : }
- 51. タイプを指定する @include font-family(hiragino); @include font-family(monospace); @include font-family(**, important); !important宣言もしたい場合は、第2引数にimportantを。
- 52. 地味に便利…ですが、
- 53. ミックスインのコード @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}; } }
- 55. 教訓 1. ムリにCSSハックを 隠そうとしない 2. 他の人がパターンを 追加するケースを考える
- 56. 解決策 素直に変数を使う
- 57. 素直なコード $ff-hiragino: 'Hiragino Kaku Gothic Pro', Meiryo, 'MS PGothic', sans-serif !default; .sample { font-family: $ff-hiragino; }
- 58. 素直なコード $ff-monospace: monospace, serif !default; $ff-monospace-ie6: 'MS Gothic', monospace !default; .sample { font-family: $ff-monospace; _font-family: $ff-monospace-ie6; }
- 59. 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;
- 60. 地味に便利ですね
- 62. placeholderのコード 2 colons ::-webkit-input-placeholder { color: red; } :-moz-placeholder { color: red; } 1 colon 地味に違いがある。今後はIE10用にさらに1行追加…？
- 63. 毎回書くのはめんどう
- 65. コンパイル後のコード ::-webkit-input-placeholder { color: red; } :-moz-placeholder { color: red; }
- 66. ミックスインのコード @mixin placeholder-color( $color, $selector: null ) { #{$selector}::-webkit-input-placeholder { color: #{$color}; } #{$selector}:-moz-placeholder { color: #{$color}; } }
- 67. セレクタを指定する input { @include placeholder-color(**, "&"); } // コンパイル後のCSS input::-webkit-input-placeholder {..} input:-moz-placeholder {..} 親セレクタの参照の「&」を使う。
- 68. セレクタを指定する <input type="text" required placeholder="**"> // SCSS input { @include placeholder-color(**, "&:required"); } // コンパイル後のCSS input:required::-webkit-input-placeholder {..} input:required:-moz-placeholder {..}
- 69. セレクタを指定する input { @include placeholder-color(#333, "&"); @include placeholder-color(blue, "&:required"); } // コンパイル後のCSS input::-webkit-input-placeholder {..} input::-moz-placeholder {..} input:required::-webkit-input-placeholder {..} input:required::-moz-placeholder {..}
- 70. 地味に便利ですね
- 71. @contentでより便利に
- 72. @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に渡す。
- 73. @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を書く。
- 74. 現時点では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; }
- 75. 地味に便利ですね
- 76. 5. Minor CSS Hacks
- 77. マイナーなCSS Hackの例 button::-moz-focus-inner { border: 0; padding: 0; } これ、なんのハックだっけ…。
- 78. 調べるのはめんどう
- 79. ミックスインを使う button { @include hack-fx-remove-button-padding; }
- 80. ミックスインのコード // 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; } } このハックがどんなものか、他の人や自分が探す手間が省ける。
- 81. 地味に助かりますね
- 82. ライブラリを作る手順
- 83. ライブラリを作る手順 1. 毎回書くのが面倒なコードを見つける 2. とりあえずミックスイン化する 3. 引数でプロパティの値を 変更できるようにする 4. 設定用の変数でコードを 出し分けられるようにする
- 85. ドキュメントの内容 • ファイルの一覧とその役割 • 設定用変数の一覧とその役割 • ミックスイン • 役割や引数の説明 • 使い方のサンプル(CSS to SCSS)
- 86. 作る時に気をつける点
- 87. グローバル変数とローカル変数 $foo: 5px; // グローバル変数 .sampleA { $bar: 10px; // ローカル変数 } 仕様にはありませんが、便宜上、こんな感じで…。
- 88. ローカル変数のスコープ .sampleA { $foo: 5px; $fooのスコープ margin: $foo; （使える範囲） } .sampleB { margin: $foo; // スコープ外 → エラー }
- 89. グローバル変数のスコープ $foo: 5px; .sampleA { margin: $foo; // -> 5px 宣言後は } どこでも 使える .sampleB { margin: $foo; // -> 5px }
- 90. グローバル変数と同名のローカル変数 $foo: 5px; .sampleA { $foo: 10px; // グローバル変数の$fooを上書き margin: $foo; // -> 10px } .sampleB { margin: $foo; // -> こっちも 10px }
- 91. グローバル変数と同名のローカル変数 .sampleA { $foo: 10px; margin: $foo; // -> 10px } $foo: 5px; // -> ここから先はグローバル変数？ .sampleB { margin: $foo; // -> 5px }
- 94. ローカル変数の命名ルール $foo: 5px; .sampleA { $_foo: 10px; // ローカル変数 margin: $_foo; // ローカル変数を使う } .sampleB { margin: $foo; // グローバル変数を使う } $_から始める。グローバル変数と被らなければ何でもいいです。
- 95. ミックスイン内のローカル変数 $foo: 5px; @mixin sample { $_foo: 10px; margin: $_foo; // 意図的に $foo を上書き $foo: $_foo * 2; } @mixinや@function、ネストの中も同じルールで。
- 97. @mixinの引数とグローバル変数 $foo: 5px; @mixin sample($foo:0) { // グローバル変数と同名の引数 $foo: 10px; // $foo を上書き margin: $foo; // -> 10px } div { @include sample; padding: $foo; }
- 98. @mixinの引数とグローバル変数 $foo: 5px; @mixin sample($foo:0) { // グローバル変数と同名の引数 $foo: 10px; // $foo を上書き margin: $foo; // -> 10px } div { @include sample; padding: $foo; // -> ????px } marginは10px、paddingはどうなるのか。
- 99. @mixinの引数とグローバル変数 $foo: 5px; @mixin sample($foo:0) { $foo: 10px; // $foo を上書き margin: $foo; // -> 10px } div { @include sample; padding: $foo; // -> 5px が出力される！ } グローバル変数の$fooと@mixinの引数$fooは別物として処理。
- 100. 社内ライブラリを 作った結果
- 101. コストがかかりました… • 新規作成コスト • 検証コスト（品質保障） • 仕様変更対応コスト(CSS/Sass)
- 103. いいこと 1 コードを読み書きして 理解が深まった ➡ なので、よいコードが 書けるようになった（はず）
- 105. いいこと 3 電子書籍を出せました！ （注：書店にはありません） ➡ 『Sass入門』 ➡ Sass 3.2の機能について 追加執筆予定
- 106. ただ、オススメするのは… 1. Compassを導入（初期コスト減） 2. その中で必要なものだけ使う 3. 問題があるところは、 ムリに使わないか、自作して解決する
- 108. ありがとうございました
Notas do Editor
- \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