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

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

14. 無理して使う必要はない

15. 学習コストの増加

16. 学習コストの増加
開発環境の不一致

17. 学習コストの増加
開発環境の不一致
コードの肥大化

18. Sassをキッカケに
エンジニア文化を知る

19. Front-end
Engineer
HTML
JavaScript
DesignerCSS

20. Front-end
Engineer
JavaScript
DesignerCSS

21. Front-end
Engineer
JavaScript
Designer

22. Front-end
Engineer Designer

23. Terminal
Command Prompt

24. 黒い画面を日常的に使っている人

25. Sass使いたいヽ(´ー｀)ノ

26. Sass使いたいヽ(´ー｀)ノ
黒い画面こわい(´Д⊂ヽ

27. Sass使いたいヽ(´ー｀)ノ
黒い画面こわい(´Д⊂ヽ
GUIアプリ使う(・∀・)

28. Sass使いたいヽ(´ー｀)ノ
黒い画面こわい(´Д⊂ヽ
GUIアプリ使う(・∀・)
なんか違う、黒い画面使う(；´Д｀)

29. Sass使いたいヽ(´ー｀)ノ
黒い画面こわい(´Д⊂ヽ
GUIアプリ使う(・∀・)
なんか違う、黒い画面使う(；´Д｀)
ほかの場面でも使う(･`ω･´)

30. Sass使いたいヽ(´ー｀)ノ
黒い画面こわい(´Д⊂ヽ
GUIアプリ使う(・∀・)
なんか違う、黒い画面使う(；´Д｀)
ほかの場面でも使う(･`ω･´)
黒い画面最高 ＼(^o^)／

31. https://github.com/t32k/maple

32. スプライト画像の生成
スタイルガイドの生成
Webフォントの生成
静的サーバー起動
ライブリロード
画像の最適化
CSSの縮小化
CSSのリント
CSSプロパティのソート
Sass/Compassのコンパイル
プロジェクトのスキャフォー
ルディング

33. Demo

34. エンジニアは怠け者

35. だが、それがいい！

36. 開発環境の構築

37. 必要なもの
テキストエディタ
Sassコンパイラ

38. 好きなエディタって何ですか？

39. http://www.sublimetext.com/

40. https://github.com/t32k/Sublime-Text-2-Icon/tree/moreskine

41. Terminal

42. Terminal

43. Prepros

44. http://alphapixels.com/prepros/

45. Demo

46. http://sassmeister.com/

47. 自分に合ったスタイルで
無理せず導入する

48. Sass/Compassの機能

50. 変数

51. 変数 ミックスイン

52. 変数
ネスト
ミックスイン

53. 変数
継承ネスト
ミックスイン

54. 変数
継承ネスト
ミックスイン
+

55. 拡張フレームワーク
Compass

56. http://compass-style.org/

57. @import "compass";
Sass

58. @import "compass";
読み込みます！
Sass

59. 何のファイルを？
@import "compass";
読み込みます！
Sass

60. Prepros

61. Prepros

62. 変数
Variables
＄

63. $hensu: #ffffff;
Sass

64. $hensu: #ffffff;
変数の接頭辞
Sass

65. $hensu: #ffffff;
変数の接頭辞
変数名
Sass

66. $hensu: #ffffff;
変数の接頭辞
変数名
値
Sass

67. // Comment
$main-color: #cc0000;
$space: 10px;
.global-header {
background-color: $main-color;
}
.module {
margin: $space * 2;
padding: $space / 2;
}
Sass

68. CSS
.global-header {
background-color: #cc0000;
}
.module {
margin: 20px;
padding: 5px;
}

69. Variables
変数を一元管理して使用すれば
スタイルに一貫性があり修正に強いサイトができる
変数

70. ネスト
Nesting
｛ ｝

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;
.kodomo {
color: #111;
.mago {
color: #222;
}
}
}
入れ子
入れ子の入れ子
Sass

74. .oya {
color: #000;
.kodomo {
color: #111;
.mago {
color: #222;
}
}
}
入れ子
入れ子の入れ子
入れ子の入れ子の
Sass

75. .oya {
color: #000;
}
.oya .kodomo {
color: #111;
}
.oya .kodomo .mago {
color: #222;
}
CSS

76. .oya {
color: #000;
}
.oya .kodomo {
color: #111;
}
.oya .kodomo .mago {
color: #222;
}
親のセレクタも適用
CSS

77. .oya {
color: #000;
}
.oya .kodomo {
color: #111;
}
.oya .kodomo .mago {
color: #222;
}
親のセレクタも適用
親のセレクタも適用
CSS

78. .login-module {
padding: 10px;
.headline {
font: {
family: bold;
size: 18px;
}
}
.sentence {
color: #666;
}
}
Sass

79. .login-module {
padding: 10px;
.headline {
font: {
family: bold;
size: 18px;
}
}
.sentence {
color: #666;
}
}
プロパティの
ネストも可能
Sass

80. .login-module {
padding: 10px;
}
.login-module .headline {
font-family: bold;
font-size: 18px;
}
.login-module .sentence {
color: #666;
}
CSS

81. Nesting
モジュール単位でCSSを管理する
3階層以上ネストしてはいけない
ネスト

82. ミックスイン
Mixins
@mixin
@include

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. @mixin marumi($hankei) {
-moz-border-radius: $hankei;
-webkit-border-radius: $hankei;
border-radius: $hankei;
}
.box {
border: 1px #000 solid;
@include marumi(4px);
}
ミックスイン名ミックスインの定義
引数
Sass

87. @mixin marumi($hankei) {
-moz-border-radius: $hankei;
-webkit-border-radius: $hankei;
border-radius: $hankei;
}
.box {
border: 1px #000 solid;
@include marumi(4px);
}
ミックスイン名ミックスインの定義
引数
ミックスインの呼び出し
Sass

88. .box {
border: 1px #000 solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
CSS

89. .box {
border: 1px #000 solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
}
ミックスインが展開された部分
CSS

90. .marui-marui {
@include border-radius(4px);
}
Sass

91. .marui-marui {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
-o-border-radius: 4px;
border-radius: 4px;
}
CSS

92. Mixins
最初からミックスインを作ろうとは思わない
Compassのミックスインを研究してみる
ミックスイン

93. 継承
Selector Inheritance
@extend

94. @extend .keishooo;
Sass

95. 継承します！
@extend .keishooo;
Sass

96. 何のセレクタを？継承します！
@extend .keishooo;
Sass

97. .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

98. .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
継承元を指定

99. .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

100. .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継承したセレクタ

101. Selector Inheritance
モジュール単位でうまく継承できれば
コードを格段に削減することができる
継承

102. 基本の機能を
ちゃんと理解する

103. まとめ

104. 最初から
スゴイことはできない

105. 基本の積み重ねが
応用になる

107. “その時”が来てからでは遅い
先行者はずっと先にいる

108. 両方できるとカッコイイ
(*´ω｀*)

109. 次のステップのために

110. https://github.com/enja-oss/Sass

111. http://book.scss.jp/

112. http://prog4designer.github.io/

113. Thank you!
t32k@t32kkoji.ishimotoToday's latte, Sass. | Flickr by yukop

114. 宿題
SassMeisterで今日勉強した
Sass/Compassの機能を実際に使ってみよう。
http://sassmeister.com/

115. 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/

116. 質疑応答
t32k@t32kkoji.ishimoto