WebデザイナーのためのSass/Compass入門 先生:石本 光司

16,941 views

Published on

ーーーーーーーーーーーーーーーーーーーーーーー
schoo WEB-campusは「WEBに誕生した、学校の新しいカタチ」。
WEB生放送の授業を無料で配信しています。
▼こちらから授業に参加すると、先生への質問や、ユーザーとのチャット、資料の拡大表示等が可能です。
https://schoo.jp/class/228/room
ーーーーーーーーーーーーーーーーーーーーーーー

Published in: Business, Technology, Design
0 Comments
63 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
16,941
On SlideShare
0
From Embeds
0
Number of Embeds
4,593
Actions
Shares
0
Downloads
0
Comments
0
Likes
63
Embeds 0
No embeds

No notes for slide

WebデザイナーのためのSass/Compass入門 先生:石本 光司

  1. 1. Introduction to Sass/Compass for Web Designer Webデザイナーのための Sass/Compass 入門 Ameba Headquarters Game Division Web Developer Koji Ishimoto 2013.09.27
  2. 2. @t32k
  3. 3. Web Designer Design, HTML/CSS
  4. 4. Web Director Direction, Google Analytics Web Designer Design, HTML/CSS
  5. 5. Web Developer Development, HTML/CSS/JavaScript Web Director Direction, Google Analytics Web Designer Design, HTML/CSS
  6. 6. <- イマココ 2012/06 ~ Web Developer Development, HTML/CSS/JavaScript Web Director Direction, Google Analytics Web Designer Design, HTML/CSS
  7. 7. Agenda なぜSassを使うのか? 開発環境の構築 Sass/Compassの機能 まとめ 質疑応答
  8. 8. なぜSassを使うのか?
  9. 9. Sass makes CSS fun again. Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more.
  10. 10. *.scss *.sass *.cssSass Compiler
  11. 11. *.scss *.sass *.cssSass Compiler 便利なSass
  12. 12. *.scss *.sass *.cssSass Compiler 便利なSass 普通のCSS
  13. 13. 無理して使う必要はない
  14. 14. 学習コストの増加
  15. 15. 学習コストの増加 開発環境の不一致
  16. 16. 学習コストの増加 開発環境の不一致 コードの肥大化
  17. 17. Sassをキッカケに エンジニア文化を知る
  18. 18. Front-end Engineer HTML JavaScript DesignerCSS
  19. 19. Front-end Engineer JavaScript DesignerCSS
  20. 20. Front-end Engineer JavaScript Designer
  21. 21. Front-end Engineer Designer
  22. 22. Terminal Command Prompt
  23. 23. 黒い画面を日常的に使っている人
  24. 24. Sass使いたいヽ(´ー`)ノ
  25. 25. Sass使いたいヽ(´ー`)ノ 黒い画面こわい(´Д⊂ヽ
  26. 26. Sass使いたいヽ(´ー`)ノ 黒い画面こわい(´Д⊂ヽ GUIアプリ使う(・∀・)
  27. 27. Sass使いたいヽ(´ー`)ノ 黒い画面こわい(´Д⊂ヽ GUIアプリ使う(・∀・) なんか違う、黒い画面使う(;´Д`)
  28. 28. Sass使いたいヽ(´ー`)ノ 黒い画面こわい(´Д⊂ヽ GUIアプリ使う(・∀・) なんか違う、黒い画面使う(;´Д`) ほかの場面でも使う(・`ω・´)
  29. 29. Sass使いたいヽ(´ー`)ノ 黒い画面こわい(´Д⊂ヽ GUIアプリ使う(・∀・) なんか違う、黒い画面使う(;´Д`) ほかの場面でも使う(・`ω・´) 黒い画面最高 \(^o^)/
  30. 30. https://github.com/t32k/maple
  31. 31. スプライト画像の生成 スタイルガイドの生成 Webフォントの生成 静的サーバー起動 ライブリロード 画像の最適化 CSSの縮小化 CSSのリント CSSプロパティのソート Sass/Compassのコンパイル プロジェクトのスキャフォー ルディング
  32. 32. Demo
  33. 33. エンジニアは怠け者
  34. 34. だが、それがいい!
  35. 35. 開発環境の構築
  36. 36. 必要なもの テキストエディタ Sassコンパイラ
  37. 37. 好きなエディタって何ですか?
  38. 38. http://www.sublimetext.com/
  39. 39. https://github.com/t32k/Sublime-Text-2-Icon/tree/moreskine
  40. 40. Terminal
  41. 41. Terminal
  42. 42. Prepros
  43. 43. http://alphapixels.com/prepros/
  44. 44. Demo
  45. 45. http://sassmeister.com/
  46. 46. 自分に合ったスタイルで 無理せず導入する
  47. 47. Sass/Compassの機能
  48. 48. 変数
  49. 49. 変数 ミックスイン
  50. 50. 変数 ネスト ミックスイン
  51. 51. 変数 継承ネスト ミックスイン
  52. 52. 変数 継承ネスト ミックスイン +
  53. 53. 拡張フレームワーク Compass
  54. 54. http://compass-style.org/
  55. 55. @import "compass"; Sass
  56. 56. @import "compass"; 読み込みます! Sass
  57. 57. 何のファイルを? @import "compass"; 読み込みます! Sass
  58. 58. Prepros
  59. 59. Prepros
  60. 60. 変数 Variables $
  61. 61. $hensu: #ffffff; Sass
  62. 62. $hensu: #ffffff; 変数の接頭辞 Sass
  63. 63. $hensu: #ffffff; 変数の接頭辞 変数名 Sass
  64. 64. $hensu: #ffffff; 変数の接頭辞 変数名 値 Sass
  65. 65. // Comment $main-color: #cc0000; $space: 10px; .global-header { background-color: $main-color; } .module { margin: $space * 2; padding: $space / 2; } Sass
  66. 66. CSS .global-header { background-color: #cc0000; } .module { margin: 20px; padding: 5px; }
  67. 67. Variables 変数を一元管理して使用すれば スタイルに一貫性があり修正に強いサイトができる 変数
  68. 68. ネスト Nesting { }
  69. 69. .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } Sass
  70. 70. .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } 入れ子 Sass
  71. 71. .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } 入れ子 入れ子の入れ子 Sass
  72. 72. .oya { color: #000; .kodomo { color: #111; .mago { color: #222; } } } 入れ子 入れ子の入れ子 入れ子の入れ子の Sass
  73. 73. .oya { color: #000; } .oya .kodomo { color: #111; } .oya .kodomo .mago { color: #222; } CSS
  74. 74. .oya { color: #000; } .oya .kodomo { color: #111; } .oya .kodomo .mago { color: #222; } 親のセレクタも適用 CSS
  75. 75. .oya { color: #000; } .oya .kodomo { color: #111; } .oya .kodomo .mago { color: #222; } 親のセレクタも適用 親のセレクタも適用 CSS
  76. 76. .login-module { padding: 10px; .headline { font: { family: bold; size: 18px; } } .sentence { color: #666; } } Sass
  77. 77. .login-module { padding: 10px; .headline { font: { family: bold; size: 18px; } } .sentence { color: #666; } } プロパティの ネストも可能 Sass
  78. 78. .login-module { padding: 10px; } .login-module .headline { font-family: bold; font-size: 18px; } .login-module .sentence { color: #666; } CSS
  79. 79. Nesting モジュール単位でCSSを管理する 3階層以上ネストしてはいけない ネスト
  80. 80. ミックスイン Mixins @mixin @include
  81. 81. @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } Sass
  82. 82. @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスインの定義 Sass
  83. 83. @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスイン名ミックスインの定義 Sass
  84. 84. @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスイン名ミックスインの定義 引数 Sass
  85. 85. @mixin marumi($hankei) { -moz-border-radius: $hankei; -webkit-border-radius: $hankei; border-radius: $hankei; } .box { border: 1px #000 solid; @include marumi(4px); } ミックスイン名ミックスインの定義 引数 ミックスインの呼び出し Sass
  86. 86. .box { border: 1px #000 solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } CSS
  87. 87. .box { border: 1px #000 solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } ミックスインが展開された部分 CSS
  88. 88. .marui-marui { @include border-radius(4px); } Sass
  89. 89. .marui-marui { -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; } CSS
  90. 90. Mixins 最初からミックスインを作ろうとは思わない Compassのミックスインを研究してみる ミックスイン
  91. 91. 継承 Selector Inheritance @extend
  92. 92. @extend .keishooo; Sass
  93. 93. 継承します! @extend .keishooo; Sass
  94. 94. 何のセレクタを?継承します! @extend .keishooo; Sass
  95. 95. .message-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold; } .alert-box { @extend .message-box; border: 1px red solid; color: red; } Sass
  96. 96. .message-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold; } .alert-box { @extend .message-box; border: 1px red solid; color: red; } Sass 継承元を指定
  97. 97. .message-box, .alert-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold; } .alert-box { border: 1px red solid; color: red; } CSS
  98. 98. .message-box, .alert-box { padding: 5px 10px; border: 1px black solid; font-size: 14px; font-weight: bold; } .alert-box { border: 1px red solid; color: red; } CSS継承したセレクタ
  99. 99. Selector Inheritance モジュール単位でうまく継承できれば コードを格段に削減することができる 継承
  100. 100. 基本の機能を ちゃんと理解する
  101. 101. まとめ
  102. 102. 最初から スゴイことはできない
  103. 103. 基本の積み重ねが 応用になる
  104. 104. “その時”が来てからでは遅い 先行者はずっと先にいる
  105. 105. 両方できるとカッコイイ (*´ω`*)
  106. 106. 次のステップのために
  107. 107. https://github.com/enja-oss/Sass
  108. 108. http://book.scss.jp/
  109. 109. http://prog4designer.github.io/
  110. 110. Thank you! t32k@t32kkoji.ishimotoToday's latte, Sass. | Flickr by yukop
  111. 111. 宿題 SassMeisterで今日勉強した Sass/Compassの機能を実際に使ってみよう。 http://sassmeister.com/
  112. 112. Photo Credit http://www.flickr.com/photos/eneas/2522135992/ http://www.flickr.com/photos/morch/3427998257/ http://www.flickr.com/photos/alper/9311087323/ http://www.flickr.com/photos/krakow81/287771868/ http://www.flickr.com/photos/39463459@N08/3678526285/ http://www.flickr.com/photos/eurich/6959899839/ http://www.flickr.com/photos/burningredstudio/5080766621/
  113. 113. 質疑応答 t32k@t32kkoji.ishimoto

×