Sass introduction (jscafe 10)

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

Syntactically : 構文に関して

Awesome : 素晴らしい

StyleSheet : スタイルシート

SASSで何ができる？

CSSの中にプログラムっぽい事書ける

● ネスト● 変数● 計算● 関数● 共通化

プログラムぽく書く事で何が嬉しい？

２つのメリット

1. 可読性● 人の書いたCSS読み易くなる

2. 再利用性● 似たようなstyleを沢山書く必要無くなる

=>そして、stylesheetが構造化されていく....

でも、実際導入難しいんじゃ...

● installめんどくさいんでしょ○ MACの人は楽チンinstall○ windowsでもGUIある

● cssでもう書いちゃったから無理でしょ○ Sass内にcss=>Sassのコンバーター(sass-convert)○ 非公式に web もある

● Sassに生CSSも書けるので、

　とりあえず、Sassにして、ネストだけでもやったらCSS管理は楽になる

SASSとSCSSの違い

Sassの考え方で２つの記法がある

● 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に演算書くの？

（１）意図を伝えるためです。ex : ● 全体の幅:1000px / メニューの幅が200px● だからコンテンツの幅は1000px-200pxなの!

（２）変数と組み合わせると後の変更が楽。

(そして更に分かり易くなる)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で１つのファイルにまとまる● Httpリクエスト１つで済む● 前者より早い

@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とは

Sassを使ったframwork。事前によく使う部品を準備

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