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
逆向きUIの世界 〜iOSアプリのRTL言語対応〜
akatsuki174
1
280
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
410
Findyのプロデチームの 歩みとこれから
satty9556
0
320
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
140
「UXとUIの違い」v2
shirasu3
0
250
AI駆動なデザイン開発 〜Figma Make でまるっとつくるか、 HTML でシンプルにつくるか〜
t_east
1
1.4k
root COMPANY DECK / We are hiring!
root_recruit
PRO
1
24k
チームで事業価値を生み出す、プロアクティブなデザイナーになるための道のり/ Designship2025_Naya
root_recruit
PRO
0
210
Liquid GlassとApp Intents
touyou
0
430
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
160
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
120
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
640
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
Embracing the Ebb and Flow
colly
88
4.9k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Code Reviewing Like a Champion
maltzj
526
40k
Why Our Code Smells
bkeepers
PRO
340
57k
Code Review Best Practice
trishagee
72
19k
Rails Girls Zürich Keynote
gr2m
95
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
jQuery: Nuts, Bolts and Bling
dougneiner
65
7.9k
Designing Experiences People Love
moore
142
24k
GraphQLとの向き合い方2022年版
quramy
49
14k
Facilitating Awesome Meetings
lara
56
6.6k
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?