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;

5. SASS
• Keep your CSS in order
• Easy to read
• Faster to code
• DRY

6. • Variables
• Inheritance
• Mixins
• Operations
• Flow control

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 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;
}
}

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. 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;
}
}

16. @EXTEND
.alert{
background:blue;
font-size:1em;
}
.error{
@extend .alert;
color:red;
}

17. @EXTEND
.alert{
background:blue;
font-size:1em;
}
.error{
@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. @EXTEND
.alert .error{
.alert{
color:red;
background:blue;
}
font-size:1em;
}
.alert{
background:blue;
.error{
font-size:1em;
@extend .alert;
}
color:red;
}

20. REFERENCE TO PARENT “&”
.alert{
background:blue;
font-size:1em;
& a{
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. REFERENCE TO PARENT “&”
.alert{
.alert{ background:blue;
background:blue; font-size:1em;
font-size:1em; }
& a{ .alert a{
color:red; color:red;
} }
}

23. MIXINS
.notice {
@mixin fanncy-box(){ @include fancy-box();
@include borde-radius(5px); color:white;
background:blue; }
} .comment {
@include fancy-box();
color:black;
}

24. 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;
}

25. @mixin fanncy-box($color: #FFFFFF){
@include borde-radius(5px);
background:blue;
color:$color;
}

26. @mixin fanncy-box($color: #FFFFFF){
@include borde-radius(5px);
background:blue;
color:$color;
}
.notice {
@include fancy-box(#CCCCCC);
}
.comment {
@include fancy-box(#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. @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;
}

29. HAML
• “Markup should be
beautiful”
• Easier to reed
• No closing tags. #epicwin
• Reduce the length of your
views

30. BASICALLY
<body> %body
<div id="container"> #container
<p>this is some text</p> %p this is some text
</div>
</body>

31. BASICALLY
<body> %body
<div id="container"> #container
<p>this is some text</p> %p this is some text
</div>
</body>
2px indentation

32. HAML HTML
• <body></bodye>
• %body •
• <divclass=‘container’></
• .container container> •
• %section.red-one • <section
class=‘red- •
one’></section>

33. HAML HTML
•
• %a{:href => ‘#’} a • <a href=’#’>a</a>
•
• %a{href = ‘#’} b • <a href=’#’>b</a>
•

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>

35. 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

36. RUBY CODE INTERPOLATION
- name = ‘Hector’ <p>yo me llamo Hector<p>
%p yo me llamo #{name}
%p= “yo me llamo #{name}”

37. 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

38. :JAVASCRIPT
:javascript <script>
alert(‘waazuuup’); //<![CDATA][
alert(‘waazuuup’);
//]]>
</script>

39. DOCTYPE?
<!DOCTYPE html>
!!! 5 <head>
%head </head>
%body <body>
%section <section></section>
</body>