Quickly Haml and Sass

432 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
432
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

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
  • Quickly Haml and Sass

    1. 1. QUICKLY SASS AND HAML
    2. 2. border-radius: 25px;
    3. 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. 4. SASS• Keep your CSS in order• Easy to read• Faster to code• DRY
    5. 5. • Variables• Inheritance• Mixins• Operations• Flow control
    6. 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. 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. 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. 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. 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. 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. 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. 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. 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. 15. @EXTEND.alert{ background:blue; font-size:1em;}.error{ @extend .alert; color:red;}
    16. 16. @EXTEND.alert{ background:blue; font-size:1em;}.error{ @extend .alert; color:red;}
    17. 17. @EXTEND .alert .error{.alert{ color:red; background:blue; } font-size:1em;} .alert{ background:blue;.error{ font-size:1em; @extend .alert; } color:red;}
    18. 18. @EXTEND .alert .error{.alert{ color:red; background:blue; } font-size:1em;} .alert{ background:blue;.error{ font-size:1em; @extend .alert; } color:red;}
    19. 19. REFERENCE TO PARENT “&”.alert{ background:blue; font-size:1em; & a{ color:red; }}
    20. 20. REFERENCE TO PARENT “&” .alert{.alert{ background:blue; background:blue; font-size:1em; font-size:1em; } & a{ .alert a{ color:red; color:red; } }}
    21. 21. REFERENCE TO PARENT “&” .alert{.alert{ background:blue; background:blue; font-size:1em; font-size:1em; } & a{ .alert a{ color:red; color:red; } }}
    22. 22. MIXINS .notice {@mixin fanncy-box(){ @include fancy-box(); @include borde-radius(5px); color:white; background:blue; }} .comment { @include fancy-box(); color:black; }
    23. 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. 24. @mixin fanncy-box($color: #FFFFFF){ @include borde-radius(5px); background:blue; color:$color;}
    25. 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. 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. 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. 28. HAML• “Markup should be beautiful”• Easier to reed• No closing tags. #epicwin• Reduce the length of your views
    29. 29. BASICALLY<body> %body <div id="container"> #container <p>this is some text</p> %p this is some text </div></body>
    30. 30. BASICALLY<body> %body <div id="container"> #container <p>this is some text</p> %p this is some text </div></body> 2px indentation
    31. 31. HAML HTML • <body></bodye>• %body • • <divclass=‘container’></• .container container> •• %section.red-one • <section class=‘red- • one’></section>
    32. 32. HAML HTML •• %a{:href => ‘#’} a • <a href=’#’>a</a> •• %a{href = ‘#’} b • <a href=’#’>b</a> •
    33. 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. 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. 35. RUBY CODE INTERPOLATION- name = ‘Hector’ <p>yo me llamo Hector<p>%p yo me llamo #{name}%p= “yo me llamo #{name}”
    36. 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. 37. :JAVASCRIPT:javascript <script> alert(‘waazuuup’); //<![CDATA][ alert(‘waazuuup’); //]]> </script>
    38. 38. DOCTYPE? <!DOCTYPE html>!!! 5 <head>%head </head>%body <body> %section <section></section> </body>

    ×