Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Fronteers talk Digiti — "Pre-processing"
Search
houbenkristof
June 22, 2012
Technology
8
600
Fronteers talk Digiti — "Pre-processing"
SASS, COMPASS & LESS
houbenkristof
June 22, 2012
Tweet
Share
More Decks by houbenkristof
See All by houbenkristof
Prototyping for the real world.
houbenkristof
1
76
Extending Sketch App with awesomeness.
houbenkristof
3
260
My inner-design-monkey
houbenkristof
1
120
De knop (The button)
houbenkristof
0
60
Challenge accepted!
houbenkristof
1
240
Fronteers conference 2011 summary
houbenkristof
3
150
Other Decks in Technology
See All in Technology
「魔法少女まどか☆マギカ Magia Exedra」での負荷試験の実践と学び
gree_tech
PRO
0
590
AI開発ツールCreateがAnythingになったよ
tendasato
0
110
ライブサービスゲームQAのパフォーマンス検証による品質改善の取り組み
gree_tech
PRO
0
560
LLM翻訳ツールの開発と海外のお客様対応等への社内導入事例
gree_tech
PRO
0
560
エニグモ_会社紹介資料(エンジニア職種向け).pdf
enigmo_hr
0
2.2k
BPaaSにおける人と協働する前提のAIエージェント-AWS登壇資料
kentarofujii
0
120
ヘブンバーンズレッドのレンダリングパイプライン刷新
gree_tech
PRO
0
570
kubellが考える戦略と実行を繋ぐ活用ファーストのデータ分析基盤
kubell_hr
0
140
生成AI時代のデータ基盤
shibuiwilliam
6
3.7k
AI時代に非連続な成長を実現するエンジニアリング戦略
sansantech
PRO
3
1.1k
AI時代にPdMとPMMはどう連携すべきか / PdM–PMM-collaboration-in-AI-era
rakus_dev
0
280
AWSで推進するデータマネジメント
kawanago
0
1.1k
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Embracing the Ebb and Flow
colly
87
4.8k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.1k
Thoughts on Productivity
jonyablonski
70
4.8k
Site-Speed That Sticks
csswizardry
10
810
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
For a Future-Friendly Web
brad_frost
180
9.9k
KATA
mclloyd
32
14k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Git: the NoSQL Database
bkeepers
PRO
431
66k
Transcript
Pre-processing INCEPTION ALL OVER AGAIN!
RIP ARJAN EISING He’s not really dead :)
Hi, I’m Kristof @houbenkristof —
[email protected]
Front-end/design at Mobile Vikings
I’m always up for a Challenge
Run a small firm CALLED TREESHADOW MEDIA
Creative Brewski TOGETHER WITH @TOMCLAUS & @DENNISJANSSEN
LEt’s TALK CSS
"You don’t need a new stylesheet syntax, CSS is simple
and you’re a moron if you can’t do it."
C’est très simple
Not that easy to maintain
Stylesheets evolve
Simplicity creates complexity
Keep things DRY DON’T REPEAT YOURSELF
we should Reference to existing information
"CSS is the weakest link in the web developers toolbox.
The problem goes deeper than CSS’s lack of variables. Unlike the “function” in programming, CSS has no fundamental building block."
It’s all about Abstractions
CSS PRIMITIVES HAVE NO MEANING
That’s our job!
Abstractions ARE GROUPS OF PRIMITIVES
Abstractions are not abstract to us
We give BUILDING BLOCKs meaning SO IT MAKES IT EASIER
FOR US TO UNDERSTAND
Our DESIGNS CHANGE
A kitten dies every time that happens
Find & replace OH PLEASE, DON’T GET ME STARTED!
Client: “We want #000 to be #333 but not the
user information underneath my #bada55 body text, oh while you're at it could you position absolute that element and rotate it a gazillion degrees, … oh, #333 doesn't look that great after all… Change it back!”
You’re screwed
What do we NEED?
The interior decorator!
Decorates with parts
He does not make those parts LAMPS, TABLES, CHAIRS…
PArts for PArts
Oh my god YOU REUSED A BUTTON!
When elements are common REUSE tHEM!
Focus! ON WHAT IS IMPORTANT, YOU MUST!
Hard to upgrade Customized third party stylesheets
Clearly we are in need of some Pre-processing
"In computer science, a preprocessor is a program that processes
its input data to produce output that is used as input to another program.” — Wikipedia
Syntactic CUSTOMIZED SYNTAX, EXTEND THE LANGUAGE, ADD IMPROVEMENTS
ex. SASS & LESS
Keeping things maintainable
SASS BY HAMPTON CATLIN & NATHAN WEIZENBAUM
Written in Ruby
Don’t worry, there are also GUI’s
Watches folders & compiles on save
2007 ORIGINAL SASS SYNTAX
None
Hard to convert existing CSS TO SASS
2010 SASS 3 INTRODUCES SCSS
None
Regular CSS = VALID SCSS
BUT WAIT there’s also COMPASS
It’s chock full of the web’s best reusable patterns.
None
None
Also contains other cool features IMAGE SPRITING, COLOR FUNCTIONS
None
None
You say LESS
It’s all javascript ORIGINALLY WRITTEN IN RUBY BY ALEXIS SELLIER
Regular CSS = VALID LESS
LESS INSPIRED SCSS
VS LESS SASS Thanks to Chris Eppstein - https://gist.github.com/674726
Learning curve YOU HAVE TO KNOW JACK SH*T ABOUT THE
CLI
CODEKIT IS HOT!
CSS3 Helpers SASS HAS COMPASS, LESS DOES NOT
Variables
None
Mixins
Extending
Custom units in SASS MAKING THE LANGUAGE MORE FUTUREPROOF
Looping
DEMO
Thank you!
Resources: http://coding.smashingmagazine.com/2011/09/09/an-introduction-to-less-and- comparison-to-sass/ http://sonspring.com/journal/sass-for-designers http://css-tricks.com/sass-vs-less/ http://chriseppstein.github.com/blog/2009/09/20/why-stylesheet-abstraction- matters/
Questions?