More Related Content Similar to Performance front end language (20) Performance front end language4. 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 !!!
18. Let’s work with RoR
gem 'sass-rails'
gem 'compass-rails'
gem ‘haml’ #before rails 4
24. Let’s work with RoR
http://js2.coffee
http://css2sass.herokuapp.com
http://htmltohaml.com