Sass Basics #1 - Speaker Deck

Slide 1

Slide 1 text

JINA BOLTON SENIOR PRODUCT DESIGNER SALESFORCE UX Sass Basics #1

Slide 2

Slide 2 text

Don’t know CSS? …start there. …then come back to this :)

Slide 3

Slide 3 text

you want me to use what???

Slide 4

Slide 4 text

2 weeks later…

Slide 5

Slide 5 text

omg! omg! yay Sass!

Slide 6

Slide 6 text

Create a GitHub account if you don’t have one already. It’s free.

Slide 7

Slide 7 text

WTF is Sass?

Slide 8

Slide 8 text

Sass, not SASS!

Slide 9

Slide 9 text

INVENTED 2007 BY Hampton Catlin

Slide 10

Slide 10 text

CORE TEAM Nathan Weizenbaum Chris Eppstein

Slide 11

Slide 11 text

compilation

Slide 12

Slide 12 text

_icons.scss _grid.scss style.css _type.scss

Slide 13

Slide 13 text

common misconceptions

Slide 14

Slide 14 text

“I don’t know how to use the command line.” YOU DON’T HAVE TO.

Slide 15

Slide 15 text

CODEKIT.COM

Slide 16

Slide 16 text

MHS.GITHUB.IO/SCOUT-APP

Slide 17

Slide 17 text

“I don’t want to learn Ruby.” YOU DON’T HAVE TO.

Slide 18

Slide 18 text

LIBSASS.ORG

Slide 19

Slide 19 text

“I’ll have to learn a whole new syntax.” NOT NECESSARILY.

Slide 20

Slide 20 text

2 syntaxes…

Slide 21

Slide 21 text

Sass syntactically awesome style sheets THE ORIGINAL SYNTAX, .sass EXTENSION INDENTED, WHITESPACE-SENSITIVE NO CURLY BRACES OR SEMI-COLONS, & PROVIDES MIXIN SHORTCUTS

Slide 22

Slide 22 text

SCSS sassy CSS THE NEWER SYNTAX, .scss EXTENSION EASIER FOR NEWCOMERS TO LEARN IT LOOKS LIKE REGULAR CSS, BUT WITH EXTRA GOODIES

Slide 23

Slide 23 text

Sass SCSS h1 background: #eee color: #444 h2 font-weight: bold color: #222 h1 { background: #eee; color: #444; } h2 { font-weight: bold; color: #222; }

Slide 24

Slide 24 text

choose your own adventure

Slide 25

Slide 25 text

easier maintainability

Slide 26

Slide 26 text

don’t repeat yourself

Slide 27

Slide 27 text

patterns & proportions

Slide 28

Slide 28 text

write less. do more. no, not LESS. ;-)

Slide 29

Slide 29 text

don’t overwhelm yourself. start small

Slide 30

Slide 30 text

SASS-LANG.COM

Slide 31

Slide 31 text

SASSMEISTER.COM

Slide 32

Slide 32 text

We’ll use Sassmeister to try out Sass. We can save our work to GitHub gists.

Slide 33

Slide 33 text

commenting with Sass

Slide 34

Slide 34 text

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.

Slide 35

Slide 35 text

CSS output SCSS /* * A multiline comment * like you see in regular CSS */ // And a single line comment. in production, usually all comments are stripped…

Slide 36

Slide 36 text

Slide 37

Slide 37 text

nesting with Sass

Slide 38

Slide 38 text

CSS output SCSS .nav { background: #eee; } .nav a { float: left; } .nav { background: #eee; a { float: left; } }

Slide 39

Slide 39 text

CSS output SCSS .nav { background: #eee; } .nav a { float: left; } .nav a span { color: #ccc; } .nav { background: #eee; a { float: left; span { color: #ccc; } } }

Slide 40

Slide 40 text

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; } } }

Slide 41

Slide 41 text

.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; }

Slide 42

Slide 42 text

.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; }

Slide 43

Slide 43 text

.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; }

Slide 44

Slide 44 text

.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

Slide 45

Slide 45 text

.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; }

Slide 46

Slide 46 text

be careful with nesting

Slide 47

Slide 47 text

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; }

Slide 48

Slide 48 text

Overly-specific CSS is a bitch to work with!

Slide 49

Slide 49 text

more than 3 levels? refactor.

Slide 50

Slide 50 text

variables with Sass

Slide 51

Slide 51 text

Numbers with or without units 1.2 13 10px

Slide 52

Slide 52 text

Strings of text with or without quotes "FOO" 'bar' baz

Slide 53

Slide 53 text

Colors named or encoded blue #04a3f9 rgba(255, 0, 0, 0.5)

Slide 54

Slide 54 text

Booleans true or false

Slide 55

Slide 55 text

null

Slide 56

Slide 56 text

List of values separated by commas or spaces 1.5em 1em 0 2em Helvetica, Arial, sans-serif

Slide 57

Slide 57 text

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; }

Slide 58

Slide 58 text

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; }

Slide 59

Slide 59 text

CSS output SCSS body { color: #222; } a { color: #369; } $text: #222; $text: #444 !default; $link: #369 !default; body { color: $text; } a { color: $link; }

Slide 60

Slide 60 text

use !default on variables for settings that may get overridden

Slide 61

Slide 61 text

CSS output SCSS a { color: #336699; } a:hover { color: #2d5986; } $link: #369; a { color: $link; &:hover { color: darken($link, 5%); } }

Slide 62

Slide 62 text

JACKIEBALZER.COM/COLOR

Slide 63

Slide 63 text

CSS output SCSS .column { margin: 0 16px; padding: 0 8px; } $gutter: 16px; .column { margin: 0 $gutter; padding: 0 ($gutter / 2); }

Slide 64

Slide 64 text

clarity > brevity

Slide 65

Slide 65 text

stay organized

Slide 66

Slide 66 text

“Be regular and orderly in your life so that you may be violent and original in your work.” — GUSTAVE FLAUBERT

Slide 67

Slide 67 text

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