Copyright © FJORD, LLC


http://twitter.com/ursm
http://d.hatena.ne.jp/ursm/
http://github.com/ursm
#container
 .section
  = 'hoge'
  <p.foo=fuga
!!!
%html
  %head
    %title Hello
    %meta{:content => 'something'}
  %body
    ...
plain, ruby, preserve, erb, …



    !note_bg = #55aaff

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

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

    .sidebar
      +border-radius
a(href='...')

+border-radius(8px)

@if, @for, hsl(), round()
<ol>
 <li data-length="2m11s">Beyond The Sea</li>
 ...
</ol>

%ol
  %li{:data => {:length => "2m11s"}}
    Beyond The Sea<...
$blue: #3bbfce;
$margin: 16px;

.content_navigation {
  color: $blue;
}

.border {
  padding: $margin / 2;
  margin: $marg...
!size = "10px"          $size: "10px"
!color ||= "red"        $color: "red" default!

%p                      %p
     font...
=error
  border: 1px #f00
                      .error
  color: #fdd
                        border: 1px #f00
            ...
•lighten(red, 20%)
•darken(blue, 30%)
•saturate(#855, 20%)
•desaturate(#855, 20%)
•adjust-hue(#811, 45deg)
•grayscale(hsl(...
haml-lang.com   sass-lang.com
What's New in Haml/Sass 3
What's New in Haml/Sass 3
What's New in Haml/Sass 3
What's New in Haml/Sass 3
What's New in Haml/Sass 3
What's New in Haml/Sass 3
What's New in Haml/Sass 3
What's New in Haml/Sass 3
What's New in Haml/Sass 3
What's New in Haml/Sass 3
What's New in Haml/Sass 3
What's New in Haml/Sass 3
What's New in Haml/Sass 3
Upcoming SlideShare
Loading in …5
×

What's New in Haml/Sass 3

2,168 views
2,113 views

Published on

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
2,168
On SlideShare
0
From Embeds
0
Number of Embeds
556
Actions
Shares
0
Downloads
9
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

What's New in Haml/Sass 3

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

×