Upload
keita-urashima
View
1.875
Download
1
Embed Size (px)
Citation preview
株式会社永和システムマネジメント / 日本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!