Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Preprocessors: An Overview

Avatar for Paul Demers Paul Demers
July 08, 2015
Design
0
38

Preprocessors: An Overview

An overview of preprocessors as presented to the Startup Institute Summer 2015 class.

Avatar for Paul Demers

Paul Demers

July 08, 2015
Tweet

More Decks by Paul Demers

See All by Paul Demers
Books, Technology, and the Modern 70-year-old
Avatar for Paul Demers demersdesigns
0
120
HTML & CSS Best Practices
Avatar for Paul Demers demersdesigns
2
100
Intro to CSS Frameworks
Avatar for Paul Demers demersdesigns
0
45

Other Decks in Design

See All in Design
見過ごさない誠実さ_アクティブバイスタンダーとIntegrityが支えるアジャイル文化 / integrity-and-active-bystander
Avatar for Aki spring_aki
1
290
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1.1k
“ことば”が苦手なデザイナーへの処方箋 「なんとなく」から「意図」へ、 デザインを動かす言葉の力
Avatar for MIXI DESIGN mixi_design
PRO
1
190
アイデアを加速させる！Firefly ボードで発想の幅を広げよう
Avatar for コネクリ connecre
1
300
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
610
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
Avatar for 株式会社ルート root_recruit
0
380
Shaolin_Showdown
Avatar for Sol Metts solmetts
0
290
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
200
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.6k
爆速開発でAIプロダクトが40万インプレッションになった話
Avatar for つぶら tsubura
0
160
Correspondence：共に生成していく過程
Avatar for Akira Motomura akiramotomura
0
190
DESIGNEAST 2025 A-3
Avatar for Shigeru Kobayashi _kotobuki_
0
130

Featured

See All Featured
A better future with KSS
Avatar for Kyle Neath kneath
240
18k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
200
It's Worth the Effort
Avatar for 3n 3n
188
29k
Claude Code のすすめ
Avatar for schroneko schroneko
67
210k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
58k
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
230k
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
300
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
6.9k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k

Transcript

  1. CSS Preprocessors June 10, 2015 & June 13, 2015 http://www.kevingottuso.com/better-together/

  2. Hi! I’m Paul Demers @demersdesigns / demersdesigns.com cantina.co

  3. What is a Preprocessor? • A syntax and group of

    patterns to extend the capabilities of CSS. • Allows the creation of programatic CSS • Use compilers to output standard CSS that the browser can understand
  4. None

  5. Preprocessor Features • Partials- include one file in another using

    import • Nesting - put css rules inside other css rules • Variables - reusable declarations • Mixins - reusable snippets and functions

  6. Partials

  7. Nesting

  8. Variables

  9. Mixins

  10. Issues to Consider • Can bloat the CSS that it

    outputs • Need other team members to adopt preprocessor workflow • Another language to learn • Additional processing necessary to write site styling

  11. CodeKit Prepros Grunt/Gulp/Brunch

  12. Let’s Do This! • Learn Sass • Learn LESS •

    Learn Stylus • Getting Started with Preprocessors • Baseplate project on GitHub

  13. Questions?