株式会社永和システムマネジメント / 日本Hamlの会

浦嶌 啓太

What's New inHaml/Sass 3

ursm

http://twitter.com/ursmhttp://d.hatena.ne.jp/ursm/http://github.com/ursm

Copyright © FJORD, LLC

Asakusa.rb

Haml/Sassの歴史

•1 file, 2 classes•HAML::TemplateEngine•HAML::HappyMagicPonyLand•5 special characters# . < / =•no Sass

#container .section = 'hoge' <p.foo=fuga

0.1.0 (2006-10-06)

!!!%html %head %title Hello %meta{:content => 'something'} %body ...

1.0.0 (2006-12-15)•はじめてGemが提供されたリリース•no Sass

1.5.0 (2007-03-17)•Filterplain, ruby, preserve, erb, …

•Sass is coming!note_bg = #55aaff

#main :width 70% .note :background-color= !note_bg

2.0.0 (2008-05-24)•HTML escaping&= !=•Sass mixins

=border-radius :-moz-border-radius 8px :-webkit-border-radius 8px

.sidebar +border-radius

2.2.0 (2009-07-06)•flexible indentation•new attribute syntaxa(href='...')•Mixin arguments+border-radius(8px)•Sass Script and Functions@if, @for, hsl(), round()•Ruby 1.9 support

3.0.0 (2010-05-10)•Haml•custom data attributes•Sass•SCSS•some syntax changes•selector inheritance•color functions•haml-spec Integration

Custom Data Attributes•HTML5 Draft Standard 3.2.3.8Embedding custom non-visible data

<ol> <li data-length="2m11s">Beyond The Sea</li> ...</ol>

%ol %li{:data => {:length => "2m11s"}} Beyond The Sea</li> ...

SCSS (Sassy CSS)$blue: #3bbfce;$margin: 16px;

.content_navigation { color: $blue;}

.border { padding: $margin / 2; margin: $margin / 2; border: 2px $blue solid;}

Syntax Changes

!size = "10px"!color ||= "red"

%p font: size = !size color = !color

$size: "10px"$color: "red" default!

%p font: size: $size color: $color

$ sass-convert --in-place style.sass

Selector Inheritance

=error border: 1px #f00 color: #fdd

.error +error

.seriousError +error border-width: 3px

.error border: 1px #f00 color: #fdd

.seriousError @extend .error border-width: 3px

Color Functions•lighten(red, 20%)•darken(blue, 30%)•saturate(#855, 20%)•desaturate(#855, 20%)•adjust-hue(#811, 45deg)•grayscale(hsl(120, 30%, 90%))•complement(hsl(120, 30%, 90%))•a lot more...

haml-spec Integration

haml-lang.com sass-lang.com

Thank you!