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
Design Your Own App Using Figma by Medha Muppala
gdgmontreal
0
1.6k
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
720
241214_StackNagoya_プレイングマネージャーのプレイングの時間の使い方
kiyoshifuwa
0
210
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
570
20241204_UI/UXデザイナーLT会 - vol.10_DMM
motokoishida
0
270
今日からできる実践アクセシビリティSNSというかXでaltをつけよう
securecat
1
140
急成長中のWINTICKETにおける ちいさくはじめるライティング改善 / winticket-writing
cyberagentdevelopers
PRO
1
270
富山デザイン勉強会_デザイントレンド2025.pdf
keita_yoshikawa
0
150
東急URBAN HACKSのデザイナーって何やってるの? 〜Designer Night #1〜 移動・不動産領域の取り組み
tmtgtkhs
0
200
LLMによるRAG評価用合成テストデータの生成
licux
6
660
マンガで分かるサービスデザインガイドライン
senryakuka
1
550
【デザイン初め新年会2025|01.08】事業貢献するデザイン組織の挑戦 - 2025年、課題解決をリードする。
payatsusan213
0
9.3k
Featured
See All Featured
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
Visualization
eitanlees
146
15k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Side Projects
sachag
452
42k
A Philosophy of Restraint
colly
203
16k
Producing Creativity
orderedlist
PRO
343
39k
How to Think Like a Performance Engineer
csswizardry
22
1.3k
Reflections from 52 weeks, 52 projects
jeffersonlam
348
20k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Done Done
chrislema
182
16k
Fashionably flexible responsive web design (full day workshop)
malarkey
406
66k
We Have a Design System, Now What?
morganepeng
51
7.4k
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