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.5k
Living Design Systems
jina
42
2.5M
Lightning Design System
jina
6
660
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
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
560
【Designship 2025|10.11】デザイン組織と事業貢献、その挑戦と結果。
payatsusan213
1
470
Portfolio 齋藤明敏 Hiroyuki Saito_守秘義務あり
crearedesign
0
320
組織の右腕として共創する ー デザインと経営の二つの視点から見えた、新しい支援のかたち/ Designship2025_Nishimura
root_recruit
PRO
0
140
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
580
デザイナーがAIを使い倒して爆速プロダクト開発!社内ハッカソンでの取り組み紹介
abokadotyann
8
2.4k
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
170
Character Experience AI 〜 AIキャラクターのつくりかた 〜
smartbank
1
360
【MIXI MEETUP!ー TECH & DESIGN DAYー】新たなSNS「mixi2」の “0→1”開発の舞台裏:デザイナーが語るプロダクト誕生秘話
mixi_design
PRO
0
140
プロダクトリニューアルと同時に進める初めてのデザインシステム
techtekt
PRO
0
110
Portfolio 齋藤明敏 Hiroyuki Saito
crearedesign
0
110
「UXとUIの違い」v2
shirasu3
0
250
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
508
140k
The Illustrated Children's Guide to Kubernetes
chrisshort
49
51k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
35
3.2k
Building an army of robots
kneath
306
46k
Being A Developer After 40
akosma
91
590k
Learning to Love Humans: Emotional Interface Design
aarron
274
41k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
Navigating Team Friction
lara
190
15k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
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