Recommended
More Related Content
Viewers also liked
Similar to Performance front end language
Similar to Performance front end language (20)
Recently uploaded
Recently uploaded (20)
Performance front end language
- 1. performance front-end language Haml / Scss(Sass) / Coffee 2016/10/12 Wei-Yi, Chiu
- 2. Outline Introduce of Haml Introduce of Scss/Sass Introduce of Coffee Let’s work with Ruby On Rails Should we use haml/Scss/coffee ?
- 3. Templating Haiku HTML abstraction markup language Beatiful, DRY, well-indented, clear markup DRY: Don’t Repeat Yourself
- 4. tutorial HTML !!! 5 HTML <!DOCTYPE html> %p <p></p> %p#id <p id=‘id’></p> %p.class <p class=‘class’></p> %p{onclick=“alert(c)”} <p onclick=“alert(c)”></p> %p 測試 <p>測試</p> %p %a <p><a></a></p> .class <div class=‘class’></div>
- 5. Css / Scss / Sass Scss 1.preprocessing 2.nesting 3.partials 4.import Sass 1.prepossessing 2.variables 3.mixing 4.extend/inheritance 5.operators 6.no { }, well-indented
- 12. It's just JavaScript, and… no { }, use identation List Comprehension if modifier skip ( ) no ; and return string interpolation We have console, now !!!
- 13. Tutorial
- 14. Tutorial
- 15. Tutorial
- 16. Tutorial
- 17. Tutorial
- 18. Let’s work with RoR gem 'sass-rails' gem 'compass-rails' gem ‘haml’ #before rails 4
- 19. Let’s work with RoR
- 20. 「what’s console-diff. between web and coffee ?」
- 21. web V.S coffee coffee web(pure js)
- 22. 「 」
- 23. coffee-dev in web console
- 24. Let’s work with RoR http://js2.coffee http://css2sass.herokuapp.com http://htmltohaml.com
- 25. Should We use haml/scss/coffee ?