Sass/Compassの導入と環境構築

6,356 views
6,294 views

Published on

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

Published in: Design

Sass/Compassの導入と環境構築

  1. 1. Sass / Compassの 導入と環境構築 CSS Nite LP, Disk 32: Sass 2014.02.15
  2. 2. Sou-Lab. 森田 壮 @sou_lab フリーランス Web制作者のための Sassの教科書 デザインとかコーディングとか ディレクションとか
  3. 3. 1. Rubyのインストール 2. Sass/Compassのインストール 3. Sass/Compassのコンパイル 4. GUIツールでコンパイル アジェンダ
  4. 4. はじめに
  5. 5. 黒い画面
  6. 6. 黒い画面
  7. 7. いわゆる ターミナル とか コマンドプロンプト ってやつ
  8. 8. でも、大丈夫
  9. 9. 簡単 (Sassは)
  10. 10. 実は、ラク
  11. 11. 一行だけ
  12. 12. 1. Rubyのインストール 2. Sass/Compassのインストール 3. Sass/Compassのコンパイル 4. GUIツールでコンパイル アジェンダ
  13. 13. Ruby
  14. 14. はRuby製
  15. 15. Rubyが必要
  16. 16. はRubyをインストール
  17. 17. インストーラーあります http://rubyinstaller.org/
  18. 18. 最新Ver.をダウンロード
  19. 19. ポチっと
  20. 20. 「Rubyの実行ファイルへ環境変数PATHを設定する」 にチェックを忘れずに
  21. 21. > ruby -v
  22. 22. Ruby入りました
  23. 23. はRuby入っています が、しかし
  24. 24. MavericksからRuby2.0.0
  25. 25. Mavericks以前はRuby1.8.7
  26. 26. Ruby1.8.7引退しました
  27. 27. とりあえず、今のところ動きます でも今後は動かなくなる可能性大
  28. 28. 1.8.7 日本語パスが通る 1.8.7-p358
  29. 29. 1.8.7以上 日本語パスが通らない
  30. 30. HomeBrew http://brew.sh/
  31. 31. Ruby2.0.0への最終奥義
  32. 32. 1. Rubyのインストール 2. Sass/Compassのインストール 3. Sass/Compassのコンパイル 4. GUIツールでコンパイル アジェンダ
  33. 33. 黒い画面起動
  34. 34. R+
  35. 35. R+
  36. 36. Sassをインストール
  37. 37. Sassのインストールには gemコマンドを使います
  38. 38. ! Rubyのパッケージ管理システム RubyGems
  39. 39. ! Rubyの  みたいなもの RubyGems
  40. 40. gem install sass Sassインストール
  41. 41. > gem install sass
  42. 42. $ sudo gem install sass
  43. 43. $ sudo gem install sass sudoコマンド(管理者権限で実行する) ※homebrewなどでrubyをアップデートした場合は不要
  44. 44. $ sudo gem install sass sudoコマンド(管理者権限で実行する) ※homebrewなどでrubyをアップデートした場合は不要 こっちも一緒に
  45. 45. gem install compass Compassインストール
  46. 46. > gem install compass
  47. 47. $ sudo gem install compass
  48. 48. gem update sass gem update compass Sass/Compassアップデート たまにやろう
  49. 49. gem uninstall sass gem uninstall compass バージョン別に削除できるので、 前のバージョンに戻すこともできる Sass/Compassアンインストール
  50. 50. gem uninstall sass gem uninstall compass バージョン別に削除できるので、 前のバージョンに戻すこともできる Sass/Compassアンインストール
  51. 51. 1. Rubyのインストール 2. Sass/Compassのインストール 3. Sass/Compassのコンパイル 4. GUIツールでコンパイル アジェンダ
  52. 52. 現在地> コマンド オプション コマンド構文
  53. 53. 現在地> コマンド オプション コマンド構文 セレクター { プロパティ : 値 } CSSに似てる! 気がする
  54. 54. Sassのコマンドは sass
  55. 55. Sassのコマンドは scss
  56. 56. 現在地> sass オプション Sassコマンド 入出力 ウォッチ スタイル
 カレントディレクトリ などを指定
 コマンド
  57. 57. C:¥Users¥username>sass オプション 現在地 Windowsは絶対パスで現在地を表示
  58. 58. C:¥Users¥username>sass オプション 現在地 Windowsは絶対パスで現在地を表示
  59. 59. macbook:~ username$ sass オプション 現在地 Macは現在地のディレクトリ名のみ表示
  60. 60. macbook:~ username$ sass オプション 現在地 Macは現在地のディレクトリ名のみ表示
  61. 61. まずは、現在地の移動
  62. 62. Dockにターミナルを置いて フォルダを投げ込みます
  63. 63. キーボード->サービスの設定で、 「フォルダに新規ターミナル」ができます
  64. 64. XtraFinderというFinder拡張で 「新規ターミナルで開く」ができます
  65. 65. 「コマンドウィンドウをここで開く」 Shift + 右クリック
  66. 66. 移動できました
  67. 67. コンパイルしてみよう
  68. 68. オプション① 入力と出力
  69. 69. どのSassを どのCSSに コンパイルするかという オプション
  70. 70. これ指定しないと コンパイルできない
  71. 71. > sass ◯◯.scss:◯◯.css Sassコマンド 入力 Sassファイル 出力 CSSファイル 指定したファイル名で コンパイルされる ファイルで指定
  72. 72. > sass sass/◯◯.scss:css/◯◯.css Sassコマンド 入力 Sassファイル 「sass」フォルダの中の ⃝⃝.scssファイル 出力 Sassファイル 「css」フォルダの中の ⃝⃝.cssファイル ファイルで指定
  73. 73. オプション② ウォッチ
  74. 74. 毎回コマンド打って コンパイルするの 面倒じゃないですか
  75. 75. つねにフォルダを ウォッチしてくれる オプションです
  76. 76. --watch
  77. 77. > sass -—watch ◯◯.scss:◯◯.css Sassコマンド ウォッチオプション オプションは順不同 後ろに書いてもよい ウォッチを指定
  78. 78. > sass -—watch sass:css Sassコマンド 入力 フォルダ 「scss」フォルダ 出力 フォルダ 「css」フォルダ ウォッチするとフォルダで指定できる フォルダで指定するとSassファイルと 同じ名前のCSSファイルが作成される
  79. 79. > sass -—watch ../sass:css Sassコマンド 入力 フォルダ 「scss」フォルダ 出力 フォルダ 「css」フォルダ ウォッチするとフォルダで指定できる フォルダで指定するとSassファイルと 同じ名前のCSSファイルが作成される
  80. 80. > sass -—watch sass Sassコマンド 入力&出力 フォルダ 「scss」フォルダ フォルダひとつの指定も可 この場合はSassファイルと 同じ名前・場所でCSSファイルが作成される
  81. 81. > sass -—watch . Sassコマンド 入力&出力 フォルダ 現在地のフォルダ 相対パスのみの指定も可 この場合はSassファイルと 同じ名前・場所でCSSファイルが作成される
  82. 82. オプション③ スタイル
  83. 83. #main { width: 600px; } #main p { margin: 0 0 1em; } #main p em { color: #f00; }
  84. 84. コンパイル結果の インデントが嫌なんですけど
  85. 85. スタイル (コードフォーマット) を指定できます
  86. 86. - -style
  87. 87. > sass - — watch . —-style スタイル名 Sassコマンド スタイルオプション - -style + スタイル名をセットで指定
  88. 88. > sass -—watch . —t スタイル名 Sassコマンド スタイルオプション - -style は - t でもオッケー
  89. 89. スタイルは4種類
  90. 90. > sass - — watch . —t nested nestedスタイル(デフォルト) #main { width: 600px; padding: 20px; } #main p { margin: 0 0 1em; } #main p em { color: #f00; }
  91. 91. > sass - — watch . —t expanded expandedスタイル #main { width: 600px; padding: 20px; } #main p { margin: 0 0 1em; } #main p em { color: #f00; }
  92. 92. > 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; }
  93. 93. > sass - — watch . —t compressed compressedスタイル #main{width:600px;padding:20px}#main p{margin:0 0 1em}#main p em{color:#f00}
  94. 94. その他のオプション
  95. 95. sass - h Sassコマンド ヘルプ ヘルプが見れるよ!
  96. 96. sass - h Sassコマンド ヘルプ ヘルプで見れるよ!!
  97. 97. 略> sass . - — watch —-style expanded —-line-comments —- no-cache —-debug-info —-stop-on-error —-sourcemap Sassコマンド オプション 極端にオプション付けるとこうなる
  98. 98. 毎回コマンド打つのめんどい
  99. 99. そんなときは、 バッチファイル または シェルスクリプト
  100. 100. コマンドを仕込んで ダブルクリックで実行
  101. 101. Compassを コンパイルしてみよう
  102. 102. Compassのコマンドは compass
  103. 103. > compass オプション Compassコマンド sassコマンドと一緒
  104. 104. > compass watch Compassコマンド ウォッチする
  105. 105. > compass w Compassコマンド wに省略できる
  106. 106. Compassコマンド これだけおぼえておけばオケ > compass w
  107. 107. 他のオプションは config.rb という設定ファイルに
  108. 108. config.rb どこ?
  109. 109. > compass create Compassコマンド 初期のファイル一式を作成する
  110. 110. > compass create Compassコマンド 初期のファイル一式を作成する
  111. 111. > compass create Compassコマンド 初期のファイル一式を作成する 正直、そんなに使わない
  112. 112. > compass create Compassコマンド 初期のファイル一式を作成する config.rbだけあればオケ
  113. 113. # 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
  114. 114. # 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
  115. 115. # 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
  116. 116. # 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
  117. 117. 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
  118. 118. # 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
  119. 119. # You can select your preferred output style here (can be overridden via the command line): output_style =:compact アウトプットスタイル config.rb
  120. 120. # To disable debugging comments that display the original location of your selectors. Uncomment: line_comments = false ラインコメント config.rb
  121. 121. config.rb 簡単ですが 訳しておきました
  122. 122. # プラグインがある場合はここに書き込む ! # プロパティのディレクトリを指定 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
  123. 123. [Compass] 超訳 Configuration Reference http://tenderfeel.xsrv.jp/css/compass-css/1235/
  124. 124. その他のオプション
  125. 125. compass - h Compassコマンド ヘルプ ヘルプが見れるよ!
  126. 126. compass - h Compassコマンド ヘルプ ヘルプで見れるよ!!
  127. 127. 黒い画面ここまで
  128. 128. • 処理速度 • バージョン管理 • 最新版/試用版をすぐ使える • デバッグ 黒い画面のメリット
  129. 129. やってみれば案外簡単
  130. 130. 1. Rubyのインストール 2. Sass/Compassのインストール 3. Sass/Compassのコンパイル 4. GUIツールでコンパイル アジェンダ
  131. 131. GUI マウスで操作する アプリケーション Graphical User Interface
  132. 132. GUIコンパイラ Sass対応は結構あります
  133. 133. Sass対応は結構あります SassのGUIコンパイラ
  134. 134. Prepros http://alphapixels.com/prepros/
  135. 135. Prepros http://alphapixels.com/prepros/ • Win/Mac対応 • オートリロード(Chromeのみ) • ローカルサーバー機能 • 有料版はSFTP機能なども($24)
  136. 136. Koala http://koala-app.com/
  137. 137. Koala http://koala-app.com/ • Win/Mac対応 • 日本語対応 • 言語ごとの設定ファイル作成 • コマンドオプションが使える
  138. 138. Codekit http://incident57.com/codekit/
  139. 139. Codekit http://incident57.com/codekit/ • Mac専用 • 有料($28) • とにかく高機能 オートリロード / 独自テンプレート / 画像最適化 複数人のプロジェクト同期 / ファイルの結合・圧縮 SassのフレームワークBourbonにも対応
  140. 140. コンパイル方法
  141. 141. ドラッグ&ドロップで フォルダを プロジェクト登録 出力先を指定 オプションを指定
  142. 142. ドラッグ&ドロップで フォルダを プロジェクト登録 出力先を指定 オプションを指定
  143. 143. ドラッグ&ドロップで フォルダを プロジェクト登録 出力先を指定 オプションを指定
  144. 144. 操作ほぼ同じ
  145. 145. 簡単!
  146. 146. • 簡単! • プロジェクトの保持 • コンパイル以外の機能 GUIのメリット
  147. 147. • 処理速度 • 更新頻度 • バグ • 他アプリとの相性 GUIの懸念事項
  148. 148. その他、Sassを コンパイルできるツールたち
  149. 149. エディタ
  150. 150. タスクランナー
  151. 151. サイトジェネレータ
  152. 152. ライブプレビューツール もう少し先の話
  153. 153. まとめ
  154. 154. まとめ • コマンドをインストールしておこう • 黒い画面でもGUIでもラクな方で • 区別せずどちらもできれば理想 • 黒い画面と英語をおそれない
  155. 155. まとめ 環境もラクしよう!
  156. 156. ダウンロード http://sou-lab.com/lp32
  157. 157. ありがとうございました @sou_lab Web制作者のための Sassの教科書 Sublime本 も出ます

×