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
340
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
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
ユーザーに向き合うデザインが介護・福祉の現場を変える / User-facing design changes the field of care and welfare
sms_tech
0
230
Rayout Pattern 01
one0
0
1.5k
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
66k
Tableau曲線表現講座(2024.11.21)
cielo1985
0
250
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
270
TUNAG BOOK 2024
stmn
0
470
Personal Story Sequence - Vendetta(WIP)
elrns88
0
400
12年続くB2DサービスとUXデザイン / UX Design keeps B2D service alive over 12 years
tnj
0
280
ネーミングの極意 - その名は体を現していますか? -
kakukoki
2
470
シームレスな連携を実現するデザイントークンの設計と構築
amishiratori
0
490
太田博三(@usagisan2020)
otanet
0
220
若手デザイナーチームが手がける CADC2024クリエイティブディレクションの全貌 / opening-design
cyberagentdevelopers
PRO
1
1.5k
Featured
See All Featured
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
Site-Speed That Sticks
csswizardry
3
370
4 Signs Your Business is Dying
shpigford
182
22k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
366
25k
Code Review Best Practice
trishagee
66
17k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Speed Design
sergeychernyshev
25
780
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Navigating Team Friction
lara
183
15k
Building Applications with DynamoDB
mza
93
6.2k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
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