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

Preprocessors: An Overview

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
新規AIプロダクトで、事前に知るべきだった3つの壁 〜医療AIを1年間作って、従来の開発が通用しなかった話〜 / Three Walls in Building AI Products
Avatar for Takuya Shikichi shikichee
2
3.2k
maki setoguchi
Avatar for Maki / Web Designer maki_setoguchi
0
660
大きな変化の中で、わたしが向き合ったこと #もがく中堅デザイナー
Avatar for 弁護士ドットコム bengo4com
1
1.4k
DMMデザイナーの “AI活用の現在と未来”
Avatar for TakumaS takumasaito
1
440
2026年、デザイナーはなにに賭ける？
Avatar for Kazuhiro Tobita 0b1tk
0
480
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
1.3k
kintone_aroma
Avatar for kintone kintone
0
1.3k
プラットフォームに馴染むモバイルアプリデザイン / Mobile App UI Design Lunch LT
Avatar for Hiroki Nagasawa pixyzehn
0
130
AI情報に溺れながら、それでも頑張って泳ぐための思考法
Avatar for Iori67 yoriss67
0
130
Vibe Coding デザインシステム
Avatar for poteboy poteboy
3
1.6k
Figmaレクチャー会Part2 もっと使いこなす編＠千株式会社 社内勉強会
Avatar for ぽん designer_no_pon
1
250
見栄えと使いやすさの先にある 特別感 をデザインする / Designing a Sense of Specialness Beyond Aesthetics and Usability
Avatar for 株式会社ビットキー / Bitkey Inc. bitkey
PRO
0
250

Featured

See All Featured
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
57
14k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
0
430
Digital Projects Gone Horribly Wrong (And the UX Pros Who Still Save the Day) - Dean Schuster
Avatar for UX Y'all uxyall
0
350
DevOps and Value Stream Thinking: Enabling flow, efficiency and business value
Avatar for Helen Beal helenjbeal
1
94
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
240
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
54
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
3.6k
Navigating the moral maze — ethical principles for Al-driven product design
Avatar for Skipper Chong Warson skipperchong
2
240
A Soul's Torment
Avatar for Nat Ma seathinner
5
2.3k
jQuery: Nuts, Bolts and Bling
Avatar for Doug Neiner dougneiner
65
8.4k
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k

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?