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
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,374 views

Published on

sassのintroduction

Published in: Technology
  • Be the first to comment

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 ○ 画像スプリット

×