Sass for designers

From a talk at CSS Summit in July 2013

Transcript

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