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

Living Style Guides In Sass

Avatar for canarymason canarymason
October 16, 2012
Design
410
3

Living Style Guides In Sass

Presented at the NYC Sass Meetup (October 2012) at Pivotal Labs.

Avatar for canarymason

canarymason

October 16, 2012

More Decks by canarymason

See All by canarymason
Mobile and Responsive Design with Sass
Avatar for canarymason canarymason
3
260
The Coding Designer's Survival Kit
Avatar for canarymason canarymason
8
530

Other Decks in Design

See All in Design
AI時代に求められるUXデザインのアプローチ
Avatar for xtone xtone
0
2.7k
大企業インハウスデザイン組織における DesignOps改革の現在地 / DesignOps at Scale: Navigating Transformation in Large Enterprises
Avatar for NTT docomo Business nttcom
0
520
保育現場にAIを 〜人と技術に橋を架けるデザインで考えてきたこと〜 uiuxcamp2026-hoiku-ai-design
Avatar for Takahiro Yamaguchi hiro93n
1
200
Drawing for Animation
Avatar for Mandalyn Teo lynteo
2
270
From the Visible Crossroads: Turning Outputs into Outcomes
Avatar for takai_kanako takaikanako
2
1.4k
社長の宿題への回答 「新卒×AI」が生み出す価値
Avatar for さき saki822
2
120
「ツール」から「パートナー」へ。AI伴走時代のUXデザインとは？～操作を減らし、成果を最大にするための設計～
Avatar for NCDC ncdc
1
580
次世代のクリエイティブ体験！Photoshopの最新機能で新しい未来を切り開こう
Avatar for コネクリ connecre
0
140
AIスライドデザインを生成する仕組みを社内共有する
Avatar for 太田賢一 kenichiota0711
7
5.3k
AIネイティブスタートアップにおけるプロダクト開発の新常識 / Product Development Tips in AI-Native Startups
Avatar for Jumpei Sakatsu saka2jp
2
1.2k
Ralph Penel Portfolio
Avatar for ralphpenel ralphpenel
0
400
設計と制作 意図を形に表す / Design and Making: Intent Made Form
Avatar for usagimaru usagimaru
3
1.6k

Featured

See All Featured
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
350
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
11
890
From Legacy to Launchpad: Building Startup-Ready Communities
Avatar for Dug Song dugsong
0
190
Odyssey Design
Avatar for Ryan Kendrick rkendrick25
PRO
2
570
A Tale of Four Properties
Avatar for Chris Coyier chriscoyier
163
24k
How to optimise 3,500 product descriptions for ecommerce in one day using ChatGPT
Avatar for Katarina Dahlin katarinadahlin
PRO
1
3.5k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
Avatar for Vitaly Friedman smashingmag
254
22k
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
100
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
1
110
Lightning Talk: Beautiful Slides for Beginners
Avatar for Ines Montani inesmontani
PRO
1
520
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2k
How to Align SEO within the Product Triangle To Get 
Buy-In & Support - #RIMC
Avatar for Aleyda Solis aleyda
1
1.5k

Transcript

  1. Living Style Guides & Sass Wednesday, October 17, 12

  2. Hi, I’m Mason @codingdesigner I design and make websites. I

    love CSS and Sass. Probably too much. Wednesday, October 17, 12

  3. I Make Sass Extensions github.com/canarymason Wednesday, October 17, 12

  4. Crazy things sassy mother effing text shadow sassymothereffingtextshadow.com Wednesday, October

    17, 12

  5. Modular Scale Calculate typographic scales github.com/scottkellum/modular-scale with @scottkellum Wednesday, October

    17, 12

  6. Breakpoint Really simple media queries in Sass breakpoint-sass.com with @snugug

    Wednesday, October 17, 12

  7. Survival Kit A Toolset for Designing Web Sites in the

    Browser thecodingdesigner.com/survivalkit Wednesday, October 17, 12

  8. Contact Me Zivtech zivtech.com Mason Wendell - Creative Director Twitter,

    Dribbble & Drupal: codingdesigner github: canarymason Wednesday, October 17, 12

  9. I Wednesday, October 17, 12

  10. Living Style Guides Wednesday, October 17, 12

  11. BBC GEL Wednesday, October 17, 12

  12. OLI.JP Wednesday, October 17, 12

  13. Zivtech.com Wednesday, October 17, 12

  14. What’s so great? Wednesday, October 17, 12

  15. Your style guide is a: Design Cop Wednesday, October 17,

    12

  16. Your style guide is a: Design Catalog Wednesday, October 17,

    12

  17. Your style guide is a: Design Sherpa Wednesday, October 17,

    12

  18. And Also: Code Teacher Responsive Ready Client Pleasing Institutional Memory

    Wednesday, October 17, 12

  19. II Wednesday, October 17, 12

  20. What’s Sass got to do with it? Wednesday, October 17,

    12

  21. Variables Define colors, dimensions, etc Wednesday, October 17, 12

  22. Mixins Abstract your design ideas into reusable formulas Wednesday, October

    17, 12

  23. Extend Put reused code into reusable silent selectors Wednesday, October

    17, 12

  24. Partials and Nesting Compartmentalize design modules Encourage more flexible and

    future-friendly styles Wednesday, October 17, 12

  25. Use Creativly Wednesday, October 17, 12

  26. Always be Refactoring Wednesday, October 17, 12

  27. What is a Sass, and How Will I Know if

    I’m Shaking it? Wednesday, October 17, 12

  28. Ship. Wednesday, October 17, 12

  29. Questions & Contact Zivtech zivtech.com Mason Wendell - Creative Director

    Twitter, Dribbble & Drupal: codingdesigner github: canarymason Wednesday, October 17, 12