css preprocessorの始めかた

CSSの未来を先取り！

CSS Preprocessorの始めかた

@adactio (CC BY2.0)

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

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

CSSPreprocessor

#main { float: right;}#main p { margin-bottom: 1em;}

#main { float: right; p { margin-bottom: 1em; }}


CSSPreprocessor

CSS Sprite

Vendor Prefix

Variable

Mixin

Nesting

extend

+

一緒に使うのでいちいち覚えなくてもOK

Sass・Compassのメリット

CSS Sprite

Vendor Prefix

Variable

Mixin

Nesting

extend

+

.box { @include border-radius(5px);}

.box { @include border-radius(5px);}

.box { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px;}

CSS Sprite

Vendor Prefix

Variable

Mixin

Nesting

extend

+

#main { float: right; p { margin-bottom: 1em; }}


省力？@epSos.de (CC BY 2.0)

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


まだまだ@epSos.de (CC BY 2.0)



#main { margin: 5px; a { text-decoration: none; &.link { display: inline-block; } &:hover { color: #F00; } }}

Sass

#main { margin: 5px;}#main a { text-decoration: none;}#main a.link { display: inline-block;}#main a:hover { color: #F00;}

CSS

#main { margin: 5px; a { text-decoration: none; &.link { display: inline-block; } &:hover { color: #F00; } }}

Sass

#main { margin: 5px;}#main a { text-decoration: none;}#main a.link { display: inline-block;}#main a:hover { color: #F00;}

CSS

ZERGE_VIOLATOR (CC BY 2.0)

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


Media Queries

ZERGE_VIOLATOR (CC BY 2.0)



#main { float: left; width: 700px; margin: 0 auto;}@media screen and (max-width: 640px) { #main { float: none; width: 100%; }}

CSS

#main { float: left; width: 700px; margin: 0 auto; @media screen and (max-width:640px) { float: none; width: 100%; }}

Sass

#main { float: left; width: 700px; margin: 0 auto;}@media screen and (max-width: 640px) { #main { float: none; width: 100%; }}

CSS

#main { float: left; width: 700px; margin: 0 auto; @media screen and (max-width:640px) { float: none; width: 100%; }}

Sass

CSS Sprite

Vendor Prefix

Variable

Mixin

Nesting

extend

+

photo by pakutaso.com

http://www.pakutaso.com/


座標・幅指定

ブラウザキャッシュ




座標・幅指定

めんどくさい。

ブラウザキャッシュ




読み込み

読み込み

.logoArea { text-indent: 100%; overflow: hidden; white-space: normal; width: image-width(sprite-file($share-sprite,"logo")); height: image-height(sprite-file($share-sprite,"logo")); background-image: $share-sprite-url; background-repeat: no-repeat; background-position: sprite-position($share-sprite,"logo");}

$share-sprite: sprite-map("share/*.png");$share-sprite-url: sprite-url($share-sprite);


.logoArea { text-indent: 100%; overflow: hidden; white-space: normal; width: 419px; height: 62px; background-image: url('/img/share-s6664b1cfc3.png'); background-repeat: no-repeat; background-position: 0 0;}

CSS Sprite

Vendor Prefix

Variable

Mixin

Nesting

extend

+

import.css

@import url(reset.css);@import url(module.css);@import url(style.css);


import.css

@import url(reset.css);@import url(module.css);@import url(style.css);△


import.css



↓↓

↓↓

↓

....

....

import.css



↓↓

↓↓

↓

....

.... △

import.scss

@import "reset";@import "module";@import "style";

import.css

/*--- reset */html { overflow-y: scroll;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,

#header {}


↓↓

↓↓

↓

....

....


↓↓

↓↓

↓

....

....

$compass compile -s compressed style.scss


↓↓

↓↓

↓

....

....

#main{float:right;}#main p{margin-bottom:1em;}

$compass compile -s compressed style.scss

Try it!

@!ickrized (CC BY 2.0)

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

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

お試しなので、コマンドプロンプトは使いません

×

インストーラーをダウンロード

Scout - Compass and Sass without all the hasslehttp://mhs.github.com/scout-app/

http://mhs.github.com/scout-app/

http://mhs.github.com/scout-app/

インストーラーをダウンロード

インストーラーに従って進むだけ

Input FolderSassファイルのディレクトリ

Input FolderSassファイルのディレクトリ

Output FolderCSSファイルのディレクトリ

site_data

css

_scssstyle.scss

style.css

Input Folder

Output Folder

Images Folder画像フォルダー（Sprite時）


Output Style書き出しスタイル

Nested 入れ子でExpanded よく書く感じのCompact 1行スタイルCompressed 改行スペース削除

Nested#main { width: 700px; float: left; } #main p { margin: 5px; }

Expanded#main { width: 700px; float: left;}#main p { margin: 5px;}

Compact

#main { width: 700px; float: left; }#main p { margin: 5px; }

Compressed

#main{width:700px;float:left}#main p{margin:5px}


可読性ファイルサイズ

高

低

大

低


可読性ファイルサイズ

高

低

大

低

作業中

リリース時


Output Style書き出しスタイル


style.scss

style.scss style.css

style.scss style.css

×

site_data

css

_scssstyle.scss

style.css

site_data

css

_scssstyle.scss

保存

Try! Try!Try!

@Camera Eye Photography (CC BY 2.0)

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


既存のサイトのコピー

を作って、

その中で実験！

まずは、

SassのあるあるSassのあるある

@erix! (CC BY 2.0)

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

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

>>> Change detected at 16:05:43 to: style.scsserror style.scss (Line 6: Undefined mixin 'border-radius'.)overwrite style.css

この前後があやしい

CSS3のベンダープリフィックスには、Compassをインポートします

>>> Change detected at 16:41:11 to: style.scsserror style.scss (Line 4: Invalid CSS after " /zoom": expected /\//, was ":1;")overwrite style.css

この前後があやしい

プロパティの前に「/」があるとエラーを返します

まとめ

最初は難しい

@mikebaird (CC BY 2.0)

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


慣れたら最強

@mikebaird (CC BY 2.0)



CSSの文法が正しければコンパイルOK

IE用ハックを書き換えるぐらい

既存のCSSをScoutに通してエラーを一つ一つ潰す

Try! Try!Try!

@Camera Eye Photography (CC BY 2.0)



既存のサイトのコピー

を作って、

その中で実験！

まずは、

@owenwbrown (CC BY 2.0)

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

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

参考ページ

【Sassを覚えよう！】もくじ的なのと参考リンク - CSS HappyLifehttp://css-happylife.com/archives/2012/0130_0415.php

http://css-happylife.com/archives/2012/0130_0415.php

http://css-happylife.com/archives/2012/0130_0415.php

DreamweaverでSassファイルを編集するには？ | Webデザインのタネhttp://oshare.jugem.cc/?eid=795

http://oshare.jugem.cc/?eid=795

http://oshare.jugem.cc/?eid=795

css preprocessorの始めかた

Technology