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
Harnessing the Power of Sass
Search
jina
September 12, 2013
Design
10
550
Harnessing the Power of Sass
Presented at a Salesforce UX Meetup, hosted by Desk
jina
September 12, 2013
Tweet
Share
More Decks by jina
See All by jina
Design Systems are for People
jina
1
950
Design Tokens in Design Systems
jina
9
28k
Designing a Design System
jina
34
7.4k
Living Design Systems
jina
42
2.5M
Lightning Design System
jina
6
650
Sass & Style Guides
jina
11
490
Designing for Enterprise
jina
4
210
Refactoring Web Interfaces
jina
20
1k
In Search of the Single Source of Truth
jina
1
390
Other Decks in Design
See All in Design
Карта реализации историй. Технология осмысленной работы с детальными требованиями
ashapiro
0
120
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
120
ChatGPT、Gemini、Claude は、なぜ似たようなUIを採用しているのか?
fuwarisprit
2
1.2k
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
430
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
470
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
580
Мышление историями. Как текстовые модели поведения помогают дизайнеру проектировать
ashapiro
0
140
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.8k
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
370
Yahoo!フリマ:生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
lycorptech_jp
PRO
0
460
Them Middle School Kids Pitch
stevie_vee
0
140
【30人中30人が3ヶ月平均180万収入アップ】マズロー安達の弟子、成功事例集
maslow_akkun
0
310
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Faster Mobile Websites
deanohume
309
31k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.9k
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Designing for Performance
lara
610
69k
Designing for humans not robots
tammielis
253
25k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
Transcript
Harnessing the Power of Sass JINA BOLTON // PRODUCT DESIGNER
// DO SALESFORCE UX MEETUP
WORK BETTER, TOGETHER
“A fractured process makes for a fractured user experience.” —NATE
FORTIN
“It used to be that designers made an object and
walked away. Today the emphasis must shift to designing the entire life cycle.” —PAUL SAFFO
Creating pages
Creating systems
CSS Preprocessors: SCRIPTING LANGUAGES THAT PROVIDE ADDITIONAL AUTHORING FUNCTIONALITY TO
CSS.
Stylus
sass-lang.com
Better maintainability DRYer development Patterns & Proportions
Nesting USE (CAREFULLY) TO AVOID REPETITION
Output ul.items a ... &:hover ... .ie-6 & ... ul.items
a { ... } ul.items:hover { ... } .ie-6 ul.items a { ... } Sass
Output ul.items a ... @media print ... ul.items { ...
} @media print { ul.items { ... } } Sass
Output .sidebar border: 1px solid #eee top-color: #fff left: 0
.sidebar { border: 1px solid #eee; border-top-color: #fff; border-left: 0; } Sass
Nesting more than 3 levels deep? Refactor.
Variables STORE COMMON ATTRIBUTES FOR MAINTAINABILITY
Output $text: #444 $bg: $text body color: $text footer background:
$bg body { color: #444; } footer { background: #444; } Sass
Mixins STORE REUSABLE CODE & PASS ARGUMENTS FOR OVERRIDES
Output =mod($txt: #ccc) background: #111 color: $txt body +mod h1
+mod(#888) body { background: #111; color: #ccc; } h1 { background: #111; color: #888; } Sass
Extend CHAIN SELECTORS TOGETHER
Output .message padding: 1em a color: #369 .error @extend .message
color: #eee .message, .error { padding: 1em; } .message a, .error a { color: #369; } .error { color: #eee; } Sass
Placeholder Selectors CREATE SILENT CLASSES THAT DON’T GET OUTPUT
Output %grid-1 width: 240px %grid-2 width: 480px .content @extend %grid-1
color: #369 .main @extend %grid-1 background: #eee .content, .main { width: 240px; } .content { color: #369; } .main { background: #eee; } Sass
oocss.org
DO’S WEB APPLICATION
Deathstar DO’S WEB APPLICATION
DO’S WEBSITE
Kenobi DO’S WEBSITE
KENOBI.CSS.SASS DEATHSTAR.CSS.SASS
KENOBI.CSS.SASS DEATHSTAR.CSS.SASS
KENOBI.CSS.SASS DEATHSTAR.CSS.SASS
vendor/_shared.sass @import compass @import compass/layout @import susy kenobi.css.sass @import vendor/shared
deathstar.css.sass @import bootstrap/variables @import bootstrap/mixins @import vendor/shared 01 // vendor libraries
dependencies/_shared.sass @import metrics @import typography @import colors @import themes Globally
used variables, mixins, & functions 01 // vendor libraries 02 // dependencies
foundation/_shared.sass @include border-box-sizing @import ../vendor/normalize @import base Plain old semantic
HTML 01 // vendor libraries 02 // dependencies 03 // foundation
http://paulirish.com/2012/box-sizing-border-box-ftw/
kenobi.css.sass @import foundation/shared @import foundation/kenobi deathstar @import foundation/shared Kenobi has
a different font, so we override them after importing shared styles. 01 // vendor libraries 02 // dependencies 03 // foundation
components/_shared.sass @import icons @import buttons @import toggles @import messages @import
pagination Modular components & their states. 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components
regions/_shared.sass @import banner @import navigation @import complementary @import contentinfo Page
regions, named after their class or role names 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components 05 // regions
helpers/_shared.sass @import nonsemantic-classes @import placeholder-selectors Non-semantic helpers 01 // vendor
libraries 02 // dependencies 03 // foundation 04 // components 05 // regions 06 // helpers
responsive/_shared.sass @import responsive/mobile @import responsive/tablet @import responsive/screen Adjustments to type
sizes, grids, and images. 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components 05 // regions 06 // helpers 07 // responsive
_SCREEN.SASS _BANNER.SASS _NAVIGATION.SASS _CONTENTINFO.SASS Use mixins to keep responsive styles
in context, but output media queries together at the end.
<% if Rails.env.development? && Settings.show_grids %> @import tools/show-grid <% end
%> 01 // vendor libraries 02 // dependencies 03 // foundation 04 // components 05 // regions 06 // helpers 07 // responsive 08 // tools
} 01 // vendor libraries 02 // dependencies 03 //
foundation 04 // components 05 // regions 06 // helpers 07 // responsive 08 // tools Put new CSS in the proper place. Move old CSS as you come to it. Move more CSS if you have tech debt time.
Style Guides + Sass go together perfectly.
blog.engineyard.com/front-end-maintainability-with-sass-and-style-guides
ENGINE YARD APP CLOUD, EARLY 2011
CODE STYLES DOCUMENTED AS YOU GO
Try a responsive iframe sandbox during development.
VIEW ALL SIZE-BASED MEDIA QUERIES AT ONCE WITH IFRAMES
Color MAINTAINABILITY WITH SASS & STYLE GUIDES
Create a simple color palette. Use Sass to make variations.
$x: #369 $y: #fff .a color: lighten($x, 5%) .b color:
darken($x, 5%) .c color: saturate($x, 5%) .e color: mix($x, $y)
Use your Sass variables to generate a living color palette
in your style guide.
Make variables for common pairings of colors & Sass color
functions, and document it.
Engine Yard App Cloud, Early 2011
_header.sass $black: #000 $grey: #eee $white: invert($black) $h-bg-color: $black $h-text-color:
$grey $h-link-color: $white _colors.sass
sassme.arc90.com
Make mixins for common pairings of background, text, & shadow
colors.
Typography CREATE A SMART SYSTEM
Choose a standard base unit. 4 is good; it multiplies
into 8, 12, 16, etc.
Create mixins for your various type styles. Small and all
caps, big quote styles, etc. Document them.
Don’t try to refactor and document everything at once. You’ll
likely give up.
Do refactor & document going forward, in iterations.
“Be regular and orderly in your life so that you
may be violent and original in your work.” —GUSTAVE FLAUBERT
dribbble: @DOWORKTOGETHER
DO.COM @DOWORKTOGETHER