Sass
Introduction
Ryuma Tsukano
jsCafe10
CSSの今までの流れ
● 90年代:
○ table cellでレイアウト/html属性でstyle指定
● 00年前?:
○ cssでスタイリング
● 21世紀になってから
■ htmlは大規模化=>どんどん読めなくなるcss
● 05/06...
CSS preprocessorとは?(sassを例に)
開発時:sassを作成=>cssに変換
ブラウザーから:cssを見る
● ※Sass関係無い
※Sass関係無 = 例えばbrowserからsassのif文等使えない
.sass/
.s...
CSS preprocessor系の主要な歴史
● 2006年:Sass
● 2009年:LESS ※ここから普及
● 2010年:Sass version3発表(scss記法) ※普及
● 2011年:stylus
※間違ってたらすみません。...
CSS Preprocessor
● Sass : 機能いっぱい。FWもある
● LESS : simple。clientでコンパイル。
● stylus : 細かな機能追加。まだ現在進行系?
jscafeだしstylusやりたいけど普及度が謎...
Sass
Syntactically : 構文に関して
Awesome : 素晴らしい
StyleSheet : スタイルシート
SASSで何ができる?
CSSの中にプログラムっぽい事書ける
● ネスト
● 変数
● 計算
● 関数
● 共通化
プログラムぽく書く事で何が嬉しい?
2つのメリット
1. 可読性
● 人の書いたCSS読み易くなる
2. 再利用性
● 似たようなstyleを沢山書く必要無くなる
=>そして、stylesheetが構造化されていく....
でも、実際導入難しいんじゃ...
● installめんどくさいんでしょ
○ MACの人は楽チンinstall
○ windowsでもGUIある
● cssでもう書いちゃったから無理でしょ
○ Sass内にcss=>Sassのコンバーター(sa...
SASSとSCSSの違い
Sassの考え方で2つの記法がある
● SASS記法(.sass)
○ HAMLっぽい独特な記述。
○ 元々これが元祖。
● SCSS記法(.scss)
○ SassyCSSの略。(SassっぽいCSS)
○ SASS...
参考資料
● 超入門記事
○ dotinstall
○ LINEブログの超入門記事
○ slideshareの記事
○ とても丁寧なblog記事 ★
● 書籍
○ Sass入門(電子書籍のみ) ★
○ SASS in Action(英)が今後出...
始めよう
● CUI(黒い画面)
○ ruby製
■ mac:rubyは元々install済み
■ windows:one click installerで自分でruby入れて
○ mac:ターミナル/windows:startからruby黒画...
インストールが追いつかない人へ
※もしくは、面倒くさい人へ ...
以下で、web上で簡易にsass書ける
● 公式ページ
● JsFiddle(languageでscssを選ぶ)
● jsdo.it(cssの右プルダウンからscss選択)
今...
CUIのsassの使い方
1. sassを書く
2. sassをcssにconvertする
● sass 書いたscss 出力するcss
● ex)sass file_name.scss output.css
=>この後は、output.css...
基本文法
ぱっと見こんな感じ
● いつものcss!
○ セレクター { プロパティ:値 }が基本
.main {
margin: 10px;
background-color: white;
}
ネスト
親要素の{}の中に子要素の{}
.main {
margin: 10px;
background-color : white;
button.submit {
background-color: red;
}
}
<div id="ma...
ネスト:セレクタ指定の色々
親子(>)隣接(+)兄弟(~)等のセレクタも
そのまま書ける
.header {
> .logo {
background-color:black;
+ .help {
background-color:green;...
ネスト:プロパティ
font-sizeをfont:{size: ***}と書ける
{}内のプロパティは複数指定できる
div {
font: {
size: 20px;
color: black;
}
}
親の要素&
&:{ ... }内で親の階層をセレクタに入れる
※例で言うと、&にaが入る
※余計な空白入れない事(&:hover)
a {
&:hover {
color:red;
}
}
変数
$英字 : 値で変数定義
プロパティの値として使える
$blog-theme-color : yellow;
#blog_description {
margin: 10px;
background-color : $blog-theme...
6つのデータ型
1. numbers (例:1.2, 13, 10px)
2. strings (例:"foo", 'bar', baz)
○ クオテーション無しでもOKだが、色やbooleanとぶつか
る可能性有るので基本は付けた方がいい
3...
変数のscope
ドキュメントルート:どこからも参照(global)
{}の内側:{}の中からだけ参照できる(local)
$global : black;
.header {
$local : white;
border : 1px soli...
演算
四則演算可能(+-*/%)
● 「*」はかけ算
● 「%」は割り算の余り
.content {
width : (300px - 200px) / 2;
}
なんでCSSに演算書くの?
(1)意図を伝えるためです。
ex :
● 全体の幅:1000px / メニューの幅が200px
● だからコンテンツの幅は1000px-200pxなの!
(2)変数と組み合わせると後の変更が楽。
(そして更に分かり...
Interpolation(補完) #{...}
変数:プロパティの値にしか入らない
#{}:セレクタ/プロパティ/プロパティの値に入る
$name:foo;
$attr: border;
p.#{$name} {
#{$attr}-clolo...
!defaults
!defaults
!は否定=>「デフォルト無ければ」
$content : "First";
$content : "Second" !default; // default無ければsecond
$col : black ...
@if:条件分岐
@if 条件 { ... } else { ... }
使用頻度低いがmixinと組合せ等で使うかも
$type : top;
h1 {
@if $type==top {
color:black;
}
@else {
colo...
@for文:繰り返し処理
for $今の数値 from 開始数値 to 終了数値{ ... }
● これも使用頻度低い。
● 他にeach/whileもある。
@for $i from 1 to 3 {
.margin#{$i} {
margi...
@import
ファイルの分割
● 普通のCSS
○ file分割して書く
■ Httpリクエスト増える
● =>遅くなる
● Sass
○ file分割して@importで指定する
■ precompileで1つのファイルにまとまる
● Ht...
@import
● ファイルの結合
○ file名に「_」をつけると結合前のfileは出力されない
// style.scss
@import "common";
@import "reset";
_common.scss
_reset.scs...
@extend
継承
ある要素のプロパティを引き継ぐ
.error {
border : 1px red;
}
.seriousError{
@extend .error;
border-width: 3px;
}
@extendの注意
● 名前の衝突が多そう
○ extendする要素はextend-から始める等rule化
● style小分け/不要な要素等でセレクタ増える
○ IE(9迄)のセレクタ4095個の制限に注意。
@mixin
引数付きでcssのtemplateを準備できる
@includeで呼び出す
@mixin large-text($color) {
font : {
size: 20px;
color:$color;
}
}
.content {...
@mixinの引数
引数は複数OK
初期値は$変数:初期値
@mixin large-text($color, $width:20px) {
font : {
size: $width;
color:$color;
}
}
.content {...
@extendと@mixinの違い
@extend
● style変更できない
● cssはセレクタに追加
するだけ
@mixin
● 引数で変更可能
● includeした部分に元
のcss出力
○ filesize膨らみ易い
@extendと@mixinの使い分け
「@mixinより@extend」
● ファイルサイズの節約
○ ただし、@extendで無駄な要素できる事もある
● style変化有り=>mixin
@debug
precompile時に出力できる
※変数や式の中身も見れる
$jikken : gray
@debug "Hello";
@debug $jikken;
@debug type-of($jikken);
Sass作ってみると...
clear:both等どこでも同じ部品作る事になる
初めから楽したい!
=>Compass
※大抵Sass使ってる人は
Compassも一緒に使ってる
compassとは
Sassを使ったframwork。
事前によく使う部品を準備
compass install
● CUI(無料)
○ 同じくruby install前提
○ 黒い画面(MAC:terminal/Win:startからruby)から
○ gem install compass
● GUI(有料$10)
○ ...
基本的な使い方
sass=>css変換
compass compile <.scssファイル>
watch
compass watch <.scssファイル>
dir指定等色々オプションある。
compassのmixinを使う
@import "compass";
=>compassの@mixinできるようになる
定番
● ブラウザdefaultstyleの初期化
○ @include global-reset;
● float解除
○ @include clearfix;
● linkの色指定(通常/hover/active/visited/focus...
CSS Sprite
● 最終的なcss:
○ 画像は1つのfile=http request1回で済む
○ 各画像表示は1つの画像の位置調整で表示
● scss作る時:
○ 管理し易いように画像fileは複数
○ 画像表示
CSS sprite
iconディレクトリにup.png/down.pngを格納
@include all-icon-sprites;
@import "icon/*.png"
@include all-icon-sprites;
// => ...
他に出来る事
● 関数(sin等算術計算等)
● レイアウト(grid)
● config.rbで細かく設定=>CIと繋ぐ
等々、色々出来る
必要に応じて
公式ドキュメント見ると良いかも
まとめ
● Sass
○ 見やすく再利用し易くなる
○ @mixin/@extendで再利用
● Compass
○ お決まりのmixin
○ 画像スプリット
Upcoming SlideShare
Loading in …5
×

Sass introduction (jscafe 10)

1,207 views
1,133 views

Published on

sassのintroduction

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,207
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
5
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Sass introduction (jscafe 10)

  1. 1. Sass Introduction Ryuma Tsukano jsCafe10
  2. 2. CSSの今までの流れ ● 90年代: ○ table cellでレイアウト/html属性でstyle指定 ● 00年前?: ○ cssでスタイリング ● 21世紀になってから ■ htmlは大規模化=>どんどん読めなくなるcss ● 05/06年辺りから: ○ CSSメタ言語(PreProcessor)が登場★ ○ '09 LESS登場後、現場での事例も続々と... ● 最近: ○ 数年前からoocss等、cssの構造化、framework化
  3. 3. CSS preprocessorとは?(sassを例に) 開発時:sassを作成=>cssに変換 ブラウザーから:cssを見る ● ※Sass関係無い ※Sass関係無 = 例えばbrowserからsassのif文等使えない .sass/ .scss .css .css .html この変換を するのが CSS Preprocessor 皆が作るファイル ユーザーが見るファイル
  4. 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. 5. CSS Preprocessor ● Sass : 機能いっぱい。FWもある ● LESS : simple。clientでコンパイル。 ● stylus : 細かな機能追加。まだ現在進行系? jscafeだしstylusやりたいけど普及度が謎。 ● Sass/LESSが一般的か!?ややSASS多い? ● LESSが先に普及?=>その後、SassがSCSS記 法(後述)採用してから普及? ● LESS->Sass移る人いても逆はいない
  6. 6. Sass Syntactically : 構文に関して Awesome : 素晴らしい StyleSheet : スタイルシート
  7. 7. SASSで何ができる? CSSの中にプログラムっぽい事書ける ● ネスト ● 変数 ● 計算 ● 関数 ● 共通化
  8. 8. プログラムぽく書く事で何が嬉しい? 2つのメリット 1. 可読性 ● 人の書いたCSS読み易くなる 2. 再利用性 ● 似たようなstyleを沢山書く必要無くなる =>そして、stylesheetが構造化されていく....
  9. 9. でも、実際導入難しいんじゃ... ● installめんどくさいんでしょ ○ MACの人は楽チンinstall ○ windowsでもGUIある ● cssでもう書いちゃったから無理でしょ ○ Sass内にcss=>Sassのコンバーター(sass-convert) ○ 非公式に web もある ● Sassに生CSSも書けるので、  とりあえず、Sassにして、ネストだけでもやったら CSS管理は楽になる
  10. 10. SASSとSCSSの違い Sassの考え方で2つの記法がある ● SASS記法(.sass) ○ HAMLっぽい独特な記述。 ○ 元々これが元祖。 ● SCSS記法(.scss) ○ SassyCSSの略。(SassっぽいCSS) ○ SASS ver3内の記法なので、コンパイラはSASS。 ○ cssっぽく可読性高い。 ○ 通常こちらを使う。今日の話もこちら。 ○ CSSもそのまま書けるので、SCSS記法でいつものCSS 書いておいて、少しずつSASSを覚えて書いて行くという のも可能。 ■ ちなみに、単にネストするだけでも効果的。
  11. 11. 参考資料 ● 超入門記事 ○ dotinstall ○ LINEブログの超入門記事 ○ slideshareの記事 ○ とても丁寧なblog記事 ★ ● 書籍 ○ Sass入門(電子書籍のみ) ★ ○ SASS in Action(英)が今後出るみたい($35) ● 公式Page ○ reference ★
  12. 12. 始めよう ● CUI(黒い画面) ○ ruby製 ■ mac:rubyは元々install済み ■ windows:one click installerで自分でruby入れて ○ mac:ターミナル/windows:startからruby黒画面起動 ■ gem install sass ● GUI(グラフィカルなツール) ○ scout
  13. 13. インストールが追いつかない人へ ※もしくは、面倒くさい人へ ... 以下で、web上で簡易にsass書ける ● 公式ページ ● JsFiddle(languageでscssを選ぶ) ● jsdo.it(cssの右プルダウンからscss選択) 今日は一旦これでもいいかもね。
  14. 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. 15. 基本文法 ぱっと見こんな感じ ● いつものcss! ○ セレクター { プロパティ:値 }が基本 .main { margin: 10px; background-color: white; }
  16. 16. ネスト 親要素の{}の中に子要素の{} .main { margin: 10px; background-color : white; button.submit { background-color: red; } } <div id="main"> </div> <button type=" submit"> </button> html
  17. 17. ネスト:セレクタ指定の色々 親子(>)隣接(+)兄弟(~)等のセレクタも そのまま書ける .header { > .logo { background-color:black; + .help { background-color:green; } } }
  18. 18. ネスト:プロパティ font-sizeをfont:{size: ***}と書ける {}内のプロパティは複数指定できる div { font: { size: 20px; color: black; } }
  19. 19. 親の要素& &:{ ... }内で親の階層をセレクタに入れる ※例で言うと、&にaが入る ※余計な空白入れない事(&:hover) a { &:hover { color:red; } }
  20. 20. 変数 $英字 : 値で変数定義 プロパティの値として使える $blog-theme-color : yellow; #blog_description { margin: 10px; background-color : $blog-theme-color; }
  21. 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. 22. 変数のscope ドキュメントルート:どこからも参照(global) {}の内側:{}の中からだけ参照できる(local) $global : black; .header { $local : white; border : 1px solid $local; //OK background-color : $global; //OK }
  23. 23. 演算 四則演算可能(+-*/%) ● 「*」はかけ算 ● 「%」は割り算の余り .content { width : (300px - 200px) / 2; }
  24. 24. なんでCSSに演算書くの? (1)意図を伝えるためです。 ex : ● 全体の幅:1000px / メニューの幅が200px ● だからコンテンツの幅は1000px-200pxなの! (2)変数と組み合わせると後の変更が楽。 (そして更に分かり易くなる) ex : ● 上の例の1000px/200pxを変数にすると、コンテンツの 幅も勝手に変わる
  25. 25. Interpolation(補完) #{...} 変数:プロパティの値にしか入らない #{}:セレクタ/プロパティ/プロパティの値に入る $name:foo; $attr: border; p.#{$name} { #{$attr}-clolor: blue; }
  26. 26. !defaults !defaults !は否定=>「デフォルト無ければ」 $content : "First"; $content : "Second" !default; // default無ければsecond $col : black !default; #main { content : $content; // => "First" ※default入っているから background-color : $col; // => black ※default無いから }
  27. 27. @if:条件分岐 @if 条件 { ... } else { ... } 使用頻度低いがmixinと組合せ等で使うかも $type : top; h1 { @if $type==top { color:black; } @else { color:white; } }
  28. 28. @for文:繰り返し処理 for $今の数値 from 開始数値 to 終了数値{ ... } ● これも使用頻度低い。 ● 他にeach/whileもある。 @for $i from 1 to 3 { .margin#{$i} { margin: #{$i*100}px; } }
  29. 29. @import ファイルの分割 ● 普通のCSS ○ file分割して書く ■ Httpリクエスト増える ● =>遅くなる ● Sass ○ file分割して@importで指定する ■ precompileで1つのファイルにまとまる ● Httpリクエスト1つで済む ● 前者より早い
  30. 30. @import ● ファイルの結合 ○ file名に「_」をつけると結合前のfileは出力されない // style.scss @import "common"; @import "reset"; _common.scss _reset.scss + style.css (commonとresetと style)
  31. 31. @extend 継承 ある要素のプロパティを引き継ぐ .error { border : 1px red; } .seriousError{ @extend .error; border-width: 3px; }
  32. 32. @extendの注意 ● 名前の衝突が多そう ○ extendする要素はextend-から始める等rule化 ● style小分け/不要な要素等でセレクタ増える ○ IE(9迄)のセレクタ4095個の制限に注意。
  33. 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. 34. @mixinの引数 引数は複数OK 初期値は$変数:初期値 @mixin large-text($color, $width:20px) { font : { size: $width; color:$color; } } .content { @include large-text(black) ; //この場合width=初期値20 }
  35. 35. @extendと@mixinの違い @extend ● style変更できない ● cssはセレクタに追加 するだけ @mixin ● 引数で変更可能 ● includeした部分に元 のcss出力 ○ filesize膨らみ易い
  36. 36. @extendと@mixinの使い分け 「@mixinより@extend」 ● ファイルサイズの節約 ○ ただし、@extendで無駄な要素できる事もある ● style変化有り=>mixin
  37. 37. @debug precompile時に出力できる ※変数や式の中身も見れる $jikken : gray @debug "Hello"; @debug $jikken; @debug type-of($jikken);
  38. 38. Sass作ってみると... clear:both等どこでも同じ部品作る事になる 初めから楽したい! =>Compass ※大抵Sass使ってる人は Compassも一緒に使ってる
  39. 39. compassとは Sassを使ったframwork。 事前によく使う部品を準備
  40. 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. 41. 基本的な使い方 sass=>css変換 compass compile <.scssファイル> watch compass watch <.scssファイル> dir指定等色々オプションある。
  42. 42. compassのmixinを使う @import "compass"; =>compassの@mixinできるようになる
  43. 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. 44. CSS Sprite ● 最終的なcss: ○ 画像は1つのfile=http request1回で済む ○ 各画像表示は1つの画像の位置調整で表示 ● scss作る時: ○ 管理し易いように画像fileは複数 ○ 画像表示
  45. 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. 46. 他に出来る事 ● 関数(sin等算術計算等) ● レイアウト(grid) ● config.rbで細かく設定=>CIと繋ぐ 等々、色々出来る 必要に応じて 公式ドキュメント見ると良いかも
  47. 47. まとめ ● Sass ○ 見やすく再利用し易くなる ○ @mixin/@extendで再利用 ● Compass ○ お決まりのmixin ○ 画像スプリット

×