SassIntroduction
Ryuma Tsukano
jsCafe10
CSSの今までの流れ
● 90年代:○ table cellでレイアウト/html属性でstyle指定
● 00年前?:○ cssでスタイリング
● 21世紀になってから■ htmlは大規模化=>どんどん読めなくなるcss
● 05/06年辺りから:○ CSSメタ言語(PreProcessor)が登場★○ '09 LESS登場後、現場での事例も続々と...
● 最近:○ 数年前からoocss等、cssの構造化、framework化
CSS preprocessorとは?(sassを例に)
開発時:sassを作成=>cssに変換
ブラウザーから:cssを見る● ※Sass関係無い
※Sass関係無 = 例えばbrowserからsassのif文等使えない
.sass/
.scss .css
.css.html
この変換をするのが
CSS Preprocessor
皆が作るファイル ユーザーが見るファイル
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等
CSS Preprocessor
● Sass : 機能いっぱい。FWもある● LESS : simple。clientでコンパイル。● stylus : 細かな機能追加。まだ現在進行系?
jscafeだしstylusやりたいけど普及度が謎。
● Sass/LESSが一般的か!?ややSASS多い?● LESSが先に普及?=>その後、SassがSCSS記
法(後述)採用してから普及?● LESS->Sass移る人いても逆はいない
SASSで何ができる?
CSSの中にプログラムっぽい事書ける
● ネスト● 変数● 計算● 関数● 共通化
プログラムぽく書く事で何が嬉しい?
2つのメリット
1. 可読性● 人の書いたCSS読み易くなる
2. 再利用性● 似たようなstyleを沢山書く必要無くなる
=>そして、stylesheetが構造化されていく....
でも、実際導入難しいんじゃ...
● installめんどくさいんでしょ○ MACの人は楽チンinstall○ windowsでもGUIある
● cssでもう書いちゃったから無理でしょ○ Sass内にcss=>Sassのコンバーター(sass-convert)○ 非公式に web もある
● Sassに生CSSも書けるので、
とりあえず、Sassにして、ネストだけでもやったらCSS管理は楽になる
SASSとSCSSの違い
Sassの考え方で2つの記法がある
● SASS記法(.sass)○ HAMLっぽい独特な記述。○ 元々これが元祖。
● SCSS記法(.scss)○ SassyCSSの略。(SassっぽいCSS)○ SASS ver3内の記法なので、コンパイラはSASS。○ cssっぽく可読性高い。○ 通常こちらを使う。今日の話もこちら。○ CSSもそのまま書けるので、SCSS記法でいつものCSS
書いておいて、少しずつSASSを覚えて書いて行くというのも可能。■ ちなみに、単にネストするだけでも効果的。
参考資料
● 超入門記事○ dotinstall○ LINEブログの超入門記事○ slideshareの記事○ とても丁寧なblog記事 ★
● 書籍○ Sass入門(電子書籍のみ) ★○ SASS in Action(英)が今後出るみたい($35)
● 公式Page○ reference ★
始めよう
● CUI(黒い画面)○ ruby製
■ mac:rubyは元々install済み■ windows:one click installerで自分でruby入れて
○ mac:ターミナル/windows:startからruby黒画面起動■ gem install sass
● GUI(グラフィカルなツール)○ scout
インストールが追いつかない人へ
※もしくは、面倒くさい人へ ...
以下で、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を呼べばいつも通り。
※ちなみに、以下で変更保存を監視して出力
● sass --watch file_name.scss:output.css○ ※コロンに注意
基本文法
ぱっと見こんな感じ
● いつものcss!○ セレクター { プロパティ:値 }が基本
.main { margin: 10px; background-color: white;}
ネスト
親要素の{}の中に子要素の{}
.main { margin: 10px; background-color : white;
button.submit { background-color: red; }}
<div id="main">
</div>
<button type="submit">
</button>
html
ネスト:セレクタ指定の色々
親子(>)隣接(+)兄弟(~)等のセレクタも
そのまま書ける
.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-color;}
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)
変数のscope
ドキュメントルート:どこからも参照(global){}の内側:{}の中からだけ参照できる(local)
$global : black;.header { $local : white; border : 1px solid $local; //OK background-color : $global; //OK}
演算
四則演算可能(+-*/%)● 「*」はかけ算● 「%」は割り算の余り
.content { width : (300px - 200px) / 2;}
なんでCSSに演算書くの?
(1)意図を伝えるためです。ex : ● 全体の幅:1000px / メニューの幅が200px● だからコンテンツの幅は1000px-200pxなの!
(2)変数と組み合わせると後の変更が楽。
(そして更に分かり易くなる)ex : ● 上の例の1000px/200pxを変数にすると、コンテンツの
幅も勝手に変わる
Interpolation(補完) #{...}
変数:プロパティの値にしか入らない
#{}:セレクタ/プロパティ/プロパティの値に入る
$name:foo;$attr: border;p.#{$name} { #{$attr}-clolor: blue;}
!defaults
!defaults!は否定=>「デフォルト無ければ」
$content : "First";$content : "Second" !default; // default無ければsecond$col : black !default;#main { content : $content; // => "First" ※default入っているから background-color : $col; // => black ※default無いから}
@if:条件分岐
@if 条件 { ... } else { ... }使用頻度低いがmixinと組合せ等で使うかも
$type : top;h1 { @if $type==top { color:black; } @else { color:white; }}
@for文:繰り返し処理
for $今の数値 from 開始数値 to 終了数値{ ... }● これも使用頻度低い。● 他にeach/whileもある。
@for $i from 1 to 3 { .margin#{$i} { margin: #{$i*100}px; }}
@import
ファイルの分割
● 普通のCSS○ file分割して書く
■ Httpリクエスト増える● =>遅くなる
● Sass○ file分割して@importで指定する
■ precompileで1つのファイルにまとまる● Httpリクエスト1つで済む● 前者より早い
@import
● ファイルの結合○ file名に「_」をつけると結合前のfileは出力されない
// style.scss
@import "common";@import "reset";
_common.scss
_reset.scss
+
style.css(commonとresetとstyle)
@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 { @include large-text(black) ; // 引数変えて共通部品使える .main { @include large-text(red) ;}}
@mixinの引数
引数は複数OK初期値は$変数:初期値
@mixin large-text($color, $width:20px) { font : { size: $width; color:$color; }}.content { @include large-text(black) ; //この場合width=初期値20}
@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 install
● CUI(無料)○ 同じくruby install前提○ 黒い画面(MAC:terminal/Win:startからruby)から○ gem install compass
● GUI(有料$10)○ MACアプリ○ rubyのinstallすら要らない。○ らくちん管理できるらしい。
web上でもjsdo.itがsass+compass書ける
基本的な使い方
sass=>css変換
compass compile <.scssファイル>
watchcompass watch <.scssファイル>
dir指定等色々オプションある。
compassのmixinを使う
@import "compass";=>compassの@mixinできるようになる
定番
● ブラウザ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が準備されてる○ 公式ページ
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;// => これで自動でclassが作られる(icon-up/icon-down)
// html側から<span class="icon-up"></span>
他に出来る事
● 関数(sin等算術計算等)● レイアウト(grid)● config.rbで細かく設定=>CIと繋ぐ
等々、色々出来る
必要に応じて公式ドキュメント見ると良いかも
まとめ
● Sass○ 見やすく再利用し易くなる○ @mixin/@extendで再利用
● Compass○ お決まりのmixin○ 画像スプリット