Your SlideShare is downloading. ×
Quickly Haml and Sass
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Quickly Haml and Sass

185
views

Published on

Published in: Technology, Health & Medicine

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

  • Be the first to like this

No Downloads
Views
Total Views
185
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. QUICKLY SASS AND HAML
    • 2. border-radius: 25px;
    • 3. border-radius: 25px;-moz-border-radius: 25px;-webkit-border-radius: 25px;-o-border-radius: 25px;-ms-border-radius: 25px;-khtml-border-radius: 25px;
    • 4. SASS• Keep your CSS in order• Easy to read• Faster to code• DRY
    • 5. • Variables• Inheritance• Mixins• Operations• Flow control
    • 6. SASS Y SCSS SASS SCSS$txt-size:13px $txt-size:13px;$txt-color:white $txt-color:white;#main #main{ :font-size $txt-size font-size:$txt-size; :color $txt-color color:$txt-color; a a{ :text-decoration:none text-decoration:none; } }
    • 7. SASS Y SCSS SASS SCSS$txt-size:13px $txt-size:13px;$txt-color:white $txt-color:white;#main #main{ :font-size $txt-size font-size:$txt-size; :color $txt-color color:$txt-color; a a{ :text-decoration:none text-decoration:none; } }
    • 8. SASS Y SCSS SASS #main{ font-size:13px; SCSS color:white; }$txt-size:13px $txt-size:13px;$txt-color:white #main a{ $txt-color:white; text-decoration:none;#main } #main{ :font-size $txt-size font-size:$txt-size; :color $txt-color color:$txt-color; a a{ :text-decoration:none text-decoration:none; } }
    • 9. SASS Y SCSS SASS #main{ font-size:13px; SCSS color:white; }$txt-size:13px $txt-size:13px;$txt-color:white #main a{ $txt-color:white; text-decoration:none;#main } #main{ :font-size $txt-size font-size:$txt-size; :color $txt-color color:$txt-color; a a{ :text-decoration:none text-decoration:none; } }
    • 10. SASS Y SCSS SASS #main{ font-size:13px; SCSS color:white; }$txt-size:13px $txt-size:13px;$txt-color:white #main a{ $txt-color:white; text-decoration:none;#main } #main{ :font-size $txt-size font-size:$txt-size; :color $txt-color color:$txt-color; a a{ :text-decoration:none text-decoration:none; } }
    • 11. SASS Y SCSS SASS #main{ font-size:13px; SCSS color:white; }$txt-size:13px $txt-size:13px;$txt-color:white #main a{ $txt-color:white; text-decoration:none;#main } #main{ :font-size $txt-size font-size:$txt-size; :color $txt-color color:$txt-color; a a{ :text-decoration:none text-decoration:none; } }
    • 12. SASS Y SCSS SASS #main{ font-size:13px; SCSS color:white; }$txt-size:13px $txt-size:13px;$txt-color:white #main a{ $txt-color:white; text-decoration:none;#main } #main{ :font-size $txt-size font-size:$txt-size; :color $txt-color color:$txt-color; a a{ :text-decoration:none text-decoration:none; } }
    • 13. SASS Y SCSS SASS #main{ font-size:13px; SCSS color:white; }$txt-size:13px $txt-size:13px;$txt-color:white #main a{ $txt-color:white; text-decoration:none;#main } #main{ :font-size $txt-size font-size:$txt-size; :color $txt-color color:$txt-color; a a{ :text-decoration:none text-decoration:none; } }
    • 14. SASS Y SCSS SASS #main{ font-size:13px; SCSS color:white; }$txt-size:13px $txt-size:13px;$txt-color:white #main a{ $txt-color:white; text-decoration:none;#main } #main{ :font-size $txt-size font-size:$txt-size; :color $txt-color color:$txt-color; a a{ :text-decoration:none text-decoration:none; } }
    • 15. @EXTEND.alert{ background:blue; font-size:1em;}.error{ @extend .alert; color:red;}
    • 16. @EXTEND.alert{ background:blue; font-size:1em;}.error{ @extend .alert; color:red;}
    • 17. @EXTEND .alert .error{.alert{ color:red; background:blue; } font-size:1em;} .alert{ background:blue;.error{ font-size:1em; @extend .alert; } color:red;}
    • 18. @EXTEND .alert .error{.alert{ color:red; background:blue; } font-size:1em;} .alert{ background:blue;.error{ font-size:1em; @extend .alert; } color:red;}
    • 19. REFERENCE TO PARENT “&”.alert{ background:blue; font-size:1em; & a{ color:red; }}
    • 20. REFERENCE TO PARENT “&” .alert{.alert{ background:blue; background:blue; font-size:1em; font-size:1em; } & a{ .alert a{ color:red; color:red; } }}
    • 21. REFERENCE TO PARENT “&” .alert{.alert{ background:blue; background:blue; font-size:1em; font-size:1em; } & a{ .alert a{ color:red; color:red; } }}
    • 22. MIXINS .notice {@mixin fanncy-box(){ @include fancy-box(); @include borde-radius(5px); color:white; background:blue; }} .comment { @include fancy-box(); color:black; }
    • 23. MIXINS .notice{ -moz-border-radius: 25px; -webkit-border-radius: 5px; -o-border-radius: 5px; .notice {   -ms-border-radius: 5px;@mixin fanncy-box(){ @include fancy-box();   -khtml-border-radius: 5px; @include borde-radius(5px); color:white;   border-radius: 5px; background:blue; } color:white;} .comment { } @include fancy-box(); color:black; .comment{ } -moz-border-radius: 25px; -webkit-border-radius: 5px; -o-border-radius: 5px;   -ms-border-radius: 5px;   -khtml-border-radius: 5px;   border-radius: 5px; color:black; }
    • 24. @mixin fanncy-box($color: #FFFFFF){ @include borde-radius(5px); background:blue; color:$color;}
    • 25. @mixin fanncy-box($color: #FFFFFF){ @include borde-radius(5px); background:blue; color:$color;} .notice { @include fancy-box(#CCCCCC); } .comment { @include fancy-box(#000000); }
    • 26. @mixin fanncy-box($color: #FFFFFF){ @include borde-radius(5px); background:blue; color:$color;} .notice { @include fancy-box(#CCCCCC); } .comment { .notice{ @include fancy-box(#000000); -moz-border-radius: 25px; } -webkit-border-radius: 5px; -o-border-radius: 5px;   -ms-border-radius: 5px;   -khtml-border-radius: 5px;   border-radius: 5px; color:#CCCCCC; } .comment{ -moz-border-radius: 25px; -webkit-border-radius: 5px; -o-border-radius: 5px;   -ms-border-radius: 5px;   -khtml-border-radius: 5px;   border-radius: 5px; color:#000000; }
    • 27. @mixin fanncy-box($color: #FFFFFF){ @include borde-radius(5px); background:blue; color:$color;} .notice { @include fancy-box(#CCCCCC); } .comment { .notice{ @include fancy-box(#000000); -moz-border-radius: 25px; } -webkit-border-radius: 5px; -o-border-radius: 5px;   -ms-border-radius: 5px;   -khtml-border-radius: 5px;   border-radius: 5px; color:#CCCCCC; } .comment{ -moz-border-radius: 25px; -webkit-border-radius: 5px; -o-border-radius: 5px;   -ms-border-radius: 5px;   -khtml-border-radius: 5px;   border-radius: 5px; color:#000000; }
    • 28. HAML• “Markup should be beautiful”• Easier to reed• No closing tags. #epicwin• Reduce the length of your views
    • 29. BASICALLY<body> %body <div id="container"> #container <p>this is some text</p> %p this is some text </div></body>
    • 30. BASICALLY<body> %body <div id="container"> #container <p>this is some text</p> %p this is some text </div></body> 2px indentation
    • 31. HAML HTML • <body></bodye>• %body • • <divclass=‘container’></• .container container> •• %section.red-one • <section class=‘red- • one’></section>
    • 32. HAML HTML •• %a{:href => ‘#’} a • <a href=’#’>a</a> •• %a{href = ‘#’} b • <a href=’#’>b</a> •
    • 33. RUBY CODE <p>hola<p>- 5.times do <p>hola<p> %p hola <p>hola<p> <p>hola<p>%p= “hola” * 5 <p>hola<p> <p>hola hola hola hola hola</p>
    • 34. RUBY CODE <p>hola<p>- 5.times do <p>hola<p> %p hola <p>hola<p> <p>hola<p>%p= “hola” * 5 <p>hola<p> <p>hola hola hola hola hola</p> - ruby code without output = output to the renderer html
    • 35. RUBY CODE INTERPOLATION- name = ‘Hector’ <p>yo me llamo Hector<p>%p yo me llamo #{name}%p= “yo me llamo #{name}”
    • 36. FILTERS• Starts with “:” and have idented code• There’s a lot almost for everything you want • :javascript, :css, :ruby, :plain, :escaped, :sass• And also you can create your own
    • 37. :JAVASCRIPT:javascript <script> alert(‘waazuuup’); //<![CDATA][ alert(‘waazuuup’); //]]> </script>
    • 38. DOCTYPE? <!DOCTYPE html>!!! 5 <head>%head </head>%body <body> %section <section></section> </body>