Sass/Compassの導入と環境構築

[2014.02.15]CSS Nite LP32 Sass「Sass/Compassの導入と環境構築」のスライドです。
https://cssnite.jp/lp/lp32/

Transcript

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-p358 1.8.7 日本語パスが通る
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. RubyGems ! Rubyのパッケージ管理システム
48. RubyGems ! Rubyの みたいなもの
49. Sassインストール gem install 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. Compassインストール gem install compass
56. > gem install compass
57. $ sudo gem install compass
60. Sass/Compassアップデート gem update sass gem update compass たまにやろう
61. Sass/Compassアンインストール gem uninstall sass gem uninstall compass バージョン別に削除できるので、 前のバージョンに戻すこともできる
62. Sass/Compassアンインストール gem uninstall sass gem uninstall 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 コマンド ファイルで指定 > sass ◯◯.scss:◯◯.css 入力 Sassファイル 出力 CSSファイル 指定したファイル名で コンパイルされる
84. Sass コマンド ファイルで指定 > sass sass/◯◯.scss:css/◯◯.css 入力 Sassファイル 「sass」フォルダの中の ◯◯.scssファイル 出力 Sassファイル 「css」フォルダの中の ◯◯.cssファイル
85. オプション② ウォッチ
86. 毎回コマンド打って コンパイルするの 面倒じゃないですか
87. つねにフォルダを ウォッチしてくれる オプションです
88. - - watch
89. Sass コマンド ウォッチを指定 > sass - — watch ◯◯.scss:◯◯.css ウォッチオプション オプションは順不同 後ろに書いてもよい
90. Sass コマンド ウォッチするとフォルダで指定できる > sass - — watch sass:css 入力 フォルダ 出力 フォルダ 「scss」フォルダ 「css」フォルダ フォルダで指定するとSassファイルと 同じ名前のCSSファイルが作成される
91. Sass コマンド ウォッチするとフォルダで指定できる > sass - — watch ../sass:css 入力 フォルダ 「scss」フォルダ 出力 フォルダ 「css」フォルダ フォルダで指定するとSassファイルと 同じ名前のCSSファイルが作成される
92. Sass コマンド フォルダひとつの指定も可 > sass - — watch sass 入力＆出力 フォルダ 「scss」フォルダ この場合はSassファイルと 同じ名前・場所でCSSファイルが作成される
93. Sass コマンド 相対パスのみの指定も可 > sass - — watch . 入力＆出力 フォルダ 現在地のフォルダ この場合はSassファイルと 同じ名前・場所でCSSファイルが作成される
94. オプション③ スタイル
95. #main { width: 600px; } #main p { margin: 0 0 1em; } #main p em { color: #f00; }
96. コンパイル結果の インデントが嫌なんですけど
97. スタイル （コードフォーマット） を指定できます
98. - - style
99. Sass コマンド スタイルオプション > sass - — watch . —-style スタイル名 - -style + スタイル名をセットで指定
100. Sass コマンド スタイルオプション > sass - — watch . —t スタイル名 - -style は - t でもオッケー
101. スタイルは4種類
102. nestedスタイル（デフォルト） > sass - — watch . —t nested #main { width: 600px; padding: 20px; } #main p { margin: 0 0 1em; } #main p em { color: #f00; }
103. expandedスタイル > sass - — watch . —t expanded #main { width: 600px; padding: 20px; } #main p { margin: 0 0 1em; } #main p em { color: #f00; }
104. compactスタイル > sass - — watch . —t 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. compressedスタイル > sass - — watch . —t compressed #main{width:600px;padding:20px}#main p{margin:0 0 1em}#main p em{color:#f00}
106. その他のオプション
107. Sass コマンド ヘルプ sass - h ヘ ルプ が 見 れる よ！
108. Sass コマンド ヘルプ sass - h ヘ ルプで見 れ る よ ！ ！
109. Sass コマンド オプション 略> sass . - — watch —-style expanded —-line-comments —- no-cache —-debug-info —-stop-on-error —-sourcemap 極端にオプション付けるとこうなる
110. 毎回コマンド打つのめんどい
111. そんなときは、 バッチファイル または シェルスクリプト
112. コマンドを仕込んで ダブルクリックで実行
113. Compassを コンパイルしてみよう
114. Compassのコマンドは compass
115. Compassコマンド > compass オプション sassコマンドと一緒
116. Compassコマンド > compass watch ウォッチする
117. Compassコマンド > compass w wに省略できる
118. Compassコマンド > compass w これだけおぼえておけばオケ
119. 他のオプションは config.rb という設定ファイルに
120. config.rb どこ？
121. Compassコマンド > compass create 初期のファイル一式を作成する
122. Compassコマンド > compass create 初期のファイル一式を作成する
123. Compassコマンド 正直、そんなに使わない > compass create 初期のファイル一式を作成する
124. Compassコマンド config.rbだけあればオケ > compass create 初期のファイル一式を作成する
125. config.rb # 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
126. config.rb 入力と出力 # Set this to the root of your project when deployed: http_path = "/" css_dir = "stylesheets" ⇠ 出力CSSフォルダ sass_dir = "sass" ⇠ 入力Sassフォルダ images_dir = "images" javascripts_dir = "javascripts"
127. config.rb 入力と出力 # Set this to the root of your project when deployed: http_path = "/" css_dir = "css" ⇠ 出力CSSフォルダ sass_dir = "sass" ⇠ 入力Sassフォルダ images_dir = "images" javascripts_dir = "javascripts"
128. config.rb 入力と出力 # Set this to the root of your project when deployed: http_path = "/" css_dir = "/" ⇠ 出力CSSフォルダ sass_dir = "sass" ⇠ 入力Sassフォルダ images_dir = "images" javascripts_dir = "javascripts"
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. config.rb アウトプットスタイル # You can select your preferred output style here (can be overridden via the command line): # output_style = :expanded or :nested or :compact or :compressed
131. config.rb アウトプットスタイル # You can select your preferred output style here (can be overridden via the command line): output_style =:compact
132. config.rb ラインコメント # To disable debugging comments that display the original location of your selectors. Uncomment: line_comments = false
133. config.rb 簡単ですが 訳しておきました
134. config.rb # プラグインがある場合はここに書き込む ! # プロパティのディレクトリを指定 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
135. [Compass] 超訳 Configuration Reference http://tenderfeel.xsrv.jp/css/compass-css/1235/
136. その他のオプション
137. Compassコマンド ヘルプ compass - h ヘ ルプ が 見 れる よ！
138. Compassコマンド ヘルプ compass - h ヘ ルプで見 れ る よ ！ ！
139. 黒い画面ここまで
140. 黒い画面のメリット • 処理速度 • バージョン管理 • 最新版/試用版をすぐ使える • デバッグ
141. やってみれば案外簡単
142. アジェンダ 1. Rubyのインストール 2. Sass/Compassのインストール 3. Sass/Compassのコンパイル 4. GUIツールでコンパイル
143. GUI Graphical User Interface マウスで操作する アプリケーション
144. GUIコンパイラ Sass対応は結構あります
145. SassのGUIコンパイラ Sass対応は結構あります
146. Prepros http://alphapixels.com/prepros/
147. • Win/Mac対応 • オートリロード（Chromeのみ） • ローカルサーバー機能 • 有料版はSFTP機能なども（$24） Prepros http://alphapixels.com/prepros/
148. Koala http://koala-app.com/
149. • Win/Mac対応 • 日本語対応 • 言語ごとの設定ファイル作成 • コマンドオプションが使える Koala http://koala-app.com/
150. Codekit http://incident57.com/codekit/
151. • Mac専用 • 有料（$28） • とにかく高機能 オートリロード / 独自テンプレート / 画像最適化 複数人のプロジェクト同期 / ファイルの結合・圧縮 SassのフレームワークBourbonにも対応 Codekit http://incident57.com/codekit/
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本 も出ます