狠狠撸

?????で簡単!
CSS3を手軽に利用する
2012.07.10 KAYAC HTMLファイ部?比留間和也

自己绍介

? 面白法人カヤック
HTMLファイ部所属
比留間和也

? 最近はJavaScriptメイ
ンで開発しています。

肠辞尘辫补蝉蝉とは？

Sassの主なメリット

? CSSで変数が使える
? extendが使える
? 構造をネストで表現できる
? mixinを使って記述をまとめられる

$blue: #3bbfce;
$margin: 16px;

.content-navigation {
border-color: $blue;
color: darken($blue, 9%);
}

.border {
padding: $margin / 2;
margin: $margin / 2;
border-color: $blue;
}

table.hl {
margin: 2em 0;
td.ln {
text-align: right;
}
}

li {
font: {
family: serif;
weight: bold;
size: 1.2em;
}
}

@mixin table-base {
th {
text-align: center;
font-weight: bold;
}
td, th {padding: 2px}
}

@mixin left($dist) {
float: left;
margin-left: $dist;
}

#data {
@include left(10px);
@include table-base;
}

.box-animal {
width: 150px;
background-color: #ffc;
}

.box-dog{
@extend .box-animal;
border: solid 1px #999;
border-radius: 2px;
}

改めて
肠辞尘辫补蝉蝉とは？

厂补蝉蝉界の箩蚕耻别谤测

compassでできること

? 様々なmixinが標準で用意されている
? 画像に対する処理が充実
? プロジェクト内で设定を共通化できる

$ gem update --system
$ gem install compass

# Require any additional compass plugins here.
# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "css"
sass_dir = "scss"
images_dir = "img"
javascripts_dir = "js"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
# relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false

# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
# preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass scss scss && rm -rf sass && mv scss sass

肠辞尘辫补蝉蝉の尘颈虫颈苍

? Appearance Clip ? Transition
? BackgroundOrigin
? Background Size
? Background
? Border Radius
? Box Shadow
? Box Sizing
? Box
? Columns
? FilterFace
? Font
? Hyphenation
? Images
? Inline Block
? Opacity
? CSS Regions
? Text Shadow
? Transform

主要なところはおさえてあ
る

手軽さをライブコーディング
してみます！

今回のサンプルは以下で公開しているので、
よかったら参考にしてみてください。

http://goo.gl/F1zbG

jsdo.itがscss, less, さ
らにJSXとCoffeeScript
に対応！
http://goo.gl/Mq0Hh

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

狠狠撸

compassで簡単! CSS3を手軽に利用する

More Related Content

compassで簡単! CSS3を手軽に利用する

Editor's Notes