sassのintroduction

1. Sass
Introduction
Ryuma Tsukano
jsCafe10

2. CSSの今までの流れ
● 90年代:
○ table cellでレイアウト/html属性でstyle指定
● 00年前?:
○ cssでスタイリング
● 21世紀になってから
■ htmlは大規模化=>どんどん読めなくなるcss
● 05/06年辺りから：
○ CSSメタ言語(PreProcessor)が登場★
○ '09 LESS登場後、現場での事例も続々と...
● 最近：
○ 数年前からoocss等、cssの構造化、framework化

3. CSS preprocessorとは?(sassを例に)
開発時：sassを作成=>cssに変換
ブラウザーから：cssを見る
● ※Sass関係無い
※Sass関係無 = 例えばbrowserからsassのif文等使えない
.sass/
.scss
.css
.css
.html
この変換を
するのが
CSS
Preprocessor
皆が作るファイル ユーザーが見るファイル

4. CSS preprocessor系の主要な歴史
● 2006年:Sass
● 2009年:LESS ※ここから普及
● 2010年:Sass version3発表(scss記法) ※普及
● 2011年:stylus
※間違ってたらすみません。大体、こんな感じ。
上記以外にも、以下のように多数有り
Turbine/Switch CSS/CSS Cacheer/CSS Preprocessor/DT CSS/CSS
PP/TASS/PCSS等

5. CSS Preprocessor
● Sass : 機能いっぱい。FWもある
● LESS : simple。clientでコンパイル。
● stylus : 細かな機能追加。まだ現在進行系？
jscafeだしstylusやりたいけど普及度が謎。
● Sass/LESSが一般的か!?ややSASS多い?
● LESSが先に普及?=>その後、SassがSCSS記
法(後述)採用してから普及?
● LESS->Sass移る人いても逆はいない

6. Sass
Syntactically : 構文に関して
Awesome : 素晴らしい
StyleSheet : スタイルシート

7. SASSで何ができる？
CSSの中にプログラムっぽい事書ける
● ネスト
● 変数
● 計算
● 関数
● 共通化

8. プログラムぽく書く事で何が嬉しい？
２つのメリット
1. 可読性
● 人の書いたCSS読み易くなる
2. 再利用性
● 似たようなstyleを沢山書く必要無くなる
=>そして、stylesheetが構造化されていく....

9. でも、実際導入難しいんじゃ...
● installめんどくさいんでしょ
○ MACの人は楽チンinstall
○ windowsでもGUIある
● cssでもう書いちゃったから無理でしょ
○ Sass内にcss=>Sassのコンバーター(sass-convert)
○ 非公式に web もある
● Sassに生CSSも書けるので、
とりあえず、Sassにして、ネストだけでもやったら
CSS管理は楽になる

10. SASSとSCSSの違い
Sassの考え方で２つの記法がある
● SASS記法(.sass)
○ HAMLっぽい独特な記述。
○ 元々これが元祖。
● SCSS記法(.scss)
○ SassyCSSの略。(SassっぽいCSS)
○ SASS ver3内の記法なので、コンパイラはSASS。
○ cssっぽく可読性高い。
○ 通常こちらを使う。今日の話もこちら。
○ CSSもそのまま書けるので、SCSS記法でいつものCSS
書いておいて、少しずつSASSを覚えて書いて行くという
のも可能。
■ ちなみに、単にネストするだけでも効果的。

11. 参考資料
● 超入門記事
○ dotinstall
○ LINEブログの超入門記事
○ slideshareの記事
○ とても丁寧なblog記事 ★
● 書籍
○ Sass入門(電子書籍のみ) ★
○ SASS in Action(英)が今後出るみたい($35)
● 公式Page
○ reference ★

12. 始めよう
● CUI(黒い画面)
○ ruby製
■ mac:rubyは元々install済み
■ windows:one click installerで自分でruby入れて
○ mac:ターミナル/windows:startからruby黒画面起動
■ gem install sass
● GUI(グラフィカルなツール)
○ scout

13. インストールが追いつかない人へ
※もしくは、面倒くさい人へ ...
以下で、web上で簡易にsass書ける
● 公式ページ
● JsFiddle(languageでscssを選ぶ)
● jsdo.it(cssの右プルダウンからscss選択)
今日は一旦これでもいいかもね。

14. CUIのsassの使い方
1. sassを書く
2. sassをcssにconvertする
● sass 書いたscss 出力するcss
● ex)sass file_name.scss output.css
=>この後は、output.cssを呼べばいつも通り。
※ちなみに、以下で変更保存を監視して出力
● sass --watch file_name.scss:output.css
○ ※コロンに注意

15. 基本文法
ぱっと見こんな感じ
● いつものcss!
○ セレクター { プロパティ：値 }が基本
.main {
margin: 10px;
background-color: white;
}

16. ネスト
親要素の{}の中に子要素の{}
.main {
margin: 10px;
background-color : white;
button.submit {
background-color: red;
}
}
<div id="main">
</div>
<button type="
submit">
</button>
html

17. ネスト：セレクタ指定の色々
親子(>)隣接(+)兄弟(~)等のセレクタも
そのまま書ける
.header {
> .logo {
background-color:black;
+ .help {
background-color:green;
}
}
}

18. ネスト：プロパティ
font-sizeをfont:{size: ***}と書ける
{}内のプロパティは複数指定できる
div {
font: {
size: 20px;
color: black;
}
}

19. 親の要素&
&:{ ... }内で親の階層をセレクタに入れる
※例で言うと、&にaが入る
※余計な空白入れない事(&:hover)
a {
&:hover {
color:red;
}
}

20. 変数
$英字 : 値で変数定義
プロパティの値として使える
$blog-theme-color : yellow;
#blog_description {
margin: 10px;
background-color : $blog-theme-color;
}

21. 6つのデータ型
1. numbers (例:1.2, 13, 10px)
2. strings (例:"foo", 'bar', baz)
○ クオテーション無しでもOKだが、色やbooleanとぶつか
る可能性有るので基本は付けた方がいい
3. colors (例:blue, #04a3f9, rgba(255,0,0,0.5))
4. booleans (例: true, false)
5. nulls(例: null)
6. list(例:1.5em 1em/Helvetica,Arial,sans-serif )
○ 空白でもコンマ区切りでもOK
type-of($value)で型が見れる(@debug)

22. 変数のscope
ドキュメントルート：どこからも参照(global)
{}の内側：{}の中からだけ参照できる(local)
$global : black;
.header {
$local : white;
border : 1px solid $local; //OK
background-color : $global; //OK
}

23. 演算
四則演算可能(+-*/%)
● 「*」はかけ算
● 「%」は割り算の余り
.content {
width : (300px - 200px) / 2;
}

24. なんでCSSに演算書くの？
（１）意図を伝えるためです。
ex :
● 全体の幅:1000px / メニューの幅が200px
● だからコンテンツの幅は1000px-200pxなの!
（２）変数と組み合わせると後の変更が楽。
(そして更に分かり易くなる)
ex :
● 上の例の1000px/200pxを変数にすると、コンテンツの
幅も勝手に変わる

25. Interpolation(補完) #{...}
変数:プロパティの値にしか入らない
#{}:セレクタ/プロパティ/プロパティの値に入る
$name:foo;
$attr: border;
p.#{$name} {
#{$attr}-clolor: blue;
}

26. !defaults
!defaults
!は否定=>「デフォルト無ければ」
$content : "First";
$content : "Second" !default; // default無ければsecond
$col : black !default;
#main {
content : $content; // => "First" ※default入っているから
background-color : $col; // => black ※default無いから
}

27. @if：条件分岐
@if 条件 { ... } else { ... }
使用頻度低いがmixinと組合せ等で使うかも
$type : top;
h1 {
@if $type==top {
color:black;
}
@else {
color:white;
}
}

28. @for文：繰り返し処理
for $今の数値 from 開始数値 to 終了数値{ ... }
● これも使用頻度低い。
● 他にeach/whileもある。
@for $i from 1 to 3 {
.margin#{$i} {
margin: #{$i*100}px;
}
}

29. @import
ファイルの分割
● 普通のCSS
○ file分割して書く
■ Httpリクエスト増える
● =>遅くなる
● Sass
○ file分割して@importで指定する
■ precompileで１つのファイルにまとまる
● Httpリクエスト１つで済む
● 前者より早い

30. @import
● ファイルの結合
○ file名に「_」をつけると結合前のfileは出力されない
// style.scss
@import "common";
@import "reset";
_common.scss
_reset.scss
＋
style.css
(commonとresetと
style)

31. @extend
継承
ある要素のプロパティを引き継ぐ
.error {
border : 1px red;
}
.seriousError{
@extend .error;
border-width: 3px;
}

32. @extendの注意
● 名前の衝突が多そう
○ extendする要素はextend-から始める等rule化
● style小分け/不要な要素等でセレクタ増える
○ IE(9迄)のセレクタ4095個の制限に注意。

33. @mixin
引数付きでcssのtemplateを準備できる
@includeで呼び出す
@mixin large-text($color) {
font : {
size: 20px;
color:$color;
}
}
.content {
@include large-text(black) ; // 引数変えて共通部品使える
.main { @include large-text(red) ;}
}

34. @mixinの引数
引数は複数OK
初期値は$変数:初期値
@mixin large-text($color, $width:20px) {
font : {
size: $width;
color:$color;
}
}
.content {
@include large-text(black) ; //この場合width=初期値20
}

35. @extendと@mixinの違い
@extend
● style変更できない
● cssはセレクタに追加
するだけ
@mixin
● 引数で変更可能
● includeした部分に元
のcss出力
○ filesize膨らみ易い

36. @extendと@mixinの使い分け
「@mixinより@extend」
● ファイルサイズの節約
○ ただし、@extendで無駄な要素できる事もある
● style変化有り=>mixin

37. @debug
precompile時に出力できる
※変数や式の中身も見れる
$jikken : gray
@debug "Hello";
@debug $jikken;
@debug type-of($jikken);

38. Sass作ってみると...
clear:both等どこでも同じ部品作る事になる
初めから楽したい！
=>Compass
※大抵Sass使ってる人は
Compassも一緒に使ってる

39. compassとは
Sassを使ったframwork。
事前によく使う部品を準備

40. compass install
● CUI(無料)
○ 同じくruby install前提
○ 黒い画面(MAC:terminal/Win:startからruby)から
○ gem install compass
● GUI(有料$10)
○ MACアプリ
○ rubyのinstallすら要らない。
○ らくちん管理できるらしい。
web上でもjsdo.itがsass+compass書ける

41. 基本的な使い方
sass=>css変換
compass compile <.scssファイル>
watch
compass watch <.scssファイル>
dir指定等色々オプションある。

42. compassのmixinを使う
@import "compass";
=>compassの@mixinできるようになる

43. 定番
● ブラウザdefaultstyleの初期化
○ @include global-reset;
● float解除
○ @include clearfix;
● linkの色指定(通常/hover/active/visited/focus)
○ @include link-colors(#339,#33f,#933,#636,#333);
● 角丸
○ @include border-radius(3px);
● 他、色々便利mixinが準備されてる
○ 公式ページ

44. CSS Sprite
● 最終的なcss：
○ 画像は1つのfile=http request1回で済む
○ 各画像表示は1つの画像の位置調整で表示
● scss作る時：
○ 管理し易いように画像fileは複数
○ 画像表示

45. CSS sprite
iconディレクトリにup.png/down.pngを格納
@include all-icon-sprites;
@import "icon/*.png"
@include all-icon-sprites;
// => これで自動でclassが作られる(icon-up/icon-down)
// html側から
<span class="icon-up"></span>

46. 他に出来る事
● 関数(sin等算術計算等)
● レイアウト(grid)
● config.rbで細かく設定=>CIと繋ぐ
等々、色々出来る
必要に応じて
公式ドキュメント見ると良いかも

47. まとめ
● Sass
○ 見やすく再利用し易くなる
○ @mixin/@extendで再利用
● Compass
○ お決まりのmixin
○ 画像スプリット