• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Quickly Haml and Sass
 

Quickly Haml and Sass

on

  • 319 views

 

Statistics

Views

Total Views
319
Views on SlideShare
319
Embed Views
0

Actions

Likes
0
Downloads
4
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • \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 Quickly Haml and Sass Presentation Transcript

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