Css preprocessorの始めかた

CSSの未来を先取り！

CSS Preprocessorの
始めかた
@adactio (CC BY2.0)

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

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

Variable
CSS Sprite
Nesting

+

Mixin
Vendor Preﬁx
extend

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

Sass・Compassの
メリット

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

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

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

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

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

ZERGE_VIOLATOR (CC BY 2.0)

Media Queries

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

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

座標・幅ブラウザ
指定キャッシュ

photo by pakutaso.com

座標・幅ブラウザ
指定キャッシュ

めんどくさい。

photo by pakutaso.com

読み込み

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

.logoArea {
    text-indent: 100%;
    overflow: hidden;
}

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

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

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


△
import.css

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


△
import.css

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


△
import.css

#main {↓
float: right;↓
....

△
}↓
#main p { ↓
....
}

@import "reset";
@import "module";
@import "style";
import.scss

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

import.css
#header {
}

#main {↓
float: right;↓
....
}↓
#main p { ↓
....
}

#main {↓
float: right;↓
....
}↓
#main p { ↓
....
}

$compass compile -s compressed style.scss

#main {↓
float: right;↓
....
}↓
#main p { ↓
....
}

$compass compile -s compressed style.scss

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

@flickrized (CC BY 2.0)

Try it!

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

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

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

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

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

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

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

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

site_data
Input Folder
_scss
style.scss
Output Folder
css
style.css

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 入れ子で
低低

ファイル
可読性
サイズ
高大
Nested 作業中
入れ子で
低低
リリース時

site_data
_scss
style.scss
css

site_data
_scss 保存
style.scss
css
style.css

Try!
Try!
@Camera Eye Photography (CC BY 2.0)
Try!

まずは、を作って、
のコピー
イト
既存のサ
実験！
の中で
そ

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

@erix! (CC BY 2.0)

>>> Change detected at 16:05:43 to: style.scss
error style.scss (Line 6: Undefined mixin
'border-radius'.)
overwrite style.css
この前後が
あやしい

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

この前後が
あやしい

>>> Change detected at 16:41:11 to: style.scss
error 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に通してエラーを
一つ一つ潰す

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

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

Css preprocessorの始めかた

More Related Content

Css preprocessorの始めかた