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
Sass Basics #1
Search
jina
April 22, 2014
Design
4
350
Sass Basics #1
A beginner-level presentation I gave internally at work to teach the basics of Sass.
jina
April 22, 2014
Tweet
Share
More Decks by jina
See All by jina
Design Systems are for People
jina
1
900
Design Tokens in Design Systems
jina
9
28k
Designing a Design System
jina
34
7.3k
Living Design Systems
jina
42
1.6M
Lightning Design System
jina
6
630
Sass & Style Guides
jina
11
470
Designing for Enterprise
jina
4
200
Refactoring Web Interfaces
jina
20
980
In Search of the Single Source of Truth
jina
1
370
Other Decks in Design
See All in Design
今日から意識できるアクセシビリティ
fumiko
0
200
Goodpatch Tour💙 / We are hiring!
goodpatch
31
820k
発表資料テンプレート / My slide template
thatblue
0
280
Дизайн услуги через её визуализацию с Картой процесса-опыта
ashapiro
0
300
デザイナーとPMの両ロール_3つのポイント
toy1618
1
270
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
360
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
590
aya_murakami_portfolio
ayakaimi1101
0
1.5k
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
370
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
240
パンくずリストかわいい(breadcrumb so cute)
ysuda
0
230
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
11k
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
The Straight Up "How To Draw Better" Workshop
denniskardys
232
140k
StorybookのUI Testing Handbookを読んだ
zakiyama
29
5.6k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
A designer walks into a library…
pauljervisheath
205
24k
Art, The Web, and Tiny UX
lynnandtonic
298
20k
Raft: Consensus for Rubyists
vanstee
137
6.9k
How GitHub (no longer) Works
holman
314
140k
A Tale of Four Properties
chriscoyier
158
23k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Code Reviewing Like a Champion
maltzj
522
40k
Transcript
JINA BOLTON SENIOR PRODUCT DESIGNER SALESFORCE UX Sass Basics #1
Don’t know CSS? …start there. …then come back to this
:)
you want me to use what???
2 weeks later…
omg! omg! yay Sass!
Create a GitHub account if you don’t have one already.
It’s free.
WTF is Sass?
Sass, not SASS!
INVENTED 2007 BY Hampton Catlin
CORE TEAM Nathan Weizenbaum Chris Eppstein
compilation
_icons.scss _grid.scss style.css _type.scss
common misconceptions
“I don’t know how to use the command line.” YOU
DON’T HAVE TO.
CODEKIT.COM
MHS.GITHUB.IO/SCOUT-APP
“I don’t want to learn Ruby.” YOU DON’T HAVE TO.
LIBSASS.ORG
“I’ll have to learn a whole new syntax.” NOT NECESSARILY.
2 syntaxes…
Sass syntactically awesome style sheets THE ORIGINAL SYNTAX, .sass EXTENSION
INDENTED, WHITESPACE-SENSITIVE NO CURLY BRACES OR SEMI-COLONS, & PROVIDES MIXIN SHORTCUTS
SCSS sassy CSS THE NEWER SYNTAX, .scss EXTENSION EASIER FOR
NEWCOMERS TO LEARN IT LOOKS LIKE REGULAR CSS, BUT WITH EXTRA GOODIES
Sass SCSS h1 background: #eee color: #444 h2 font-weight: bold
color: #222 h1 { background: #eee; color: #444; } h2 { font-weight: bold; color: #222; }
choose your own adventure
easier maintainability
don’t repeat yourself
patterns & proportions
write less. do more. no, not LESS. ;-)
don’t overwhelm yourself. start small
SASS-LANG.COM
SASSMEISTER.COM
We’ll use Sassmeister to try out Sass. We can save
our work to GitHub gists.
commenting with Sass
CSS output SCSS /* * A multiline comment * like
you see in regular CSS */ /* * A multiline comment * like you see in regular CSS */ // And a single line comment.
CSS output SCSS /* * A multiline comment * like
you see in regular CSS */ // And a single line comment. in production, usually all comments are stripped…
CSS output SCSS /*! Copyright 2014 Jina */ /*! Copyright
2014 Jina */ // And a single line comment. exclamation mark forces multiline comments to render
nesting with Sass
CSS output SCSS .nav { background: #eee; } .nav a
{ float: left; } .nav { background: #eee; a { float: left; } }
CSS output SCSS .nav { background: #eee; } .nav a
{ float: left; } .nav a span { color: #ccc; } .nav { background: #eee; a { float: left; span { color: #ccc; } } }
CSS output SCSS .nav { background: #eee; } .nav a
{ float: left; } .nav a :hover { text-decoration: none; } .nav a span { color: #ccc; } .nav { background: #eee; a { float: left; :hover { text-decoration: none; } span { color: #ccc; } } }
.nav { background: #eee; a { float: left; &:hover {
text-decoration: none; } span { color: #ccc; } } } CSS output SCSS .nav { background: #eee; } .nav a { float: left; } .nav a:hover { text-decoration: none; } .nav a span { color: #ccc; }
.nav { background: #eee; a { float: left; &:hover {
text-decoration: none; } .ie-6 & { display: inline; } span { color: #ccc; } } } CSS output SCSS .nav { background: #eee; } .nav a { float: left; } .nav a:hover { text-decoration: none; } .ie-6 .nav a { display: inline; } .nav a span { color: #ccc; }
.nav { background: #eee; a { float: left; @media print
{ color: #000; } &:hover { text-decoration: none; } .ie-6 & { display: inline; } span { color: #ccc; } } } CSS output SCSS .nav { background: #eee; } .nav a { float: left; } @media print { .nav a { color: #000; } } .nav a:hover { text-decoration: none; } .ie-6 .nav a { display: inline; } .nav a span { color: #ccc; }
.nav { background: #eee; a { float: left; @media print
{ color: #000; } &:hover { text-decoration: none; } .ie-6 & { display: inline; } span { color: #ccc; } } } Sass syntax SCSS syntax .nav background: #eee a float: left @media print color: #000 &:hover text-decoration: none .ie-6 & display: inline span color: #ccc
.sidebar { border: 1px solid #eee { top-color: #fff; left:
0; } } CSS output SCSS .sidebar { border: 1px solid #eee; border-top-color: #fff; border-left: 0; }
be careful with nesting
body { color: #444; .sidebar { color: #888; h2 {
color: #666; a { color: #369; } } } } CSS output SCSS body { color: #444; } body .sidebar { color: #888; } body .sidebar h2 { color: #666; } body .sidebar h2 a { color: #369; }
Overly-specific CSS is a bitch to work with!
more than 3 levels? refactor.
variables with Sass
Numbers with or without units 1.2 13 10px
Strings of text with or without quotes "FOO" 'bar' baz
Colors named or encoded blue #04a3f9 rgba(255, 0, 0, 0.5)
Booleans true or false
null
List of values separated by commas or spaces 1.5em 1em
0 2em Helvetica, Arial, sans-serif
CSS output SCSS body { color: #444; } a {
color: #369; } button { background: #369; } $text: #444; $link: #369; body { color: $text; } a { color: $link; } button { background: $link; }
CSS output SCSS body { color: #444; } a {
color: #036; } button { background: #036; } $text: #444; $link: #369; $link: #036; body { color: $text; } a { color: $link; } button { color: $link; }
CSS output SCSS body { color: #222; } a {
color: #369; } $text: #222; $text: #444 !default; $link: #369 !default; body { color: $text; } a { color: $link; }
use !default on variables for settings that may get overridden
CSS output SCSS a { color: #336699; } a:hover {
color: #2d5986; } $link: #369; a { color: $link; &:hover { color: darken($link, 5%); } }
JACKIEBALZER.COM/COLOR
CSS output SCSS .column { margin: 0 16px; padding: 0
8px; } $gutter: 16px; .column { margin: 0 $gutter; padding: 0 ($gutter / 2); }
clarity > brevity
stay organized
“Be regular and orderly in your life so that you
may be violent and original in your work.” — GUSTAVE FLAUBERT
USE SASSMEISTER TO EXPERIMENT WITH NESTING & VARIABLES. BUILD A
COLOR PALETTE USING ONE OR TWO BASE COLORS AND LETTING SASS GENERATE THE OTHER COLORS. NEXT WEEK: MIXINS! your homework