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
Preprocessors: An Overview
Search
Paul Demers
July 08, 2015
Design
0
38
Preprocessors: An Overview
An overview of preprocessors as presented to the Startup Institute Summer 2015 class.
Paul Demers
July 08, 2015
Tweet
Share
More Decks by Paul Demers
See All by Paul Demers
Books, Technology, and the Modern 70-year-old
demersdesigns
0
110
HTML & CSS Best Practices
demersdesigns
2
99
Intro to CSS Frameworks
demersdesigns
0
45
Other Decks in Design
See All in Design
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
280
portfolio.pdf
onof003
0
200
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
930
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
120
そのUIコンポーネント、これから先も使えますか?―Headless UI,Open UI,グローバルデザインシステム
sakito
2
2k
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
160
越境するデザイン人材:デザイナーが社会資本となる世界へ
goodpatch
0
200
デザインエンジニアの延長にデザインマネージャーとしての可能性を探る
takanorip
0
600
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
580
mento Design Team Portfolio
mento0fficial
1
920
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
PRO
0
210
ドルちゃん
design_dolphins
0
200
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
27
2.1k
Making Projects Easy
brettharned
120
6.4k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
880
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Writing Fast Ruby
sferik
629
62k
Intergalactic Javascript Robots from Outer Space
tanoku
273
27k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
253
22k
Typedesign – Prime Four
hannesfritz
42
2.8k
BBQ
matthewcrist
89
9.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.5k
Producing Creativity
orderedlist
PRO
347
40k
Transcript
CSS Preprocessors June 10, 2015 & June 13, 2015 http://www.kevingottuso.com/better-together/
Hi! I’m Paul Demers @demersdesigns / demersdesigns.com cantina.co
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
None
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
Partials
Nesting
Variables
Mixins
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
CodeKit Prepros Grunt/Gulp/Brunch
Let’s Do This! • Learn Sass • Learn LESS •
Learn Stylus • Getting Started with Preprocessors • Baseplate project on GitHub
Questions?