css preprocessorの始めかた

CSSの未来を先取り！

CSS Preprocessorの始めかた

@adactio (CC BY2.0)

CSSPreprocessor

CSSPreprocessor

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

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

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

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

CSSPreprocessor

CSSPreprocessor

+

CSS Sprite

Vendor Prefix

Variable

Mixin

Nesting

extend

+

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

Sass・Compassのメリット

CSS Sprite

Vendor Prefix

Variable

Mixin

Nesting

extend

+

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

+

CSS Sprite

Vendor Prefix

Variable

Mixin

Nesting

extend

+

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

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

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

まだまだ@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;    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)

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) {  #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) {        float: none;        width: 100%;    }}

Sass

CSS Sprite

Vendor Prefix

Variable

Mixin

Nesting

extend

+

CSS Sprite

Vendor Prefix

Variable

Mixin

Nesting

extend

+

photo by pakutaso.com

座標・幅指定

ブラウザキャッシュ

photo by pakutaso.com

座標・幅指定

めんどくさい。

ブラウザキャッシュ

photo by 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: 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");}

.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");}

.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;}

.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");}

.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);

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

import.css

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

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

import.css

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

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

↓↓

↓↓

↓

....

....

import.css

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

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

↓↓

↓↓

↓

....

.... △

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 {}

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

↓↓

↓↓

↓

....

....

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

↓↓

↓↓

↓

....

....

$compass compile -s compressed style.scss

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

↓↓

↓↓

↓

....

....

$compass compile -s compressed style.scss

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

↓↓

↓↓

↓

....

....

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

$compass compile -s compressed style.scss

Try it!

@!ickrized (CC BY 2.0)

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

×

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

Scout - Compass and Sass without all the hasslehttp://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時）

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}

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

可読性 ファイルサイズ

高

低

大

低

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

可読性 ファイルサイズ

高

低

大

低

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

可読性 ファイルサイズ

高

低

大

低

作業中

リリース時

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

Output Style書き出しスタイル

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

style.scss

style.scss

style.scss style.css

style.scss style.css

×

site_data

css

_scssstyle.scss

site_data

css

_scssstyle.scss

style.css

site_data

css

_scssstyle.scss

保存

Try! Try!Try!

@Camera Eye Photography (CC BY 2.0)

既存のサイトのコピー

を作って、

その中で実験！

まずは、

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

@erix! (CC BY 2.0)

>>> 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)

慣れたら最強

@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)

参考ページ

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

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