Your SlideShare is downloading. ×
What's New in Haml/Sass 3
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

What's New in Haml/Sass 3

1,854
views

Published on

Published in: Technology, Art & Photos

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,854
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Copyright © FJORD, LLC http://twitter.com/ursm http://d.hatena.ne.jp/ursm/ http://github.com/ursm
  • 2. #container .section = 'hoge' <p.foo=fuga
  • 3. !!! %html %head %title Hello %meta{:content => 'something'} %body ...
  • 4. plain, ruby, preserve, erb, … !note_bg = #55aaff #main :width 70% .note :background-color= !note_bg
  • 5. &= != =border-radius :-moz-border-radius 8px :-webkit-border-radius 8px .sidebar +border-radius
  • 6. a(href='...') +border-radius(8px) @if, @for, hsl(), round()
  • 7. <ol> <li data-length="2m11s">Beyond The Sea</li> ... </ol> %ol %li{:data => {:length => "2m11s"}} Beyond The Sea</li> ...
  • 8. $blue: #3bbfce; $margin: 16px; .content_navigation { color: $blue; } .border { padding: $margin / 2; margin: $margin / 2; border: 2px $blue solid; }
  • 9. !size = "10px" $size: "10px" !color ||= "red" $color: "red" default! %p %p font: font: size = !size size: $size color = !color color: $color $ sass-convert --in-place style.sass
  • 10. =error border: 1px #f00 .error color: #fdd border: 1px #f00 color: #fdd .error +error .seriousError @extend .error .seriousError border-width: 3px +error border-width: 3px
  • 11. •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...
  • 12. haml-lang.com sass-lang.com