Weitere ähnliche Inhalte
Ähnlich wie Sass introduction (jscafe 10) (20)
Mehr von Ryuma Tsukano (10)
Kürzlich hochgeladen (11)
Sass introduction (jscafe 10)
- 2. CSSの今までの流れ
● 90年代:
○ table cellでレイアウト/html属性でstyle指定
● 00年前?:
○ cssでスタイリング
● 21世紀になってから
■ htmlは大規模化=>どんどん読めなくなるcss
● 05/06年辺りから:
○ CSSメタ言語(PreProcessor)が登場★
○ '09 LESS登場後、現場での事例も続々と...
● 最近:
○ 数年前からoocss等、cssの構造化、framework化
- 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移る人いても逆はいない
- 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
- 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)
- 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;
}
}
- 40. compass install
● CUI(無料)
○ 同じくruby install前提
○ 黒い画面(MAC:terminal/Win:startからruby)から
○ gem install compass
● GUI(有料$10)
○ MACアプリ
○ rubyのinstallすら要らない。
○ らくちん管理できるらしい。
web上でもjsdo.itがsass+compass書ける
- 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は複数
○ 画像表示