Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Preprocessors: An Overview

Sponsored · Ship Features Fearlessly Turn features on and off without deploys. Used by thousands of Ruby developers. →
Avatar for Paul Demers Paul Demers
July 08, 2015
Design
42
0

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

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
130
Intro to CSS Frameworks
Avatar for Paul Demers demersdesigns
0
50

Other Decks in Design

See All in Design
Typographie et intégration web
Avatar for Raphael Goetter goetter
0
170
【Designship2026】「社内受託中心部署」から、事業とカルチャーを動かすデザイン組織へ
Avatar for sugiyama sugiyama_sukedachi
0
140
使いたいときだけ使う 「道具のようなアプリケーション」を考える
Avatar for fumink fumink7
0
300
[Unity] VAT×VFX Graphがいま個人的にアツイという話
Avatar for sakiama sakiyama
0
130
プレゼンスライド作成で意識していること
Avatar for きみちゃん kimichan
0
140
HeartLanguage - DesignProcess
Avatar for HeartLanguage heartlanguage
0
220
みんながデザインを担う組織へ。急加速する開発組織でのデザイナーの戦略
Avatar for Takeru Mukai mukai_takeru
0
340
Starfall (2025)
Avatar for Rachel Poon rezaline
0
170
デザインツールを開く前に その画面は誰に何と言わせたい？受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
Avatar for @Garyuten garyuten
1
280
デザインレビューを「他者へのおすそわけ」に再定義し、たのしい場にする試み
Avatar for Beeworks Marketing Design webnaut
0
110
【2026】ポートフォリオ_大坪明日香
Avatar for tsubo52 tsubo52
0
130
ポートフォリオ_あやの
Avatar for ayano ngyenmazt1412
0
2k

Featured

See All Featured
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
790
250k
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
1
490
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
2
630
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
2
480
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
1
450
What Being in a Rock Band Can Teach Us About Real World SEO
Avatar for Ade Holder 427marketing
0
1.1k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
Improving Core Web Vitals using Speculation Rules API
Avatar for Sergey Chernyshev sergeychernyshev
21
1.7k
Designing Powerful Visuals for Engaging Learning
Avatar for Mike Taylor tmiket
1
610
Collaborative Software Design: How to facilitate domain modelling decisions
Avatar for Kenny Baas-Schwegler baasie
1
340
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
66
8.6k
Hiding What from Whom? A Critical Review of the History of Programming languages for Music
Avatar for Tomoya Matsuura tomoyanonymous
3
1.3k

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?