Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

What's New in Haml/Sass 3

2.972 visualizaciones

Publicado el

  • Inicia sesión para ver los comentarios

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

×