[2014.02.15]CSS Nite LP32 Sass「Sass/Compassの導入と環境構築」のスライドです

2. Sass / Compassの
導入と環境構築
CSS Nite LP, Disk 32: Sass
2014.02.15

3. Sou-Lab.
森田 壮
@sou_lab
フリーランス
Web制作者のための
Sassの教科書
デザインとかコーディングとか
ディレクションとか

4. 1. Rubyのインストール
2. Sass/Compassのインストール
3. Sass/Compassのコンパイル
4. GUIツールでコンパイル
アジェンダ

5. はじめに

6. 黒い画面

7. 黒い画面

8. いわゆる
ターミナル
とか
コマンドプロンプト
ってやつ

9. でも、大丈夫

10. 簡単
（Sassは）

11. 実は、ラク

12. 一行だけ

13. 1. Rubyのインストール
2. Sass/Compassのインストール
3. Sass/Compassのコンパイル
4. GUIツールでコンパイル
アジェンダ

14. Ruby

15. はRuby製

16. Rubyが必要

17. はRubyをインストール

18. インストーラーあります
http://rubyinstaller.org/

19. 最新Ver.をダウンロード

20. ポチっと

21. 「Rubyの実行ファイルへ環境変数PATHを設定する」
にチェックを忘れずに

22. > ruby -v

23. Ruby入りました

24. はRuby入っています
が、しかし

25. MavericksからRuby2.0.0

26. Mavericks以前はRuby1.8.7

27. Ruby1.8.7引退しました

28. とりあえず、今のところ動きます
でも今後は動かなくなる可能性大

29. 1.8.7
日本語パスが通る
1.8.7-p358

30. 1.8.7以上
日本語パスが通らない

31. HomeBrew
http://brew.sh/

32. Ruby2.0.0への最終奥義

33. 1. Rubyのインストール
2. Sass/Compassのインストール
3. Sass/Compassのコンパイル
4. GUIツールでコンパイル
アジェンダ

34. 黒い画面起動

36. R+

37. R+

45. Sassをインストール

46. Sassのインストールには
gemコマンドを使います

47. !
Rubyのパッケージ管理システム
RubyGems

48. !
Rubyの みたいなもの
RubyGems

49. gem install sass
Sassインストール

50. > gem install sass

51. $ sudo gem install sass

52. $ sudo gem install sass
sudoコマンド（管理者権限で実行する）
※homebrewなどでrubyをアップデートした場合は不要

53. $ sudo gem install sass
sudoコマンド（管理者権限で実行する）
※homebrewなどでrubyをアップデートした場合は不要
こっちも一緒に

55. gem install compass
Compassインストール

56. > gem install compass

57. $ sudo gem install compass

60. gem update sass
gem update compass
Sass/Compassアップデート
たまにやろう

61. gem uninstall sass
gem uninstall compass
バージョン別に削除できるので、
前のバージョンに戻すこともできる
Sass/Compassアンインストール

62. gem uninstall sass
gem uninstall compass
バージョン別に削除できるので、
前のバージョンに戻すこともできる
Sass/Compassアンインストール

63. 1. Rubyのインストール
2. Sass/Compassのインストール
3. Sass/Compassのコンパイル
4. GUIツールでコンパイル
アジェンダ

64. 現在地> コマンド オプション
コマンド構文

65. 現在地> コマンド オプション
コマンド構文
セレクター { プロパティ : 値 }
CSSに似てる！
気がする

66. Sassのコマンドは
sass

67. Sassのコマンドは
scss

68. 現在地> sass オプション
Sassコマンド
入出力
ウォッチ
スタイル
カレントディレクトリ
などを指定
コマンド

69. C:¥Users¥username>sass オプション
現在地
Windowsは絶対パスで現在地を表示

70. C:¥Users¥username>sass オプション
現在地
Windowsは絶対パスで現在地を表示

71. macbook:~ username$ sass オプション
現在地
Macは現在地のディレクトリ名のみ表示

72. macbook:~ username$ sass オプション
現在地
Macは現在地のディレクトリ名のみ表示

73. まずは、現在地の移動

74. Dockにターミナルを置いて
フォルダを投げ込みます

75. キーボード->サービスの設定で、
「フォルダに新規ターミナル」ができます

76. XtraFinderというFinder拡張で
「新規ターミナルで開く」ができます

77. 「コマンドウィンドウをここで開く」
Shift + 右クリック

78. 移動できました

79. コンパイルしてみよう

80. オプション①
入力と出力

81. どのSassを
どのCSSに
コンパイルするかという
オプション

82. これ指定しないと
コンパイルできない

83. > sass ◯◯.scss:◯◯.css
Sassコマンド
入力
Sassファイル
出力
CSSファイル
指定したファイル名で
コンパイルされる
ファイルで指定

84. > sass sass/◯◯.scss:css/◯◯.css
Sassコマンド
入力
Sassファイル
「sass」フォルダの中の
⃝⃝.scssファイル
出力
Sassファイル
「css」フォルダの中の
⃝⃝.cssファイル
ファイルで指定

85. オプション②
ウォッチ

86. 毎回コマンド打って
コンパイルするの
面倒じゃないですか

87. つねにフォルダを
ウォッチしてくれる
オプションです

88. --watch

89. > sass -—watch ◯◯.scss:◯◯.css
Sassコマンド
ウォッチオプション
オプションは順不同
後ろに書いてもよい
ウォッチを指定

90. > sass -—watch sass:css
Sassコマンド
入力
フォルダ
「scss」フォルダ
出力
フォルダ
「css」フォルダ
ウォッチするとフォルダで指定できる
フォルダで指定するとSassファイルと
同じ名前のCSSファイルが作成される

91. > sass -—watch ../sass:css
Sassコマンド
入力
フォルダ
「scss」フォルダ
出力
フォルダ
「css」フォルダ
ウォッチするとフォルダで指定できる
フォルダで指定するとSassファイルと
同じ名前のCSSファイルが作成される

92. > sass -—watch sass
Sassコマンド
入力＆出力
フォルダ
「scss」フォルダ
フォルダひとつの指定も可
この場合はSassファイルと
同じ名前・場所でCSSファイルが作成される

93. > sass -—watch .
Sassコマンド
入力＆出力
フォルダ
現在地のフォルダ
相対パスのみの指定も可
この場合はSassファイルと
同じ名前・場所でCSSファイルが作成される

94. オプション③
スタイル

95. #main {
width: 600px; }
#main p {
margin: 0 0 1em; }
#main p em {
color: #f00; }

96. コンパイル結果の
インデントが嫌なんですけど

97. スタイル
（コードフォーマット）
を指定できます

98. - -style

99. > sass - — watch . —-style スタイル名
Sassコマンド
スタイルオプション
- -style + スタイル名をセットで指定

100. > sass -—watch . —t スタイル名
Sassコマンド
スタイルオプション
- -style は - t でもオッケー

101. スタイルは4種類

102. > sass - — watch . —t nested
nestedスタイル（デフォルト）
#main {
width: 600px;
padding: 20px; }
#main p {
margin: 0 0 1em; }
#main p em {
color: #f00; }

103. > sass - — watch . —t expanded
expandedスタイル
#main {
width: 600px;
padding: 20px;
}
#main p {
margin: 0 0 1em;
}
#main p em {
color: #f00;
}

104. > sass - — watch . —t compact
compactスタイル
#main { width: 600px; padding: 20px; }
#main p { margin: 0 0 1em; }
#main p em { color: #f00; }
!
nav { height: 300px; }
nav ul { overflow: hidden; }

105. > sass - — watch . —t compressed
compressedスタイル
#main{width:600px;padding:20px}#main
p{margin:0 0 1em}#main p em{color:#f00}

106. その他のオプション

107. sass - h
Sassコマンド
ヘルプ
ヘルプが見れるよ！

108. sass - h
Sassコマンド
ヘルプ
ヘルプで見れるよ！！

109. 略> sass . - — watch —-style expanded —-line-comments —-
no-cache —-debug-info —-stop-on-error —-sourcemap
Sassコマンド
オプション
極端にオプション付けるとこうなる

110. 毎回コマンド打つのめんどい

111. そんなときは、
バッチファイル
または
シェルスクリプト

112. コマンドを仕込んで
ダブルクリックで実行

113. Compassを
コンパイルしてみよう

114. Compassのコマンドは
compass

115. > compass オプション
Compassコマンド
sassコマンドと一緒

116. > compass watch
Compassコマンド
ウォッチする

117. > compass w
Compassコマンド
wに省略できる

118. Compassコマンド
これだけおぼえておけばオケ
> compass w

119. 他のオプションは
config.rb
という設定ファイルに

120. config.rb
どこ？

121. > compass create
Compassコマンド
初期のファイル一式を作成する

122. > compass create
Compassコマンド
初期のファイル一式を作成する

123. > compass create
Compassコマンド
初期のファイル一式を作成する
正直、そんなに使わない

124. > compass create
Compassコマンド
初期のファイル一式を作成する
config.rbだけあればオケ

125. # Require any additional compass plugins here.
!
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
!
# You can select your preferred output style here (can be overridden via the
command line):
# output_style = :expanded or :nested or :compact or :compressed
!
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
!
# To disable debugging comments that display the original location of your
selectors. Uncomment:
# line_comments = false
!
!
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
config.rb

126. # Set this to the root of your project
when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
入力と出力
⇠ 出力CSSフォルダ
⇠ 入力Sassフォルダ
config.rb

127. # Set this to the root of your project
when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
⇠ 出力CSSフォルダ
⇠ 入力Sassフォルダ
入力と出力
config.rb

128. # Set this to the root of your project
when deployed:
http_path = "/"
css_dir = "/"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
⇠ 出力CSSフォルダ
⇠ 入力Sassフォルダ
入力と出力
config.rb

129. config.rb
# Require any additional compass plugins here.
!
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
!
# You can select your preferred output style here (can be overridden via the
command line):
# output_style = :expanded or :nested or :compact or :compressed
!
# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true
!
# To disable debugging comments that display the original location of your
selectors. Uncomment:
# line_comments = false
!
!
# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

130. # You can select your preferred
output style here (can be
overridden via the command line):
# output_style = :expanded
or :nested or :compact
or :compressed
アウトプットスタイル
config.rb

131. # You can select your preferred
output style here (can be
overridden via the command line):
output_style =:compact
アウトプットスタイル
config.rb

132. # To disable debugging comments
that display the original
location of your selectors.
Uncomment:
line_comments = false
ラインコメント
config.rb

133. config.rb
簡単ですが
訳しておきました

134. # プラグインがある場合はここに書き込む
!
# プロパティのディレクトリを指定
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
!
# アウトプットスタイルを指定(コマンドオプションで上書きすることができます):
# output_style = :expanded or :nested or :compact or :compressed
!
# 関数でつかうURLを相対パスにする
# relative_assets = true
!
# Sassファイルの元の行数を表示するコメントを書き出す
# line_comments = false
!
!
# SASS記法を使う場合はコメントを外す
# preferred_syntax = :sass
!
# その他コマンド
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass
config.rb

135. [Compass] 超訳 Configuration Reference
http://tenderfeel.xsrv.jp/css/compass-css/1235/

136. その他のオプション

137. compass - h
Compassコマンド
ヘルプ
ヘルプが見れるよ！

138. compass - h
Compassコマンド
ヘルプ
ヘルプで見れるよ！！

139. 黒い画面ここまで

140. • 処理速度
• バージョン管理
• 最新版/試用版をすぐ使える
• デバッグ
黒い画面のメリット

141. やってみれば案外簡単

142. 1. Rubyのインストール
2. Sass/Compassのインストール
3. Sass/Compassのコンパイル
4. GUIツールでコンパイル
アジェンダ

143. GUI
マウスで操作する
アプリケーション
Graphical User Interface

144. GUIコンパイラ
Sass対応は結構あります

145. Sass対応は結構あります
SassのGUIコンパイラ

146. Prepros
http://alphapixels.com/prepros/

147. Prepros
http://alphapixels.com/prepros/
• Win/Mac対応
• オートリロード（Chromeのみ）
• ローカルサーバー機能
• 有料版はSFTP機能なども（$24）

148. Koala
http://koala-app.com/

149. Koala
http://koala-app.com/
• Win/Mac対応
• 日本語対応
• 言語ごとの設定ファイル作成
• コマンドオプションが使える

150. Codekit
http://incident57.com/codekit/

151. Codekit
http://incident57.com/codekit/
• Mac専用
• 有料（$28）
• とにかく高機能
オートリロード / 独自テンプレート / 画像最適化
複数人のプロジェクト同期 / ファイルの結合・圧縮
SassのフレームワークBourbonにも対応

152. コンパイル方法

153. ドラッグ＆ドロップで
フォルダを
プロジェクト登録
出力先を指定
オプションを指定

154. ドラッグ＆ドロップで
フォルダを
プロジェクト登録
出力先を指定
オプションを指定

155. ドラッグ＆ドロップで
フォルダを
プロジェクト登録
出力先を指定
オプションを指定

156. 操作ほぼ同じ

157. 簡単！

158. • 簡単！
• プロジェクトの保持
• コンパイル以外の機能
GUIのメリット

159. • 処理速度
• 更新頻度
• バグ
• 他アプリとの相性
GUIの懸念事項

160. その他、Sassを
コンパイルできるツールたち

161. エディタ

162. タスクランナー

163. サイトジェネレータ

164. ライブプレビューツール
もう少し先の話

165. まとめ

166. まとめ
• コマンドをインストールしておこう
• 黒い画面でもGUIでもラクな方で
• 区別せずどちらもできれば理想
• 黒い画面と英語をおそれない

167. まとめ
環境もラクしよう！

168. ダウンロード
http://sou-lab.com/lp32

169. ありがとうございました
@sou_lab
Web制作者のための
Sassの教科書
Sublime本
も出ます