sassられ指南

Sassられ指南in UPGRADE JAPAN!!

2011.6.4 satby @taiju

2011年6月6日月曜日

自己紹介名前: 東大樹（Higashi Taiju）勤務先: ベースライン株式會社職種: テクニカルディレクターブログ: あと味Twitter: @taijufacebook: facebook.com/taiju.higashi


http://d.hatena.ne.jp/jdg/

http://d.hatena.ne.jp/jdg/

http://twitter.com/taiju

http://twitter.com/taiju

http://facebook.com/taiju.higashi

http://facebook.com/taiju.higashi

Agenda• Sassとは？• Sassを使った場合の制作フロー• Sassるとは？• Sassられ指南その1: 入れ子• Sassられ指南その2: 変数・演算• Sassられ指南その3: @mixin• Sassられ指南その4: @import• まとめ


• CSSの至らないところを補って、さらに便利に拡張したCSSメタ言語（since 2009）

• 主な利用者はRubyプログラマ（でした）• 2010年5月にCSS完全互換のSCSSという新シンタックスを公開

• 記法は.sassか.scssを選べる• SCSSは見た目が限りなくCSSに近い• マークアップエンジニア界隈で流行りはじめてるっぽい

Sassとは？


Sassとは？


http://sass-lang.com/

http://sass-lang.com/

Sassとは？$main-color: #ce4dd6;$style: solid;

#navbar { border-bottom: { color: $main-color; style: $style; }}

a { color: $main-color; &:hover { border-bottom: $style 1px; }}


1. style.scssを書く2. sassコマンドでstyle.scssをstyle.cssに変換

3. style.cssをlink要素で読み込む

Sassを使った場合の制作フロー


黒い画面が必要です


$ sass style.scss:style.css

sassコマンド

変換前のファイル名

変換後のファイル名


変換前$main-color: #ce4dd6;$style: solid;

#navbar { border-bottom: { color: $main-color; style: $style; }}

a { color: $main-color; &:hover { border-bottom: $style 1px; }}


変換前#navbar { border-bottom-color: #ce4dd6; border-bottom-style: solid; }

a { color: #ce4dd6; } a:hover { border-bottom: solid 1px; }


出力形式は好みによって


$ sass -t compact style.scss:style.css

出力形式

$ sass -t compressed style.scss:style.css$ sass -t expanded style.scss:style.css

出力形式を選択するコマンドオプション


もっと楽なおすすめなやつ


更新の監視自動出力

$ sass --watch style.scss:style.css


Sassるとは？

CSSにて苦痛に悩まされている人を優しくケアすること


少しでもプログラミングをかじったことがある人はCSSの冗長性に我慢出来ない


プログラマは怠慢


プログラマ以外ももっと楽しましょう


Sassられ方を指南します


子孫セレクタを使ったCSSの記述パターン

#contents { ... }#contents .news { ... }#contents .news .twitter { ... }#contents .news .blog { ... }#contents .news .twitter ul { ... }...


えっ、なんで同じセレクタを何度も書かなきゃいけないの？


By stevendepolohttp://flic.kr/p/81Z1JA

ストレス


http://www.flickr.com/photos/stevendepolo/

http://www.flickr.com/photos/stevendepolo/

http://flic.kr/p/81Z1JA


By Zoeffhttp://flic.kr/p/9nd9y6

Sassられよう


http://www.flickr.com/photos/zoeff/




SCSSの記述パターン#contents { ... .news { ... .twitter { ... ul { ... } } .blog { ... } }}


同じセレクタを何度も記述する必要はなくなりますHTML構造の変更にも強くなります


SCSSの記述パターン（その他）

/* 擬似セレクタ */a { &:link { ... } &:visited { ... } &:hover { ... } &:active { ... }}

/* class */#nav ul li { &.selected { ... }}

/* プロパティ */h1 { font: { family: Verdana; size: 130%; weight: bold; }}


変数を使わないCSSの記述パターン

#header { background-color: #349ac1;}・・・省略・・・#footer { background-color: #349ac1;}


えっ、このカラーコード何度も使うのに毎回コピペするの？

変更したら全部置換するの？


By Lara604http://flic.kr/p/4BnRVs

ストレス


http://www.flickr.com/photos/lara604/

http://www.flickr.com/photos/lara604/




Sassられよう






変数を使ったSCSSの記述パターン

$base-color: #349ac1;

#header { background-color: $base-color;}・・・省略・・・#footer { background-color: $base-color;}


何度も使う値は変数に代入できます任意の名前でわかりやすくできます

変更にも強くなります


演算もできます


変数と演算を使ったSCSSの記述パターン

$body_width: 1100px;$sidenav_width: 200px;

#contents {　　width: $body_width - $sidenav_width;}

$base-color: #666;#header { background-color: $base-color; .navigation { background-color: darken($base-color, 40%); }}


演算を使うことで電卓が不要になります場合によっては便利な関数も使えます


clearfix

#header { \zoom: 1;}#header:after { content: ‘’; display: block; clear: both; height: 0;}

#contents { \zoom: 1;}#contents:after { content: ‘’; display: block; clear: both; height: 0;}

※普通はこれがめんどいので、classを作ると思いますが...


えっ、クリアランスしたい要素すべてに

こんなめんどい記述するの？


By mdanyshttp://flic.kr/p/6JMMkb

ストレス


http://www.flickr.com/photos/mindaugasdanys/

http://www.flickr.com/photos/mindaugasdanys/




Sassられよう






Mixinを使ったclearfix

@mixin clearfix { \zoom: 1; &:after { content: ‘’; display: block; clear: both; height: 0; }}

#header { @include clearfix; ...}#contents { @include clearfix; ...}


プロパティの固まりを共有できます@includeすると中に展開されます最初は変数の高機能版と捉えればOK


似たような機能で@extendというものもありますが気になる方は「あと味」の以下の記事を

参照ください

Sassの@extendでCSSとHTMLをシンプルにhttp://d.hatena.ne.jp/jdg/20110603/1307084785


http://d.hatena.ne.jp/jdg/20110603/1307084785




その他@mixinと変数・演算を使ったCSS Spritesの事例もあります

SassでCSS Spritesをなるべく簡単に書きたいhttp://d.hatena.ne.jp/jdg/20110521/1305980066






今後しばらく今日紹介しきれなかったSassのことを

フォローアップをかねてブログに書いていく予定です


CSSの@import

@import “common.css”;@import “home.css”;@import “about.css”;@import “contact.css”;@import “news.css”;


えっ、httpリクエストが毎行発生するの？

気軽にファイル分けたいだけなんだけど


By sahlgoodehttp://flic.kr/p/8NydEa

ストレス


http://www.flickr.com/photos/sahlgoode/

http://www.flickr.com/photos/sahlgoode/




Sassられよう






SCSSの@import

@import “common.scss”;@import “home.scss”;@import “about.scss”;@import “contact.scss”;@import “news.scss”;


見た目は拡張子以外変わりませんが動作は全然違います


/* 毎行HTTPリクエストが発生 */@import “common.css”;@import “home.css”;@import “about.css”;@import “contact.css”;@import “news.css”;

/* すべて@importの記述されたscssに結合 */@import “common.scss”;@import “home.scss”;@import “about.scss”;@import “contact.scss”;@import “news.scss”;


httpリクエストは1回で済みますSCSSで別ファイルとして管理できます


大きめのCSSフレームワークなどを気軽にimportできます


Sassを使い始めて感じたこと• 環境依存がないので、どのようなタイミングからでも導入できる

• 仕様が小さいので習得が楽• ネストのやりすぎは逆に読みにくくなることがある• 使い回しが効きやすいので、CSSを設計しようという気になる

• ついでにminifyするようになった• Sass使わせてもらえないと発狂する体質になった


ぜひ、Sassられましょう


きっと、CSSを使い慣れている人の方がより良い使い方が思いつくはずです


Sassを使い始めて感じたこと• 環境依存がないので、どのようなタイミングからでも導入できる

• 仕様が小さいので習得が楽• ネストのやりすぎは逆に読みにくくなることがある• 使い回しが効きやすいので、CSSを設計しようという気になる

• ついでにminifyするようになった• Sass使わせてもらえないと発狂する体質になった


おすすめ記事• Webデザイナーの為の「本当は怖くない」”黒い画面”http://fjord.jp/love/548.html （Part1～Part9まであります）

• Sass徹底解説～SassがもたらすCSSのパラダイムシフトhttp://cssnite.jp/afterdark/cpi/vol01/

• Sass、そしてSassy SCC(SCSS)http://hail2u.net/documents/sass-and-sassy-css.html


http://fjord.jp/love/548.html




http://cssnite.jp/afterdark/cpi/vol01/






http://hail2u.net/documents/sass-and-sassy-css.html




ご清聴ありがとうございました


sassられ指南

Technology