Your SlideShare is downloading. ×
WebデザイナーのためのSass/Compass入門
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

WebデザイナーのためのSass/Compass入門

770
views

Published on

HTML/CSSコーディングを取り巻くWeb開発環境は日々進化しています。Sass/LESS/StylusなどのCSSプリプロセッサと呼ばれるCSSをより便利に速く記述できるフレームワークが登場し、Webデザイナーにもプログラミング的な知識を求められるようになってきました。 …

HTML/CSSコーディングを取り巻くWeb開発環境は日々進化しています。Sass/LESS/StylusなどのCSSプリプロセッサと呼ばれるCSSをより便利に速く記述できるフレームワークが登場し、Webデザイナーにもプログラミング的な知識を求められるようになってきました。

この授業ではその中でもSassとその拡張フレームワークであるCompassを取り上げて解説します。Sass/Compassを使えば、面倒な記述、タイピングを少なくすることができ、コーディング速度を高めることができます。また、急なデザイン仕様の変更にも変数や継承と言ったSassの機能を使えば柔軟に対応することができます。

ただSassを使用するにあたって、いわゆる『黒い画面』、ターミナルを使って通常のCSSにコンパイル(変換)する作業を伴ったり、変数、ミックスイン、継承といったプログラミング的な概念も必要になってきます。

なにごとも新しいものを取り入れることは苦労を伴いますが、私自身、転職を機にWebデザイナーからWebデベロッパーに職種が変わりました。その時に戸惑いながらも自分なりのペースでSass/Compassを導入していった経験をこの授業を通して共有できれば幸いです。

Published in: Design, Technology

0 Comments
10 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
770
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
7
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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