Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Sass(Scss)を使った共同作業について@kanapple73
Sass使ってますか?2みなさんsassの人→
Sassというのは・・・Syntactically Awesome Stylesheets の略3⇒ 構文的にすっばらしいスタイルシート・cssのメタ言語 ※メタ言語=ある言語を一段階上から操作する言語※SassファイルのままHTMLで読み込む...
えっ4それって二度手間やない?
CSSより効率がいいのです。5いいえ。
Sassでできること
Sassでできること:基本6ネスト(入れ子)にして記述ができます。変数に値を宣言したり、値に計算式を記述すると演算して出力されます。
Sassでできること:応用7スタイルを入れて置く箱のような@mixin(ミックスイン)は@include(インクルード)されない限り出力されません。@extend(エクステンド)で任意のセレクタを継承しグループ化します。スタイルを入れて置く箱の...
Sassでできること:もっと応用8@if文など制御構文を使ってスタイルの出し分けや、@mixin(ミックスイン)に引数を渡し値を指定して@include(インクルード)できます。Sassで定義されている関数を使えば自動処理をしてくれます。
Compasを使えばより便利に9もっともっともーっとできます。
独自の定義で効率良く作業できるSass。共同作業する時はどうすればいい?10よく聞かれること。
本題へ
バージョン管理で共同作業11プロジェクト内の様々なファイルの変更履歴を管理するためのシステム。バージョン管理とは・・・SVN? git?
Sassを使うための環境12・compass.app有料インストール不要・scout.app無料インストールが必要・ターミナル / コマンドプロンプト最初から入っているRubyのインストールが必要
これは入れるべき。Compassをインストールしましょう。13Compass.app / scout.appには最初から入っていますcompass独自の@mixin や関数が沢山
プロジェクトリーダがいた方が楽14私がやるわ。リーダの仕事・環境の準備。・構成ファイルの作成。・作業の振り分け。とかとか
環境はバラバラでも大丈夫。15
ディレクトリにcompassの導入16まかせれ。リーダの仕事・環境の準備。・構成ファイルの作成。・作業の振り分け。とかとか
compassを導入すると17sass∟ie.scss∟print.scss∟screen.scssこれらが自動で生成されます。stylesheets∟ie.css∟print.css∟screen.css
cofig.rbをさわる18compassの設定ファイル(ruby)ディレクトリ名や、出力方法、コメントの有/無など。これに書いた設定が適用されてcssになります。
cofig.rbをさわる19作業しやすいように
フォルダ名変更など20リーダの仕事・環境の準備。・構成ファイルの作成。・作業の振り分け。とかとか
ファイルの追加や構成21リーダの仕事・環境の準備。・構成ファイルの作成。・作業の振り分け。とかとかルールを決めるよ
ファイルの追加や構成22必要なscssファイルを対象ディレクトリに入れていく。
分割したファイルの読み込み23リーダの仕事・環境の準備。・構成ファイルの作成。・作業の振り分け。とかとか
環境準備が整いました24リーダの仕事・環境の準備。・構成ファイルの作成。・作業の振り分け。とかとかみんな集合!
共有事項や作業の振り分け25変数はbase.scssに書いてね。@mixinは@mixin.scssに書いてね。レイアウトについてはlayout.scssに書いてね。新規ファイルは全てパーシャルファイルで作ってね。
共有事項や作業の振り分け26僕、Sassできないよ。
共有事項や作業の振り分け27え。
大丈夫、大丈夫。28ゾウ君は普通にcssを書いていいよ。
ファイル名は_hoge.scssで29Scssファイルは通常のcss記述でもOK。ファイル名の頭に_。拡張子は.scssにすることでcssファイルが生成されない読み込み専用ファイルになります。_zou.scss_kuma.scssというファイル...
つまりこういうこと301枚のcssが作られる
バージョン管理のルール31生成されたcssファイルはコミットせんでね。
バージョン管理のルール32それぞれ別のscssファイルを使うため、ローカルで生成されるcssファイルの中身が異なります。バージョン管理するのはscssファイルのみ。サーバーにアップする時や最終時cssファイルをコミットします。fmfm
その他共同作業でやったらいいこと・cssに出力されない一行コメント//を使いまくる33・頻繁に出てくるスタイルは@mixinに定義・共有ファイルを使う時は声をかける!
共同作業でもsassは便利!17
Upcoming SlideShare
Loading in …5
×

Sassを使った共同作業について

3,982 views

Published on

  • Be the first to comment

Sassを使った共同作業について

  1. 1. Sass(Scss)を使った共同作業について@kanapple73
  2. 2. Sass使ってますか?2みなさんsassの人→
  3. 3. Sassというのは・・・Syntactically Awesome Stylesheets の略3⇒ 構文的にすっばらしいスタイルシート・cssのメタ言語 ※メタ言語=ある言語を一段階上から操作する言語※SassファイルのままHTMLで読み込むことはできません。読み込む
  4. 4. えっ4それって二度手間やない?
  5. 5. CSSより効率がいいのです。5いいえ。
  6. 6. Sassでできること
  7. 7. Sassでできること:基本6ネスト(入れ子)にして記述ができます。変数に値を宣言したり、値に計算式を記述すると演算して出力されます。
  8. 8. Sassでできること:応用7スタイルを入れて置く箱のような@mixin(ミックスイン)は@include(インクルード)されない限り出力されません。@extend(エクステンド)で任意のセレクタを継承しグループ化します。スタイルを入れて置く箱のような@mixin(ミックスイン)は@include(インクルード)されない限り出力されません。@extend(エクステンド)で任意のセレクタを継承しグループ化します。
  9. 9. Sassでできること:もっと応用8@if文など制御構文を使ってスタイルの出し分けや、@mixin(ミックスイン)に引数を渡し値を指定して@include(インクルード)できます。Sassで定義されている関数を使えば自動処理をしてくれます。
  10. 10. Compasを使えばより便利に9もっともっともーっとできます。
  11. 11. 独自の定義で効率良く作業できるSass。共同作業する時はどうすればいい?10よく聞かれること。
  12. 12. 本題へ
  13. 13. バージョン管理で共同作業11プロジェクト内の様々なファイルの変更履歴を管理するためのシステム。バージョン管理とは・・・SVN? git?
  14. 14. Sassを使うための環境12・compass.app有料インストール不要・scout.app無料インストールが必要・ターミナル / コマンドプロンプト最初から入っているRubyのインストールが必要
  15. 15. これは入れるべき。Compassをインストールしましょう。13Compass.app / scout.appには最初から入っていますcompass独自の@mixin や関数が沢山
  16. 16. プロジェクトリーダがいた方が楽14私がやるわ。リーダの仕事・環境の準備。・構成ファイルの作成。・作業の振り分け。とかとか
  17. 17. 環境はバラバラでも大丈夫。15
  18. 18. ディレクトリにcompassの導入16まかせれ。リーダの仕事・環境の準備。・構成ファイルの作成。・作業の振り分け。とかとか
  19. 19. compassを導入すると17sass∟ie.scss∟print.scss∟screen.scssこれらが自動で生成されます。stylesheets∟ie.css∟print.css∟screen.css
  20. 20. cofig.rbをさわる18compassの設定ファイル(ruby)ディレクトリ名や、出力方法、コメントの有/無など。これに書いた設定が適用されてcssになります。
  21. 21. cofig.rbをさわる19作業しやすいように
  22. 22. フォルダ名変更など20リーダの仕事・環境の準備。・構成ファイルの作成。・作業の振り分け。とかとか
  23. 23. ファイルの追加や構成21リーダの仕事・環境の準備。・構成ファイルの作成。・作業の振り分け。とかとかルールを決めるよ
  24. 24. ファイルの追加や構成22必要なscssファイルを対象ディレクトリに入れていく。
  25. 25. 分割したファイルの読み込み23リーダの仕事・環境の準備。・構成ファイルの作成。・作業の振り分け。とかとか
  26. 26. 環境準備が整いました24リーダの仕事・環境の準備。・構成ファイルの作成。・作業の振り分け。とかとかみんな集合!
  27. 27. 共有事項や作業の振り分け25変数はbase.scssに書いてね。@mixinは@mixin.scssに書いてね。レイアウトについてはlayout.scssに書いてね。新規ファイルは全てパーシャルファイルで作ってね。
  28. 28. 共有事項や作業の振り分け26僕、Sassできないよ。
  29. 29. 共有事項や作業の振り分け27え。
  30. 30. 大丈夫、大丈夫。28ゾウ君は普通にcssを書いていいよ。
  31. 31. ファイル名は_hoge.scssで29Scssファイルは通常のcss記述でもOK。ファイル名の頭に_。拡張子は.scssにすることでcssファイルが生成されない読み込み専用ファイルになります。_zou.scss_kuma.scssというファイル名でもOKなんやね。
  32. 32. つまりこういうこと301枚のcssが作られる
  33. 33. バージョン管理のルール31生成されたcssファイルはコミットせんでね。
  34. 34. バージョン管理のルール32それぞれ別のscssファイルを使うため、ローカルで生成されるcssファイルの中身が異なります。バージョン管理するのはscssファイルのみ。サーバーにアップする時や最終時cssファイルをコミットします。fmfm
  35. 35. その他共同作業でやったらいいこと・cssに出力されない一行コメント//を使いまくる33・頻繁に出てくるスタイルは@mixinに定義・共有ファイルを使う時は声をかける!
  36. 36. 共同作業でもsassは便利!17

×