1. Sass(Scss)を使った共同作業について
@kanapple73

2. Sass使ってますか？
2
みなさん
sassの人→

3. Sassというのは・・・
Syntactically Awesome Stylesheets の略
3
⇒ 構文的にすっばらしいスタイルシート
・cssのメタ言語 ※メタ言語＝ある言語を一段階上から操作する言語
※SassファイルのままHTMLで読み込むことはできません。
読み込む

4. えっ
4
それって二度手間やない？

5. CSSより効率がいいのです。
5
いいえ。

6. Sassでできること

7. Sassでできること：基本
6
ネスト（入れ子）にして記述ができます。
変数に値を宣言したり、値に計算式を記述すると演算して出力されます。

8. Sassでできること：応用
7
スタイルを入れて置く箱のような@mixin（ミックスイン）は
@include（インクルード）されない限り出力されません。
@extend（エクステンド）で任意のセレクタを継承しグループ化します。
スタイルを入れて置く箱のような@mixin（ミックスイン）は
@include（インクルード）されない限り出力されません。
@extend（エクステンド）で任意のセレクタを継承しグループ化します。

9. Sassでできること：もっと応用
8
@if文など制御構文を使ってスタイルの出し分けや、
@mixin（ミックスイン）に引数を渡し値を指定して@include（インクルード）できます。
Sassで定義されている関数を使えば自動処理をしてくれます。

10. Compasを使えばより便利に
9
もっともっともーっとできます。

11. 独自の定義で効率良く作業できるSass。
共同作業する時はどうすればいい？
10
よく聞かれること。

12. 本題へ

13. バージョン管理で共同作業
11
プロジェクト内の様々なファイルの変更履歴を管理するためのシステム。
バージョン管理とは・・・
SVN？ git？

14. Sassを使うための環境
12
・compass.app
有料
インストール不要
・scout.app
無料
インストールが必要
・ターミナル / コマンドプロンプト
最初から入っている
Rubyのインストールが必要

15. これは入れるべき。
Compassをインストールしましょう。
13
Compass.app / scout.appには最初から入っています
compass独自の@mixin や関数が沢山

16. プロジェクトリーダがいた方が楽
14
私がやるわ。
リーダの仕事
・環境の準備。
・構成ファイルの作成。
・作業の振り分け。とかとか

17. 環境はバラバラでも大丈夫。
15

18. ディレクトリにcompassの導入
16
まかせれ。
リーダの仕事
・環境の準備。
・構成ファイルの作成。
・作業の振り分け。とかとか

19. compassを導入すると
17
sass
∟ie.scss
∟print.scss
∟screen.scss
これらが自動で生成されます。
stylesheets
∟ie.css
∟print.css
∟screen.css

20. cofig.rbをさわる
18
compassの設定ファイル（ruby）
ディレクトリ名や、出力方法、
コメントの有／無など。
これに書いた設定が適用されてcssになります。

21. cofig.rbをさわる
19
作業しやすいように

22. フォルダ名変更など
20
リーダの仕事
・環境の準備。
・構成ファイルの作成。
・作業の振り分け。とかとか

23. ファイルの追加や構成
21
リーダの仕事
・環境の準備。
・構成ファイルの作成。
・作業の振り分け。とかとか
ルールを決めるよ

24. ファイルの追加や構成
22
必要なscssファイルを対象ディレクトリに入れていく。

25. 分割したファイルの読み込み
23
リーダの仕事
・環境の準備。
・構成ファイルの作成。
・作業の振り分け。とかとか

26. 環境準備が整いました
24
リーダの仕事
・環境の準備。
・構成ファイルの作成。
・作業の振り分け。とかとか
みんな集合！

27. 共有事項や作業の振り分け
25
変数はbase.scssに書いてね。
@mixinは@mixin.scssに書いてね。
レイアウトについてはlayout.scssに書いてね。
新規ファイルは全てパーシャルファイルで作ってね。

28. 共有事項や作業の振り分け
26
僕、Sassできないよ。

29. 共有事項や作業の振り分け
27
え。

30. 大丈夫、大丈夫。
28
ゾウ君は普通にcssを書いていいよ。

31. ファイル名は_hoge.scssで
29
Scssファイルは通常のcss記述でもOK。
ファイル名の頭に_。拡張子は.scssにすることで
cssファイルが生成されない読み込み専用ファイルになります。
_zou.scss
_kuma.scss
というファイル名でもOKなんやね。

32. つまりこういうこと
30
1枚のcssが作られる

33. バージョン管理のルール
31
生成されたcssファイルは
コミットせんでね。

34. バージョン管理のルール
32
それぞれ別のscssファイルを使うため、
ローカルで生成されるcssファイルの中身が異なります。
バージョン管理するのはscssファイルのみ。
サーバーにアップする時や最終時cssファイルをコミットします。
fmfm

35. その他共同作業でやったらいいこと
・cssに出力されない一行コメント//を使いまくる
33
・頻繁に出てくるスタイルは@mixinに定義
・共有ファイルを使う時は声をかける！

36. 共同作業でもsassは便利！
17