performance front end language
TRANSCRIPT
performance front-end language
Haml / Scss(Sass) / Coffee
2016/10/12 Wei-Yi, Chiu
Outline
Introduce of Haml
Introduce of Scss/Sass
Introduce of Coffee
Let’s work with Ruby On Rails
Should we use haml/Scss/coffee ?
Templating Haiku
HTML abstraction markup language
Beatiful, DRY, well-indented, clear markup
DRY: Don’t Repeat Yourself
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>
Css / Scss / SassScss 1.preprocessing 2.nesting 3.partials 4.import
Sass 1.prepossessing 2.variables 3.mixing 4.extend/inheritance 5.operators 6.no { }, well-indented
VariablesSass
Scss
NestingSass Scss
partial/importSass Scss
MixinsSass
Scss
Extend/InheritanceSass Scss
Operators
Sass Scss
It's just JavaScript, and…no { }, use identation
List Comprehension
if modifier
skip ( )
no ; and return
string interpolation
We have console, now !!!
Tutorial
Tutorial
Tutorial
Tutorial
Tutorial
Let’s work with RoR
gem 'sass-rails'
gem 'compass-rails'
gem ‘haml’ #before rails 4
Let’s work with RoR
「what’s console-diff. between web and coffee ?」
web V.S coffee
coffee web(pure js)
「 」
coffee-dev in web console
Let’s work with RoR
http://js2.coffee
http://css2sass.herokuapp.com
http://htmltohaml.com
Should We use haml/scss/coffee ?
Next
link-assitant: 監測、優化工具
desktop web