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.

Browser syncとsassと私

788 views

Published on

BrowserSyncとSassについて

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Browser syncとsassと私

  1. 1. BrowserSyncとSassと私
  2. 2. @uehaso 上原 恵介 2008年:都内でWebデザイナーとして勤務。 2013年:広島に帰省。 2014年:バウハウスにフロント・エンジニア として参加。
  3. 3. Web活用の提案 バウハウスでは UI設計 デザイン HTML・CSS Javascript CMS
  4. 4. Web活用の提案 上原担当 UI設計 デザイン HTML・CSS Javascript CMS
  5. 5. 目次 01 BrowserSync 02 Sass(SCSS) 03 まとめ
  6. 6. 01BrowserSync
  7. 7. BrowserSyncとは
  8. 8. 端末ごとのブラウザを同期
  9. 9. 端末ごとのブラウザを同期?
  10. 10. 実演
  11. 11. 作業効率が超アップ!
  12. 12. • Node.jsで動くパッケージ • WindowsでもMacでも動く • その他のツールとも連携できる
  13. 13. 02 Sass(SCSS)
  14. 14. そもそもSassって?
  15. 15. 便利なCSS
  16. 16. CSSで面倒だと思ってたことが
  17. 17. ほぼ、解決できる!
  18. 18. Sass(SCSS)の使い方
  19. 19. Sass(SCSS)ファイル 変換 .sass .scss .css 準備 出力 CSSファイル
  20. 20. 変換
  21. 21. 変換ツールについて Koala Prepros
  22. 22. 記法について
  23. 23. 書き方は2種類!
  24. 24. Sass記法
  25. 25. .demo  width: 100px  text-align: center
  26. 26. .demo {  width: 100px ;  text-align: center ; }
  27. 27. SCSS記法
  28. 28. .demo {  width: 100px;  text-align: center;   h1 {   text-align: center;   } }
  29. 29. 基本的な機能について
  30. 30. ミックスイン セレクタの継承 変数ネスト(入れ子)
  31. 31. ネスト(入れ子)
  32. 32. .demo { width: 100px; h1 {  text-align: center; } }
  33. 33. .demo {  width: 100px; } .demo h1 {  text-align: center; }
  34. 34. a{ text-decoration: none; &:hover { text-decoration: underline; } }
  35. 35. a { text-decoration: none; } a:hover { text-decoration: underline; }
  36. 36. 変数
  37. 37. $default-font-color : red; .demo { color: $default-font-color; h1 { color: $default-font-color; } }
  38. 38. .demo {  color: red; } .demo h1 {  color: red; }
  39. 39. ミックスイン
  40. 40. @mixin mp10 {  margin: 10px;  padding: 10px; }
  41. 41. .demo {  @include mp10;  color: red; }
  42. 42. .demo {  margin: 10px;  padding: 10px;  color: red; }
  43. 43. セレクタの継承
  44. 44. .demo {  color: red;  text-align: center; } .demo-01 {  @extend .demo; }
  45. 45. .demo, .demo-01 {  color: red;  text-align: center; }
  46. 46. .demo {   color: red;   text-align: center; } .demo-01 {   @extend .demo;   text-align: left; }
  47. 47. .demo, .demo-01 {   color: red;   text-align: center; } .demo-01 {   text-align: left; }
  48. 48. 導入のポイントについて
  49. 49. CSSファイルは触らない
  50. 50. ネストが深くならないように
  51. 51. .demo { color: red; text-align: center; .demoBox { text-align: left; .demoTitle { font-size: 100px; .demoPic { text-align: center; } } } }
  52. 52. 参考になった書籍
  53. 53. 助かりました。
  54. 54. 03 まとめ
  55. 55. • BrowserSyncって超便利! • Sass(SCSS)をまだ使ってない人は
 一刻も早く導入しよう!
  56. 56. 質疑応答
  57. 57. ご静聴ありがとうございました。

×