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

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
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
OSO2025-マサカリと太陽：伝え方の情報デザイン
Avatar for majimasachi majimasachi
0
680
コムデマネージャーがプロダクトデザインに挑戦した。むずかしくて楽しかった。
Avatar for payatsun payatsusan213
0
200
ドルちゃん
Avatar for ドルちゃん design_dolphins
0
550
自分たちがターゲットになりにくい業務アプリケーションのユーザビリティを担保する取り組み / Initiatives to ensure the usability of business applications that are difficult for us to target
Avatar for Hiromi Morikawa hiromitsuuuuu
1
1.3k
CREATIVE CLASS受講課題｜無印良品を題材としたブランド再構築について
Avatar for satoshi kobayashi happy_ferret153
0
610
TWCP#21 UXデザインと哲学のはなし
Avatar for MAMIYA Shinsuke shinn
0
270
Crisp Code inc.｜ブランドガイドライン - Brand guidelines
Avatar for So Kotani / Crisp Code inc. CEO so_kotani
1
300
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
5
4k
組織はみんなでつくる。デザイナーが仕掛ける急拡大する組織のカルチャーづくり
Avatar for Kasumi Morita mkasumi
0
1.1k
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
920
デザイナーが主導権を握る、AI協業の本音と実践
Avatar for satosio satosio
7
2.7k
「余白」と「欲望」を味方につける ——AI時代のデザインエンジニアリングと「越境」の作法 #KNOTS2026
Avatar for koyaman koyaman
1
1.3k

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.2k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
66k
How to Ace a Technical Interview
Avatar for Jacob Kaplan-Moss jacobian
281
24k
Designing for Performance
Avatar for Lara Hogan lara
610
70k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
54k
Test your architecture with Archunit
Avatar for Yoan thirion
1
2.2k
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
The SEO identity crisis: Don't let AI make you average
Avatar for Varn varn
0
240
svc-hook: hooking system calls on ARM64 by binary rewriting
Avatar for Akira Moroo retrage
1
99
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
1.9k

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?