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
330
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
830
Design Tokens in Design Systems
jina
9
28k
Designing a Design System
jina
34
7.2k
Living Design Systems
jina
42
47k
Lightning Design System
jina
6
620
Sass & Style Guides
jina
11
450
Designing for Enterprise
jina
4
180
Refactoring Web Interfaces
jina
20
950
In Search of the Single Source of Truth
jina
1
350
Other Decks in Design
See All in Design
利用者が離れないUX/UIデザイン 長く使われる業務アプリデザインのポイント
ncdc
3
170
新しいemoji😄のアイデアをUnicodeが募集中‼️🏃♀️💨💨💨傾向を学んでみんな提案しよう💪
oguemon
2
690
開発チームの中心で心理的安全性をつくる、UXデザイナーの問いかけ方
takuto_yonemichi
2
580
ito aya|Portfolio2409
itoaya116
0
260
Cardápio - Caraguá A Gosto 2024 - De 01/08 a 08/09/2024
caraguatatuba
0
5.9k
root COMPANY DECK / We are hiring!
root_recruit
1
15k
デザインシステム構築の進め方 基本から実践まで、具体的な手順を徹底解説
ncdc
1
210
拡大するマルチプロダクトSaaSの顧客理解にデザイン組織はどう取り組んでいるか / RAKUSTechCon2024_Design
rakus_dev
0
2.1k
portfolio
amitnk
1
130
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.1k
みんなでブラッシュアップするDesign Sprint_BASE BANKチームの場合
base
PRO
3
640
Осязаемый потребительский опыт. Ловим его за хвост с Картой процесса-опыта
ashapiro
2
220
Featured
See All Featured
Making Projects Easy
brettharned
115
5.9k
Facilitating Awesome Meetings
lara
50
6.1k
Designing for humans not robots
tammielis
250
25k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
A Philosophy of Restraint
colly
203
16k
Building Applications with DynamoDB
mza
90
6.1k
Side Projects
sachag
452
42k
The Art of Programming - Codeland 2020
erikaheidi
52
13k
Docker and Python
trallard
40
3.1k
Why Our Code Smells
bkeepers
PRO
334
57k
Into the Great Unknown - MozCon
thekraken
32
1.5k
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