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
540
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
880
Design Tokens in Design Systems
jina
9
28k
Designing a Design System
jina
34
7.3k
Living Design Systems
jina
42
1.3M
Lightning Design System
jina
6
630
Sass & Style Guides
jina
11
460
Designing for Enterprise
jina
4
190
Refactoring Web Interfaces
jina
20
970
In Search of the Single Source of Truth
jina
1
360
Other Decks in Design
See All in Design
Tableau曲線表現講座(2024.11.21)
cielo1985
0
250
「ちょっといいUI」を目指す努力 / Striving for Little Big Details
usagimaru
6
4.1k
デザインシステムの力 Webデザイナーとエンジニアのための実践ガイド / The Power of Design System
spindle
9
4.9k
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
140
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
470
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
5
430
富山デザイン勉強会_ワンランク上に見せるデザインのコツ.pdf
keita_yoshikawa
0
140
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
180
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
620
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.4k
志ある事業の種を社会に開花させるための挑戦/ Designship2024_Nishimura
root_recruit
0
260
共通言語としてのデザイントークンと Figmaでの運用
kamy0042
0
230
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Embracing the Ebb and Flow
colly
84
4.6k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
Become a Pro
speakerdeck
PRO
26
5.1k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
Bash Introduction
62gerente
610
210k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Being A Developer After 40
akosma
89
590k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
GraphQLの誤解/rethinking-graphql
sonatard
68
10k
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