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
380
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
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
650
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
ビジネスアナリシスはビジネス”分析”じゃないよ!~システム人材が価値を生むための基盤スキルとしてのビジネスアナリシス~
bpstudy
0
620
デザイナーのAI活用とチームへの浸透戦略
ukaoli
0
130
Spectrum Tokyo_ デザイナーが事業責任者になってみた
shin_2
0
140
デザイナー向けフライル説明資料
toshiblues
0
160
Memory Man v3 (WIP)
storybychad
PRO
0
2.6k
ランドマークが光る!季節を彩るナビ体験 - Mobility Night #3 -
kitau
0
120
AIで加速するアクセシビリティのこれから
magi1125
4
710
サービスリブランディングにおけるイラストレーションシステムの構築と活用事例 / Building and Utilizing an Illustration System in Service Rebranding
lycorptech_jp
PRO
0
620
AIを身近に感じるために、デザイナー全員で一つのサービスを使ってみた
_psyc0_
0
310
読書シェア会 vol.5 / Yumemi.grow 20250526
rakus_dev
0
1.8k
Illustrator×Firefly 生成したイラストをベースにドット絵を作ってみよう!
connecre
1
130
Meet, Learn, Grow × AI ― コミュニティで加速するスキル循環 「コミュニティと関わり方」
tame
0
260
Featured
See All Featured
Balancing Empowerment & Direction
lara
4
660
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Context Engineering - Making Every Token Count
addyosmani
3
140
Statistics for Hackers
jakevdp
799
220k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Bash Introduction
62gerente
615
210k
For a Future-Friendly Web
brad_frost
180
9.9k
The Power of CSS Pseudo Elements
geoffreycrofte
78
6k
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