北海道は旭川で開催された【ゆるい勉強会】で話したスライド

1. pugやsassを使って高速コ
ーディングをしてみた話

2. 自己紹介

3. 自己紹介
• 上田 和広 32歳
• マークアップエンジニア(html/css)
• 福岡出身/福岡育ち
• one push代表

4. 福岡ってどこよ？

8. PUGやSASS使ってますか？

9. PUGとは

10. PUGとは

11. PUGとは
HTMLを簡略化して
書くことが出来るテンプレートエンジン

12. PUGで出来ること
• htmlの開始・閉じタグがいらない
• パーツごとに共通部分を分割できる（インクルード）
• 変数等が使える

13. PUGとは
似たようなものに
MarkdownやSASSなど
Markdown SASS

14. 従来のコーディング
htmlコーディング →

15. 従来のコーディング
htmlコーディング → emmet等のコード補完がメイン

16. 従来のコーディング
htmlコーディング → emmet等のコード補完がメイン
htmlコーディング → PUG

17. 従来のCSSコーディン
グ
CSSコーディング →

18. 従来のCSSコーディン
グ
CSSコーディング → emmet等のコード補完がメイン

19. 従来のCSSコーディン
グ
CSSコーディング → emmet等のコード補完がメイン
CSSコーディング → SASS

20. PUGのメリット

21. PUGのメリット
• 書くコード量が減る

22. PUGのメリット
• 書くコード量が減る
• メンテナンス（修正）がやりやすくなる

23. PUGのメリット
• 書くコード量が減る
• メンテナンス（修正）がやりやすくなる
• コードを書くのが早くなる

24. PUGのメリット
• 書くコード量が減る
• メンテナンス（修正）がやりやすくなる
• コードを書くのが早くなる
• プログラム的な書き方ができる

25. PUGのデモ
Letts、DEMO

26. SASSとは

27. SASSとは
PUGのCSS版
CSSを簡略化出来るスーパーなCSS

28. SASSとは
拡張子は2種類

29. SASSとは
拡張子は2種類
.SCSS

30. SASSとは
拡張子は2種類
.SCSS .SASS

31. SASSとは
どちらを選べばいいの？

32. SASSとは
.SCSS .SASS

33. SASSとは
.SCSS .SASS
従来のCSSに近い
書き方ができる

34. SASSとは
.SCSS .SASS
従来のCSSに近い
書き方ができる

35. SASSとは
.SCSS .SASS
従来のCSSに近い
書き方ができる
より簡潔に
書ける

36. SASSのデモ
Letts、DEMO

37. デメリットもある

38. デメリットもある
SCSSの場合
SASSの場合

39. デメリットもある
SCSSの場合
SASSの場合
導入までのハードルが高め
入れ子が複雑になりがち
(ネスト)

40. デメリットもある
SCSSの場合
SASSの場合 導入までのハードルが高め
独特の記法
導入までのハードルが高め
入れ子が複雑になりがち
(ネスト)

41. で、結局どっちがいいの？

42. で、結局どっちがいいの？
コードを書く、アナタ次第ヽ(´∀｀)９ ﾋﾞｼ!!

43. pugとsassをコンパイルする

44. pugとsassをコンパイルする
ファイルを作っただけではダメ

45. pugとsassをコンパイルする
.pugや.sass(scss)

46. pugとsassをコンパイルする
.pugや.sass(scss)
.htmlや.cssに

47. pugとsassをコンパイルする
どうやるの？

48. pugとsassをコンパイルする
黒い画面でコンパイル可能

49. pugとsassをコンパイルする
黒い画面でコンパイル可能

50. pugとsassをコンパイルする
GUIコンパイラ使っちゃえ

51. pugとsassをコンパイルする

52. pugとsassをコンパイルする

53. pugとsassをコンパイルする
prepros
(プリプロス)

54. pugとsassをコンパイルする
コンパイルやってみます

55. 便利に使って
よりよいコーディングライフを！

56. ご清聴ありがとうございました。

57. @masyu21
kazuhiro.ueda.31