骋谤耻苍迟でフロントの生产性耻辫
- 2. 近况
- 4. ? 1ゲーム10分程度で終わる手軽さ。 ? プロトーナメントがあるほどの人気。 ? ほとんどのプラットフォーム版あり。 HearthStoneにハマる。
- 5. 骋谤耻苍迟とは
- 7. なぜ骋谤耻苍迟を使うのか
- 10. 生産性高めないと 死ぬ！
- 12. SASS
- 14. CSS .hoge { ～～～ } .hoge p { ～～～ } .hoge .head { ～～～ } .hoge .head a { ～～～ } .hoge .title a { ～～～ } クラス「hoge」内の? スタイルの定義
- 15. SASSのネスト記法 .hoge { ～～～ p {～～～} .head { ～～～ a {～～～} } .title a {～～～} }
- 16. SASSのネスト記法 .hoge { ～～～ p {～～～} .head { ～～～ a {～～～} } .title a {～～～} } 親元のクラスに ネストして記述できる。 ! 記述量が減る。
- 17. SASSのネスト記法 .hoge-hoge { ～～～ p {～～～} .head { ～～～ a {～～～} } .title a {～～～} } クラス名を変えても 一箇所の変更で済む。
- 18. 変数が使える $main-color: #f00; $sub-color: #0f0; $font-size: 12px; ! .hoge { color: $main-color; } .poge { color: $sub-color; font-size: $font-size; } 変数を設定しておいて… 値を使いまわせる。
- 19. mixin @mixin circle { border-radius: 50%; width: 100px; } ! .hoge { @include circle; background: #f00; } 関数のように スタイルを定義して… 内容を使いまわせる。
- 20. mixinに引数 @mixin circle($size) { border-radius: 50%; width: $size; height: $size; } ! .hoge { @include circle(50px); background: #f00; } 引数の設定もできる。
- 22. パフォーマンス改善
- 24. コードの圧縮 .hoge { ～～～ } .hoge p { ～～～ } .hoge .head { ～～～ } .hoge .head a { ～～～ } .hoge .title a { ～～～ } .hoge {～～～}.hoge p {～ ～～}.hoge .head {～～ ～}.hoge .head a {～～～} .hoge .title a {～～～}
- 30. 骋谤耻苍迟オススメします。
- 32. ご静聴 ありがとうございました。