Slide Sass for designers @laurakalbag
Sass for designers
1
Slide 2
Slide 2 text
Slide Sass for designers @laurakalbag
2
HTML and CSS
loads
JavaScript
a tiny bit
Programming
argh! scary!
Illustration
fairly often
Print design
every now and again
Web design
loads
What I do
Slide 3
Slide 3 text
Slide Sass for designers @laurakalbag
3 Documentation for LESS and Sass
LESS
Sass
Slide 4
Slide 4 text
Slide Sass for designers @laurakalbag
4 the command line intimidates me
Slide 5
Slide 5 text
Slide Sass for designers @laurakalbag
5 this talk will show you some of the basic features of Sass
Slide 6
Slide 6 text
Slide Sass for designers @laurakalbag
Setting up a project using Sass
6
Slide 7
Slide 7 text
Slide Sass for designers @laurakalbag
You can re-trace my steps later
on GitHub
7 https://github.com/laurakalbag/webtalkdogwalk
Slide 8
Slide 8 text
Slide Sass for designers @laurakalbag
8 Use CodeKit for Sass : http://incident57.com/codekit/
Slide 9
Slide 9 text
Slide Sass for designers @laurakalbag
9 http://alphapixels.com/prepros/ http://mixture.io/
CodeKit alternatives for Windows
Slide 10
Slide 10 text
Slide Sass for designers @laurakalbag
10 Download CodeKit at http://incident57.com/codekit/
Slide 11
Slide 11 text
Slide Sass for designers @laurakalbag
11 Unzip the CodeKit folder and drag it into Applications
Slide 12
Slide 12 text
Slide Sass for designers @laurakalbag
12 Open up CodeKit
Slide 13
Slide 13 text
Slide Sass for designers @laurakalbag
13
web talk dog walk
my web talk dog walk idea
Slide 14
Slide 14 text
Slide Sass for designers @laurakalbag
14 Mockups in Sketch (http://www.bohemiancoding.com/sketch/)
Slide 15
Slide 15 text
Slide Sass for designers @laurakalbag
15 Sublime Text 2 (http://www.sublimetext.com/2)
my (current) preferred text editor
Slide 16
Slide 16 text
Slide Sass for designers @laurakalbag
16 HTML/PHP in Sublime Text 2
HTML all set up and ready to style
Slide 17
Slide 17 text
Slide Sass for designers @laurakalbag
17 HTML as seen in Google Chrome
Slide 18
Slide 18 text
Slide Sass for designers @laurakalbag
18 File > Add Project… choose the project folder
add the project to CodeKit
Slide 19
Slide 19 text
Slide Sass for designers @laurakalbag
19 the project as seen in CodeKit
Slide 20
Slide 20 text
Slide Sass for designers @laurakalbag
20 Hold shift to select multiple files and then click ‘Hide These Files’
hide the files we don’t want to compile or compress
Slide 21
Slide 21 text
Slide Sass for designers @laurakalbag
21 when the files are hidden, you don’t see them (!)
Slide 22
Slide 22 text
Slide Sass for designers @laurakalbag
22 Create an empty folder called ‘sass’ in the site’s root folder
set up a folder for the Sass files
Slide 23
Slide 23 text
Slide Sass for designers @laurakalbag
23 Create an empty file in the ‘sass’ folder and call it ‘style.scss’
our first Sass file (.scss)
Slide 24
Slide 24 text
Slide Sass for designers @laurakalbag
24 Use the Package Manager to install Syntax Highlighting for Sass
add syntax highlighting so Sass is easy to read
Slide 25
Slide 25 text
Slide Sass for designers @laurakalbag
The difference between
.sass and .scss
25
Slide 26
Slide 26 text
Slide Sass for designers @laurakalbag
.sass and .scss are both Sass
syntaxes
26
Slide 27
Slide 27 text
Slide Sass for designers @laurakalbag
27
.scss
.sass
no semi-colons ; and no curly brackets {}
semi-colons ; and curly brackets {}
the differences between .scss and .sass
Slide 28
Slide 28 text
Slide Sass for designers @laurakalbag
.scss allows ordinary CSS to
be used in the same files
28 and this is why I use it
Slide 29
Slide 29 text
Slide Sass for designers @laurakalbag
First steps in Sass
29
Slide 30
Slide 30 text
Slide Sass for designers @laurakalbag
30 my CSS reset in the style.scss file
Slide 31
Slide 31 text
Slide Sass for designers @laurakalbag
31 Hit the refresh icon on the bottom left to see the style.scss file
our first .scss file in CodeKit
Slide 32
Slide 32 text
Slide Sass for designers @laurakalbag
32 compile the Sass file using CodeKit
select the style.scss file and click ‘Compile’
Slide 33
Slide 33 text
Slide Sass for designers @laurakalbag
33
the CSS folder CodeKit has created
you can see where CodeKit created the folder and file
Slide 34
Slide 34 text
Slide Sass for designers @laurakalbag
34 style.css, as generated by CodeKit from the style.scss file
the CSS CodeKit has created
Slide 35
Slide 35 text
Slide Sass for designers @laurakalbag
35 Select ‘Compressed’ from the Output Style: dropdown
compress the outputted CSS to make it nice and quick
Slide 36
Slide 36 text
Slide Sass for designers @laurakalbag
36 Select ‘Compressed’ from the Output Style: dropdown
when CodeKit compiles, it has a progress bar and notification
Slide 37
Slide 37 text
Slide Sass for designers @laurakalbag
37 style.css, created, compiled and compressed by CodeKit
Slide 38
Slide 38 text
Slide Sass for designers @laurakalbag
38 Link to the compiled and compressed CSS file
Slide 39
Slide 39 text
Slide Sass for designers @laurakalbag
39 the CSS reset in action
Slide 40
Slide 40 text
Slide Sass for designers @laurakalbag
Partials
40
Slide 41
Slide 41 text
Slide Sass for designers @laurakalbag
41 a messy file
Slide 42
Slide 42 text
Slide Sass for designers @laurakalbag
42 Jonathan Snook’s SMACSS http://smacss.com/book/categorizing
a sensible way to split up files
Slide 43
Slide 43 text
Slide Sass for designers @laurakalbag
43
@import “reset”;
Sass partial syntax
include this in the compiled
version of this file
the file name
Slide 44
Slide 44 text
Slide Sass for designers @laurakalbag
44 Use @import to tell CodeKit to compile all these files into style.css
Slide 45
Slide 45 text
Slide Sass for designers @laurakalbag
45
see how CodeKit doesn’t compile partials directly
Save the files so CodeKit compiles them
Slide 46
Slide 46 text
Slide Sass for designers @laurakalbag
46 See that CodeKit hasn’t created any more files
Slide 47
Slide 47 text
Slide Sass for designers @laurakalbag
Variables
47
Slide 48
Slide 48 text
Slide Sass for designers @laurakalbag
48 mockup colour palette
Slide 49
Slide 49 text
Slide Sass for designers @laurakalbag
49
$grey-light: #f9f9f9;
Sass variable syntax
name of the variable
the variable unit
Slide 50
Slide 50 text
Slide Sass for designers @laurakalbag
50
Slide 51
Slide 51 text
Slide Sass for designers @laurakalbag
Comments
51
Slide 52
Slide 52 text
Slide Sass for designers @laurakalbag
52
/* this comment will show in the CSS */
// this comment will only show in the Sass
Sass comment syntax
Slide 53
Slide 53 text
Slide Sass for designers @laurakalbag
53 Add a Sass-only comment to the top of the file
Slide 54
Slide 54 text
Slide Sass for designers @laurakalbag
54 colour variables on my base elements
Slide 55
Slide 55 text
Slide Sass for designers @laurakalbag
55 the CodeKit Log and error
Syntax error: undefined variable: "$grey-dark";
Slide 56
Slide 56 text
Slide Sass for designers @laurakalbag
56 the variables partial wasn’t being imported, this caused the error
Slide 57
Slide 57 text
Slide Sass for designers @laurakalbag
57 the site is starting to look more like the mockup
Slide 58
Slide 58 text
Slide Sass for designers @laurakalbag
Vertical rhythm with variables
58
Slide 59
Slide 59 text
Slide Sass for designers @laurakalbag
59 I’ve added web fonts to the site but it lacks visual hierarchy
Slide 60
Slide 60 text
Slide Sass for designers @laurakalbag
60 the base grid I’ve used on my mockup
Slide 61
Slide 61 text
Slide Sass for designers @laurakalbag
61 a variable based on my mockup grid base unit
Slide 62
Slide 62 text
Slide Sass for designers @laurakalbag
62 the body text font size in the mockup is 15px
Slide 63
Slide 63 text
Slide Sass for designers @laurakalbag
63 Sass variable operations syntax
font-size: $unit*1.5;
property
a number
name of the variable
multiply by
Slide 64
Slide 64 text
Slide Sass for designers @laurakalbag
64 Make the body text the size of the base unit multiplied by 1.5
Slide 65
Slide 65 text
Slide Sass for designers @laurakalbag
65 Save the file and see how Sass compiles the variable into 15px
Slide 66
Slide 66 text
Slide Sass for designers @laurakalbag
66 Use the base unit on all elements to achieve basic vertical rhythm
Slide 67
Slide 67 text
Slide Sass for designers @laurakalbag
67 Now the hierarchy is clearer, but the font size is too small
Slide 68
Slide 68 text
Slide Sass for designers @laurakalbag
68 Change the variable unit to affect all instances of $unit
bump up the unit size by 1px
Slide 69
Slide 69 text
Slide Sass for designers @laurakalbag
69 Now the text is more readable
Slide 70
Slide 70 text
Slide Sass for designers @laurakalbag
70 I’ve added more colour, illustrations and padding to the site
Slide 71
Slide 71 text
Slide Sass for designers @laurakalbag
Mixins
71
Slide 72
Slide 72 text
Slide Sass for designers @laurakalbag
72 the web talk dog walk title appears twice on the page
Slide 73
Slide 73 text
Slide Sass for designers @laurakalbag
73 In a headers.scss partial, write the rules to hide the first title
Slide 74
Slide 74 text
Slide Sass for designers @laurakalbag
74 add a new partial called mixins.scss
Slide 75
Slide 75 text
Slide Sass for designers @laurakalbag
75 Sass mixin syntax for defining a mixin
@mixin hide {
height: 0;
margin: 0;
overflow: hidden;
padding: 0;
}
create a mixin
mixin rules
mixin name
Slide 76
Slide 76 text
Slide Sass for designers @laurakalbag
76 Create a mixin called “hide”
Slide 77
Slide 77 text
Slide Sass for designers @laurakalbag
77 Sass mixin syntax for including a mixin
.site-title {
@include hide;
}
include a mixin
selector
mixin name
Slide 78
Slide 78 text
Slide Sass for designers @laurakalbag
78 Include the “hide” mixin rules for the site title
Slide 79
Slide 79 text
Slide Sass for designers @laurakalbag
79 Now the site title is hidden and I can reuse that rule elsewhere
Slide 80
Slide 80 text
Slide Sass for designers @laurakalbag
Nesting
80
Slide 81
Slide 81 text
Slide Sass for designers @laurakalbag
81 The navigation buttons have the class .site-navigation
Slide 82
Slide 82 text
Slide Sass for designers @laurakalbag
82 In CSS, I would lay out the rules for the navigation by specificity
Slide 83
Slide 83 text
Slide Sass for designers @laurakalbag
83 Sometimes I’d indent the CSS to make it easier to read
Slide 84
Slide 84 text
Slide Sass for designers @laurakalbag
84 Nest the rules inside the parent to make it easy to read
Slide 85
Slide 85 text
Slide Sass for designers @laurakalbag
85 It just works in the same way as ordinary CSS
Slide 86
Slide 86 text
Slide Sass for designers @laurakalbag
86 I want to make the selected navigation item stand out
use & to use a classname selector while nesting
Slide 87
Slide 87 text
Slide Sass for designers @laurakalbag
87 Now the .selected class is styled differently
Slide 88
Slide 88 text
Slide Sass for designers @laurakalbag
88 Use & to include pseudo selectors
Slide 89
Slide 89 text
Slide Sass for designers @laurakalbag
89 Now the :hover works
Slide 90
Slide 90 text
Slide Sass for designers @laurakalbag
Nesting media queries
90
Slide 91
Slide 91 text
Slide Sass for designers @laurakalbag
91
some kind of
vertical rhythm
no kind of vertical rhythm
I need to fix the text in the header. It doesn’t line up.
Slide 92
Slide 92 text
Slide Sass for designers @laurakalbag
92 How I’d use media queries in ordinary CSS
Slide 93
Slide 93 text
Slide Sass for designers @laurakalbag
93 With Sass, we can nest the media query inside the selector
Slide 94
Slide 94 text
Slide Sass for designers @laurakalbag
94 We can use the unit variable in the media queries
our breakpoints are now relative to our base unit
Slide 95
Slide 95 text
More mixins
Slide Sass for designers @laurakalbag
95
Slide 96
Slide 96 text
Slide Sass for designers @laurakalbag
96 The line length is too long, the layout feels stretched out
Slide 97
Slide 97 text
Slide Sass for designers @laurakalbag
97 Use max-width and margin: auto to centre multiple elements
Slide 98
Slide 98 text
Slide Sass for designers @laurakalbag
98 The repetition makes this suitable for making into another mixin
Slide 99
Slide 99 text
Slide Sass for designers @laurakalbag
99 Use this centre-layout mixin to make my stylesheet cleaner
Slide 100
Slide 100 text
Slide Sass for designers @laurakalbag
100 The layout now looks more like the mockup
Slide 101
Slide 101 text
Slide Sass for designers @laurakalbag
101 Floating responsive containers with borders is tricky
Slide 102
Slide 102 text
Slide Sass for designers @laurakalbag
102 Solve the problem with borders using box-sizing: border-box;
Slide 103
Slide 103 text
Slide Sass for designers @laurakalbag
103 box-sizing: border-box; needs backup with prefixes
moz and webkit need prefixes to make border-box work
Slide 104
Slide 104 text
Slide Sass for designers @laurakalbag
104 Another repetitive chunk of code that makes a great mixin
Slide 105
Slide 105 text
Slide Sass for designers @laurakalbag
105 Now the boxes have borders and float nicely
Slide 106
Slide 106 text
Parent selectors
Slide Sass for designers @laurakalbag
106
Slide 107
Slide 107 text
Slide Sass for designers @laurakalbag
107 PNGs don’t work so well on zoom or hi-DPI displays
Slide 108
Slide 108 text
Slide Sass for designers @laurakalbag
108
.png .svg
Use SVGs with a clever script to detect SVG support
the .svg version of the file looks crisp at any size
Slide 109
Slide 109 text
Slide Sass for designers @laurakalbag
109 Use the .svg class to show an SVG version of the image
the script adds ‘svg’ as a body class when SVG is supported
Slide 110
Slide 110 text
Slide Sass for designers @laurakalbag
110 This is how I would use the .svg class without a parent selector